Convert design screenshots, Figma details, or written briefs into structured handoff documents developers can implement.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install design-handoff-doc
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install design-handoff-doc using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Design Handoff Doc Generator?
The Design Handoff Doc Generator creates practical, developer-facing design specifications from screenshots, Figma links, or written descriptions. It organizes page structure, component dimensions, colors, typography, spacing, assets, interactions, data needs, responsive behavior, and QA acceptance criteria into one handoff document.
For teams using Openclaw Skills, this skill helps bridge design and implementation by turning visual references into actionable details while calling out platform-specific requirements for mini programs, mobile apps, web, and large-screen interfaces. Screenshot measurements are estimates, and direct Figma API access may not be available, so the skill asks for key specifications or screenshots when needed.
Design Handoff Doc Generator Use Cases
- Prepare a developer handoff document for a new page, feature, or module.
- Create a cut asset list with export formats, dimensions, and naming guidance.
- Document component states, interaction behavior, animations, and edge cases.
- Translate a screenshot into a structured layout and component specification.
- Turn a design description into a platform-aware implementation brief.
- Add responsive, accessibility, safe-area, or device-specific notes before development begins.
- Define backend data fields and QA acceptance criteria alongside visual requirements.
How Design Handoff Doc Generator Works
- Collect the project name, platform, design source, page or module name, and any special requirements; ask for missing critical details.
- Analyze the supplied screenshot or image for layout regions, components, colors, spacing, typography, sizing patterns, and visible states. If given only a description, use it with platform best practices.
- For Figma links, determine whether usable specifications are available; if direct API access is unavailable, request key details or a screenshot.
- Select the matching platform template: mini program, App, Web, large screen, or general.
- Fill the template with page structure, component specifications, asset requirements, interaction notes, responsive adaptations, and data needs.
- Check the handoff against the quality checklist, including component states, edge cases, platform constraints, and acceptance criteria.
- Present the completed document in chat or save it as a Markdown file in the workspace when requested.
Design Handoff Doc Generator Setup
No CLI installation command or additional configuration procedure is specified in the skill. Make the skill available through your Openclaw Skills agent's normal skill-loading process, and keep its referenced templates and guidance files alongside the skill.
Before generating a handoff, provide:
- Project name and target platform: mini program, App, Web, or large screen.
- Design source: screenshot, Figma link, or written description.
- Page or module name.
- Optional notes about animation, unusual states, or special interactions.
The skill asks for missing critical information. For Figma links, be prepared to share screenshots or key specifications if direct API access is unavailable. Request a workspace .md file if you want the output saved rather than returned in chat.
Design Handoff Doc Generator Data Schema & Taxonomy
The skill produces a Markdown handoff document, shown in chat or optionally saved as a .md file. The document follows this information structure:
| Section | Information captured |
|---|---|
| Page overview | Page name, platform, design size, and short description |
| Design source | Design link or source, designer, version, and date when available |
| Page structure | Layout regions, hierarchy, and content organization |
| Component list | Dimensions, HEX colors, font family and metrics, spacing, radius, shadow, and states |
| Asset / cut list | Icons, images, illustrations, and backgrounds, with export format, size, and naming |
| Interaction notes | Click or tap behavior, navigation, transitions, feedback, and exceptional states |
| Data requirements | Data fields required by each component, including backend integration needs |
| Adaptation notes | Responsive behavior, safe areas, and platform-specific constraints |
| Acceptance criteria | QA checklist for implementation and visual behavior |
Supporting files referenced by the workflow include platform templates in assets/ (handoff-template-mini-program.md, handoff-template-app.md, handoff-template-web.md, handoff-template-large-screen.md, and handoff-template-general.md) and guidance in references/ (component-checklist.md and naming-convention.md). These paths describe expected skill resources; the input does not include their contents.
Design Handoff Doc Generator Advanced Features
- Selects a platform-specific handoff template and incorporates relevant implementation constraints.
- Extracts visual details from screenshots, including layout, components, colors, spacing, typography, and visible states; inferred measurements are estimates.
- Covers interaction states such as normal, hover, active, disabled, error, loading, and empty where relevant.
- Adds platform-aware details: mini-program rpx and safe areas; iOS pt and Android dp; web breakpoints, focus, and keyboard accessibility; or large-screen scaling and viewing-distance legibility.
- Maps component requirements to data needs and records responsive behavior, asset exports, and QA acceptance criteria.
- Uses component and asset-naming reference checklists to reduce omissions; the skill does not specify hooks, multi-agent coordination, or automated file generation beyond optionally saving the handoff as Markdown.
SKILL.md
Loading
Related Openclaw Skills
Design Spec Generator
Generate a complete, developer-ready design system specification tailored to your project and target platform.
Xiaohongshu Competitor Radar
Turn public Xiaohongshu content and engagement data into evidence-led competitor, creator, and audience insights.
FairSplit
FairSplit records shared group expenses in local JSON ledgers and calculates accurate balances and the fewest payments needed to settle up.
Color Palette Advisor
Generate a complete, accessible color system for a product or brand, with practical usage guidance and exact HEX values.
SignalLayer x402 Preflight
Check unfamiliar x402 payment terms and Base recipients before an authorized wallet interaction—without treating findings as a safety guarantee.
Kuaishou Competitor Radar
Collect and compare public Kuaishou video, creator, and comment data to support competitor research and content strategy.
Featured*
