aico-frontend-design_skill

Overview

This skill transforms a PRD or user story into a complete, developer-ready frontend design file. It produces ASCII layouts, explicit component specs with variants/props, interaction flows, copy, and a frontend implementation prompt. All outputs are written to docs/reference/frontend/designs/{name}.md so developers can pick up implementation immediately.

How this skill works

It first loads the project design system and frontend constraints, then ingests the PRD or story from the PM docs. For each page or feature it defines a user flow (entry → actions → outcome), generates an ASCII layout, enumerates components with exact variants and props, writes content, documents interactions (triggers and feedback), and emits a frontend prompt. The process always references the design system rather than duplicating tokens and ensures the result is saved at docs/reference/frontend/designs/{name}.md.

When to use it

• When you ask to “design the page”, “design component”, or “create page design”.
• When a PRD or story is ready and you need visual and interaction design before implementation.
• When you need a precise design spec a frontend developer can implement from.
• When running the /frontend.design command or preparing handoff artifacts.
• When you must ensure designs follow the project design system and frontend constraints.

Best practices

• Ensure docs/reference/frontend/design-system.md exists and is up to date before running the skill.
• Provide a clear PRD or story under docs/reference/pm/ with acceptance criteria and edge cases.
• Name the output clearly; the file will be saved as docs/reference/frontend/designs/{name}.md.
• Review responsive notes and list breakpoints explicitly in the PRD to avoid ambiguity.
• Include expected content/copy or mark placeholders; avoid leaving copy unspecified.

Example use cases

• Convert a login/signup PRD into a design spec with ASCII layout, components (Input, Button, Alert) and interaction table.
• Design a complex dashboard page: user flow, component table with props, responsive notes, and frontend prompt for implementation.
• Create a reusable component spec (e.g., card, data table) with variants, prop types, and interaction states for library integration.
• Produce a mobile-first checkout page spec with success state, error flows, and accessibility notes.
• Translate a feature story into a step-by-step interaction flow plus code-ready frontend prompt referencing design tokens.