[IMPORTANT] Use TaskCreate to break ALL work into small tasks BEFORE starting — including tasks for each file read. This prevents context loss from long files. For simple tasks, AI MUST ask user whether to skip. Quick Summary Goal: Create structured UI/UX design specification documents from requirements or PBIs for developer handoff. Workflow: Read Source — Extract UI requirements from PBI, story, or Figma URL Determine Complexity — Quick Spec (sections 1-4) vs Full Spec (all 7 sections) Build Component Inventory — List new vs existing components Define States & Tokens — Interactions, design tokens, responsive breakpoints Save Artifact — Output to team-artifacts/design-specs/ Key Rules: If Figma URL provided, run /figma-design first to extract specs Reference existing design system tokens from docs/project-reference/design-system/ Include accessibility requirements (keyboard nav, ARIA labels, contrast) Be skeptical. Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence percentages (Idea should be more than 80%). Design Specification Create structured UI/UX design specification documents from requirements or PBIs for developer handoff. When to Use A PBI or user story needs a design spec before implementation Translating requirements into concrete UI layout, states, and tokens Documenting component inventory and interaction patterns Creating responsive breakpoint specifications When NOT to Use Extracting specs from Figma -- use figma-design first, then this skill Building the actual UI -- use frontend-design Full UX research and design process -- use ux-designer Reviewing existing UI code -- use web-design-guidelines Prerequisites Read before executing: The source PBI, user story, or requirements document docs/project-reference/design-system/ -- project design tokens (if applicable) Existing design specs in team-artifacts/design-specs/ for format consistency Workflow Read source input IF Figma URL provided → run /figma-design first to extract specs, then continue IF PBI/story → extract acceptance criteria and UI requirements IF verbal requirements → clarify with user before proceeding Determine spec complexity IF single form or simple component → Quick Spec (sections 1-4 only) IF full page or multi-component view → Full Spec (all 7 sections) IF multi-page flow → Full Spec + Flow Diagram Build component inventory List all UI components needed Identify reusable vs feature-specific components Note existing components from shared component library or design system Define states and interactions Default, hover, active, disabled, error, loading, empty states User interactions (click, drag, keyboard shortcuts) Transitions and animations Extract design tokens Colors, typography, spacing, shadows, border-radius Reference existing design system tokens where possible Document responsive behavior Mobile (320-767px), Tablet (768-1023px), Desktop (1024px+) What changes at each breakpoint (layout, visibility, sizing) Save artifact Path: team-artifacts/design-specs/{YYMMDD}-designspec-{feature-slug}.md Output Format
Design Spec: {Feature Name} ** Source: ** {PBI/story reference} ** Date: ** {YYMMDD} ** Status: ** Draft | Review | Approved
- Overview
- Component Inventory | Component | Type | Source | Notes | |
|
|
|
| | UserCard | New | Feature-specific | Displays user avatar + name | | DataTable | Existing | shared library | Reuse with custom columns |
- Layout {Description or ASCII wireframe of layout structure} - Desktop: {layout description} - Tablet: {layout changes} - Mobile: {layout changes}
- Design Tokens | Token | Value | Usage | |
|
|
| | $primary |
1976D2 | Action buttons, links | | $text-body | 14px/1.5 Inter | Body text | | $gap-md | 16px | Section spacing |
- States & Interactions | Element | Default | Hover | Active | Disabled | Error | |
|
|
|
|
|
| | Save btn | Blue/white | Darken 10% | Scale 0.98 | Gray/50% opacity | -- |
6. Accessibility
Keyboard navigation order
ARIA labels for interactive elements
Color contrast compliance notes
7. Open Questions
{Any unresolved design decisions} Examples Example 1: Simple form spec Input: "Design spec for employee onboarding form" Output: Quick Spec with sections 1-4 covering form fields (name, email, department dropdown, start date picker), validation rules, submit/cancel actions, and mobile stacking behavior. Example 2: Complex dashboard spec Input: "Design spec for recruitment pipeline dashboard with drag-and-drop columns" Output: Full Spec covering Kanban board layout, candidate cards (component inventory), drag-and-drop interactions, column states (empty, populated, over-limit), filter bar, responsive collapse to list view on mobile, and accessibility for keyboard drag operations.