awesome-design-mdlisted

# Awesome Design MD Primary design execution skill — loaded by default for every design task. ## Workflow Every design task follows this two-phase workflow: ### Phase 1 — Execute 1. **Understand the request** — identify the product domain, audience, and key interaction patterns 2. **Select reference design(s)** — search `design-refs/` for the closest match (or fuse two) 3. **Apply design tokens** — extract colors, typography, spacing, motion, and component patterns from the reference 4. **Implement** — produce UI code, design tokens, or component specs using the reference as the north star 5. **Annotate** — document design decisions, token mappings, and deviations from the reference ### Phase 2 — Review Pass (MANDATORY) **Never mark design work complete without running this pass.** The review pass checks: - **Visual fidelity** — do the implemented components match the reference's aesthetic? - **Token adherence** — are CSS variables / design tokens correctly mapped? - **Typography consistency** — font family, scale, weight, and tracking match reference? - **Spacing & rhythm** — do margins, padding, and gap values follow the reference system? - **Component completeness** — are all states covered (default, hover, active, disabled, error)? - **Accessibility** — contrast ratios, focus states, and semantic HTML - **Responsive behavior** — does the design scale gracefully across breakpoints? Review findings → document as a numbered list of fixes. Apply fixes before declarin