AgentSkillsCN

design-spec

根据需求或 Figma 设计图，生成并完善 UI/UX 设计规范。涵盖组件规范（原子/分子/有机体）、无障碍审计（WCAG 2.1 AA）、设计令牌、响应式布局，以及开发交接流程。本技能可触发于“设计规范”“UI 规范”“组件规范”“无障碍审计”“设计交接”“设计令牌”“线框图”“原型图”等场景。

SKILL.md
--- frontmatter
name: design-spec
description: Create UI/UX design specifications from requirements or Figma designs. Covers component specs (Atom/Molecule/Organism), accessibility audits (WCAG 2.1 AA), design tokens, responsive behavior, and dev handoffs. Triggers on "design spec", "ui spec", "component spec", "accessibility audit", "design handoff", "design tokens", "wireframe", "mockup".
infer: true
allowed-tools: Read, Write, Edit, Grep, Glob, WebSearch, ai-multimodal, mcp__figma__*

Design Specification

Create comprehensive UI/UX specifications for implementation.

When to Use

  • •PBI needs design documentation
  • •Figma design ready for handoff
  • •Component specification required
  • •Accessibility audit needed
  • •Design system additions

⚠️ MUST READ References

IMPORTANT: You MUST read these reference files for complete protocol. Do NOT skip.

  • •⚠️ MUST READ references/design-system-reference.md — component specs, accessibility audit template, design tokens, responsive breakpoints, handoff checklist

Workflow

  1. •

    Determine Source Type

    • •If URL starting with figma.com: treat as direct Figma source
    • •If file path: read file and check for figma_link in frontmatter
  2. •

    Load Source

    • •Read PBI/requirements file
    • •Parse YAML frontmatter
    • •Extract figma_link field if present
  3. •

    Detect Figma Link

    code
    Sources (priority order):
1. Direct Figma URL argument
2. frontmatter.figma_link
3. Figma URLs in "Design Reference" section

    Pattern: https?://(?:www\.)?figma\.com/(design|file)/([a-zA-Z0-9]+)(?:/[^?]*)?(?:\?node-id=([0-9]+:[0-9]+))?

  4. •

    Extract Figma Specs (if link found)

    • •Call /figma-extract {url} internally
    • •Handle failures gracefully (continue without Figma data)
  5. •

    Define Components (use template from references/design-system-reference.md)

    • •Type classification: Atom / Molecule / Organism / Template
    • •States: default, hover, active, disabled, error, loading
    • •Design tokens mapping
    • •Accessibility requirements (WCAG 2.1 AA)
  6. •

    Specify Responsive Behavior (breakpoints in reference)

  7. •

    Generate Spec Structure: Overview, Component Inventory, States, Design Tokens, Accessibility, Responsive, Figma Extracted Specs

  8. •

    Save Artifact

    • •Path: team-artifacts/design-specs/{YYMMDD}-designspec-{feature}.md

Fallback Behavior

When Figma extraction unavailable:

  1. •Log warning: "Figma specs not extracted: {reason}"
  2. •Continue with manual spec creation
  3. •Leave Section 7 with placeholder text

Design Token Format

scss
$primary: #1976D2;     // Colors
$heading: 24px/1.2 'Inter'; // Typography
$gap-sm: 8px;          // Spacing

Example

bash
/design-spec https://www.figma.com/design/ABC123/UserProfile
/design-spec team-artifacts/pbis/260119-pbi-user-profile.md

Output

Creates: team-artifacts/design-specs/{YYMMDD}-designspec-{feature}.md

IMPORTANT Task Planning Notes

  • •Always plan and break many small todo tasks
  • •Always add a final review todo task to review the works done at the end to find any fix or enhancement needed