aico-frontend-design

name

aico-frontend-design

description

Transform PRD or story into complete page/component designs with ASCII layouts, component specs, interaction flows, and frontend implementation prompts. Use this skill when: - User asks to "design the page", "design component", "create page design" - User mentions "page design", "component design", "UI design", "layout design" - Running /frontend.design command - PRD or story is ready and need visual/interaction design before implementation - Need to create design spec that frontend developer can implement from Prerequisites: Design system must exist at docs/reference/frontend/design-system.md Output: ALWAYS write design files to docs/reference/frontend/designs/{name}.md

Design

⚠️ CRITICAL RULES - READ FIRST

1. CHECK EXISTING DESIGNS: Always check docs/reference/frontend/designs/ first
2. READ DESIGN SYSTEM: Must read docs/reference/frontend/design-system.md before designing
3. READ CONSTRAINTS: Must read docs/reference/frontend/constraints.md for tech stack
4. SAVE TO CORRECT PATH: docs/reference/frontend/designs/{name}.md

Language Configuration

Before generating any content, check aico.json in project root for language field to determine the output language. If not set, default to English.

Process

1. Read design system: Load docs/reference/frontend/design-system.md
2. Read constraints: Load docs/reference/frontend/constraints.md
3. Read PRD/story: Load the source document from docs/reference/pm/
4. For each page/feature:
   • Define user flow (entry → actions → outcome)