Design Handoff Package
Design skill, available on Zeplik
Design Handoff Package is a ready-to-run design skill on Zeplik. Trigger: "write the handoff spec", "prep this design for devs", "spec this screen out". Ask in plain language and Zeplik applies the skill's method for you inside the conversation, on whichever AI model you prefer. It returns a structured document you can keep and reuse: Document artifact -- structured written deliverable with headed sections and a TL;DR (see artifact-templates/document.md).
The Design Handoff Package skill loads automatically when your request matches it, or you can invoke it directly by typing /design-handoff in any chat. It works with attachments, connectors, and any model that supports the task, so you get the same expert method every time without setting anything up.
What the Design Handoff Package skill can do
- Generate full developer handoff specs from a Figma link or screenshot
- Document design tokens, component props, and variant states in tables
- Specify interaction, animation, and responsive breakpoint behavior
- Cover edge cases like empty, loading, error, and long-text states
Try these prompts on Zeplik
Pick a prompt to open it in the Zeplik app. If you are not signed in yet, your prompt is waiting for you the moment you do.
How the Design Handoff Package skill works
/design-handoff
If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.
Generate comprehensive developer handoff documentation from a design.
Usage
/design-handoff $ARGUMENTS
Generate handoff specs for: @$1
If a Figma URL is provided, pull the design from Figma. Otherwise, work from the provided description or screenshot.
What to Include
Visual Specifications
- Exact measurements (padding, margins, widths)
- Design token references (colors, typography, spacing)
- Responsive breakpoints and behavior
- Component variants and states
Interaction Specifications
- Click/tap behavior
- Hover states
- Transitions and animations (duration, easing)
- Gesture support (swipe, pinch, long-press)
Content Specifications
- Character limits
- Truncation behavior
- Empty states
- Loading states
- Error states
Edge Cases
- Minimum/maximum content
- International text (longer strings)
- Slow connections
- Missing data
Accessibility
- Focus order
- ARIA labels and roles
- Keyboard interactions
- Screen reader announcements
Principles
- Don't assume — If it's not specified, the developer will guess. Specify everything.
- Use tokens, not values — Reference
spacing-mdnot16px. - Show all states — Default, hover, active, disabled, loading, error, empty.
- Describe the why — "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls.
Output
## Handoff Spec: [Feature/Screen Name]
### Overview
[What this screen/feature does, user context]
### Layout
[Grid system, breakpoints, responsive behavior]
### Design Tokens Used
| Token | Value | Usage |
|-------|-------|-------|
| `color-primary` | #[hex] | CTA buttons, links |
| `spacing-md` | [X]px | Between sections |
| `font-heading-lg` | [size/weight/family] | Page title |
### Components
| Component | Variant | Props | Notes |
|-----------|---------|-------|-------|
| [Component] | [Variant] | [Props] | [Special behavior] |
### States and Interactions
| Element | State | Behavior |
|---------|-------|----------|
| [CTA Button] | Hover | [Background darken 10%] |
| [CTA Button] | Loading | [Spinner, disabled] |
| [Form] | Error | [Red border, error message below] |
### Responsive Behavior
| Breakpoint | Changes |
|------------|---------|
| Desktop (>1024px) | [Default layout] |
| Tablet (768-1024px) | [What changes] |
| Mobile (<768px) | [What changes] |
### Edge Cases
- **Empty state**: [What to show when no data]
- **Long text**: [Truncation rules]
- **Loading**: [Skeleton or spinner]
- **Error**: [Error state appearance]
### Animation / Motion
| Element | Trigger | Animation | Duration | Easing |
|---------|---------|-----------|----------|--------|
| [Element] | [Trigger] | [Description] | [ms] | [easing] |
### Accessibility Notes
- [Focus order]
- [ARIA labels needed]
- [Keyboard interactions]
If Connectors Available
If ~~design tool is connected:
- Pull exact measurements, tokens, and component specs from Figma
- Export assets and generate a complete spec sheet
If ~~project tracker is connected:
- Link the handoff to the implementation ticket
- Create sub-tasks for each section of the spec
Tips
- Share the Figma link — I can pull exact measurements, tokens, and component info.
- Mention edge cases — "What happens with 100 items?" helps me spec boundary conditions.
- Specify the tech stack — "We use React + Tailwind" helps me give relevant implementation notes.
Zeplik output presentation
Present the final deliverable as a single polished artifact: clear headings, tables where the content is tabular, fenced code where it is code. Lead with the deliverable itself; keep process commentary to a single short line. If the skill produced multiple files or sections, end with a compact list of them with one-line purposes.
How to use the Design Handoff Package skill
Sign in to Zeplik
Create a free Zeplik account or sign in. New accounts start with free credits, so you can try the Design Handoff Package skill right away.
Describe your design task
Ask in plain language, or type /design-handoff to invoke the skill directly. Zeplik recognizes the Design Handoff Package skill and applies its method.
Review and refine the result
Zeplik returns a structured document you can edit, download, and reuse. Ask follow-ups to refine it.
Source and credit
- Author
- Anthropic
- License
- Apache-2.0
Adapted from the open-source anthropics/knowledge-work-plugins project and tuned to run natively on Zeplik. View source on GitHub.
Frequently asked questions
- What is the Design Handoff Package skill?
- Design Handoff Package is a ready-to-run design skill on Zeplik. Trigger: "write the handoff spec", "prep this design for devs", "spec this screen out". Ask in plain language and Zeplik applies the skill's method for you inside the conversation, on whichever AI model you prefer. It returns a structured document you can keep and reuse: Document artifact -- structured written deliverable with headed sections and a TL;DR (see artifact-templates/document.md).
- How do I use Design Handoff Package on Zeplik?
- Sign in to Zeplik and ask in plain language, or type /design-handoff in any chat to invoke it directly. The skill applies its method and returns a result you can refine in the same conversation.
- Which AI model does the Design Handoff Package skill use?
- Any model you choose. Zeplik works across every model in one chat, so the Design Handoff Package skill runs on your preferred model for the task.
- Where does the Design Handoff Package skill come from?
- The Design Handoff Package skill is adapted from the open-source anthropics/knowledge-work-plugins project (Apache-2.0) and tuned to run natively on Zeplik. The original source is linked on this page.
- How much does the Design Handoff Package skill cost?
- Using the skill is free to start. You only spend Zeplik credits when the assistant runs, and new accounts begin with free credits.
Related design skills
- Accessibility ReviewUse when the user asks to audit a design or page for accessibility — "check a11y", "is this accessible?", "run a WCAG audit" — covering color contrast, keyboard navigation, focus order, touch target size, and screen reader behavior against WCAG 2.1 AA before handoff.
- Brand Guidelines BuilderUse when the user wants Anthropic's official brand look-and-feel applied to an artifact — brand colors, typography, visual formatting, company design standards. Trigger: "use Anthropic branding", "apply our brand style". Visual identity only; not for brand voice or tone in writing (use brand-voice-enforcement).
- Brand Landing PageRuns a brand interview with no established visual direction, then generates deployment-ready landing-page HTML. Not for dashboards or app UI (use frontend-design).
- Design CritiqueUse when the user shares a design, mockup, screenshot, or Figma link and asks for feedback — "review this design", "critique this mockup", "what do you think of this screen?". Gives structured feedback on usability, hierarchy, and consistency. Not for a WCAG audit (use accessibility-review).
- Design Delivery NavigatorUse to chain UI delivery across skills -- research, design, systemize, accessibility, handoff. Not for a single critique (use design-critique).
- Design Style MirrorUse when replicating the visual style of an existing website onto the user's project -- colors, type, spacing, aesthetic. Not for designing a new interface from scratch (use frontend-design).
More on Zeplik
Try Design Handoff Package on Zeplik
Every model, one chat. Bring the Design Handoff Package skill into your next conversation and let the assistant do the work.