A professional workflow for AI agents to translate Figma designs into high-fidelity source code using the Figma MCP server.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install implement-design
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 implement-design 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 Implement Design?
The Implement Design skill is a specialized technical workflow designed to bridge the gap between design mockups and production code. By leveraging the Figma MCP server, this skill allows AI agents to extract precise layout properties, typography specifications, and design tokens directly from Figma URLs. It is a core component of the Openclaw Skills ecosystem that ensures developers can maintain 1:1 visual parity while adhering to existing project conventions and design systems.
This skill eliminates the guesswork involved in UI development by providing structured data for Auto Layout, spacing, and component variants. It emphasizes a design-system-first approach, ensuring that generated code doesn't just look like the design but functions correctly within the target codebase's architecture and styling patterns.
Implement Design Use Cases
- Building UI components (buttons, inputs, cards) from specific Figma node IDs.
- Implementing full-page dashboard layouts with responsive constraints and complex grids.
- Migrating design system tokens from Figma variables into CSS or Tailwind configurations.
- Automating the extraction and integration of SVG icons and image assets directly into a project.
- Validating existing frontend implementations against visual source-of-truth screenshots.
How Implement Design Works
- The agent parses the provided Figma URL to extract the unique file key and node ID.
- It fetches the structured design context, including layout and styling metadata, using the Figma MCP toolset.
- A high-resolution screenshot is captured to serve as a visual reference for pixel-perfect validation.
- Necessary assets and icons are downloaded through the built-in MCP assets endpoint.
- The agent translates Figma properties into the project's specific framework (e.g., React, Vue) and styling utility (e.g., Tailwind, CSS Modules).
- A final validation check is performed to ensure the code meets WCAG accessibility standards and matches the design 1:1.
Implement Design Setup
To use this skill within Openclaw Skills, you must have the Figma MCP server configured.
# Verify Figma MCP connectivity
# The agent will typically check for the 'get_design_context' tool
# Ensure your FIGMA_ACCESS_TOKEN is set in your MCP settings
Users simply need to provide a Figma design URL containing a node-id to trigger the implementation workflow.
Implement Design Data Schema & Taxonomy
The skill processes and organizes data based on the following taxonomy:
| Data Category | Details | Source |
|---|---|---|
| Layout | Auto Layout, constraints, padding, and gap values | get_design_context |
| Typography | Font-family, weight, size, and line-height | get_design_context |
| Styling | Hex/RGBA colors, shadows, and border-radius | get_design_context |
| Assets | SVGs, PNGs, and icons served via localhost | MCP Assets Endpoint |
| Metadata | Node hierarchy and child relationships | get_metadata |
Implement Design Advanced Features
- Intelligent truncation handling: Automatically switches to metadata mapping when design files are too complex for a single request.
- Design Token Mapping: Prioritizes existing project design tokens over hardcoded values for better maintainability.
- Component Extension: Identifies existing library components and extends them rather than recreating base UI elements.
- Visual Regression Support: Uses screenshots as a programmatic reference to catch discrepancies in spacing or alignment.
- Integrated Asset Management: Handles localhost-served assets to ensure zero-dependency icon and image integration within Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
YouTube Summarizer Bot
An automated Python bot that monitors YouTube channels via RSS and delivers bilingual AI summaries to Telegram using Google Gemini.
Daily Brief Skill
A streamlined automation skill that generates a combined daily report of local weather and top trending news headlines.
Video Compressor
A specialized skill that guides users through the process of reducing video file sizes using optimized encoding settings and quality controls.
Content Claw
An automated content generation engine that transforms source materials into platform-ready social media assets and visuals.
GLM-V Prompt Generation Skill
An advanced vision-to-prompt engine for Openclaw Skills that transforms visual references into high-quality engineering prompts for image and video AI models.
Weibo Hot Trends
Fetches and sorts real-time Weibo trending topics by heat without requiring an API key.
Featured*
