AgentSkillsCN

aico-frontend-design

将 PRD 或故事转化为完整的页面/组件设计，包括 ASCII 布局、组件规格、交互流程，以及前端实现的指导建议。 当满足以下条件时，可使用此技能： - 用户要求“设计页面”、“设计组件”、“创建页面设计”； - 用户提到“页面设计”、“组件设计”、“UI 设计”、“布局设计”； - 执行 /frontend.design 命令； - PRD 或故事已准备就绪，但在实施前需要视觉与交互设计； - 需要创建一份前端开发者可直接参照并实现的设计规范。 前提条件：设计系统必须存在于 docs/reference/frontend/design-system.md 中。 输出：始终将设计文件写入 docs/reference/frontend/designs/{name}.md。

SKILL.md
--- frontmatter
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

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)
    • •Create ASCII layout
    • •List all components with variants and props
    • •Write content/copy
    • •Document all interactions
    • •Generate frontend prompt
  5. •Save output: ALWAYS write to docs/reference/frontend/designs/{name}.md

Design File Template

markdown
# [Name] Design Spec

> Project: [project-name]
> Created: YYYY-MM-DD
> Last Updated: YYYY-MM-DD

## User Flow

1. User enters from [entry point]
2. User sees [initial state]
3. User can [actions]
4. Success: [outcome]

## Layout (ASCII)

┌─────────────────────────────────────┐
│ Header │
├─────────────────────────────────────┤
│ Content │
└─────────────────────────────────────┘

## Sections

### 1. [Section Name]

- **Purpose**: What this section achieves
- **Components**: List of UI components used
- **Content**: Actual text/copy
- **Design notes**: Specific styling details

## Component List

| Component | Variants           | Props          | Notes        |
| --------- | ------------------ | -------------- | ------------ |
| Button    | primary, secondary | size, disabled | Use for CTAs |

## Responsive

- **Desktop**: [layout notes]
- **Tablet**: [layout notes]
- **Mobile**: [layout notes]

## Interactions

| Trigger   | Action      | Feedback                     |
| --------- | ----------- | ---------------------------- |
| Click CTA | Submit form | Show loading → success toast |

---

## Frontend Prompt

<context>
You are implementing [page/component name] for [project].
</context>

<constraints>
Read and follow:
- Design system: docs/reference/frontend/design-system.md
- Frontend constraints: docs/reference/frontend/constraints.md
</constraints>

<requirements>
1. Follow the design system tokens exactly
2. Implement all sections as specified
3. Handle all responsive breakpoints
4. Implement all interactions listed
</requirements>

Key Rules

  • •ALWAYS define user flow with entry point and success state
  • •MUST list specific props and variants for each component
  • •ALWAYS document all triggers and feedback for interactions
  • •Reference design system, don't duplicate it

Common Mistakes

  • •❌ Skip user flow → ✅ Always define entry point and success state
  • •❌ Vague component specs → ✅ List specific props and variants
  • •❌ Forget interactions → ✅ Document all triggers and feedback
  • •❌ Duplicate design system → ✅ Reference it, don't copy