Install
$ claude plugin install designSkill becomes available as /design-handoff
Install without a terminal (Claude.ai)
design-handoff is verified on Claude.ai, so you can install it from the browser — no command line. It then runs in Claude’s server-side sandbox, which has no shell and no access to your computer’s files: you upload what it should read and download what it produces.
- 1Turn on code execution. On claude.ai, open Settings → Capabilities and enable "Code execution and file creation". Skills that produce files need it, and it is off for some accounts by default.
- 2Download the skill folder. Follow the source link on the skill page to its repository and download the skill’s folder. Read the SKILL.md before you install it — it is plain text, and it is the instructions the agent will follow.
- 3Zip it and upload. Compress the folder into a .zip, then on claude.ai go to Customize → Skills and upload it. Skills you upload are private to your account.
- 4Ask for the work. Start a normal conversation and describe the job in your own words. The skill loads itself when your request matches what its description covers — you never invoke it by name.
Anthropic documents this flow in Use skills in Claude. See every Skill that installs this way.
Best for
The moment a design is approved and engineering needs implementation-ready specs.
About this skill
Generate developer handoff specs — layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, animation details.
Score breakdown
Score breakdown
rubric 1.0Composite 0–100 score derived from 9 verifiable signals. See the rubric →
Related skills
Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.
Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run.
Lock generated UIs to a brand. Anthropic's own guidelines, formalized as a skill.
