claude-design-integrationlisted

# Claude Design Integration ## When to activate - User has exported a handoff bundle from Claude Design and wants to implement it as code - User wants to set up a design→code workflow using Claude Design output - User asks how to convert a Claude Design export into React, HTML, or framework components - User wants to extract design tokens (colors, spacing, typography) from a Claude Design bundle - User is mapping Claude Design component annotations to a UI library (shadcn/ui, MUI, Tailwind, Radix) ## When NOT to use - Building UI from scratch with no design input — use a code-first approach instead - Working with Figma, Sketch, or other vector design tools — this skill is Claude Design-specific - Pure refactoring or logic work with no visual design component - User has a screenshot or image but not a Claude Design bundle — handle as a standard visual prompt ## Instructions ### Receiving the handoff bundle Ask the user to confirm the bundle contents before starting implementation: ```bash unzip design-handoffs/checkout.bundle -d design-handoffs/checkout/ ls design-handoffs/checkout/ # Expect: layout.json, tokens.json, components.md, preview.png ``` If the bundle contains `tokens.json`, load it first. Design tokens define the entire visual contract — colors, spacing, font sizes, border radii. Never hardcode values that appear in the token file. ### Placing bundle files Standardize on this location to avoid path drift across projects: ``` project-root/ └── design-han