A technical utility to extract complete visual design systems from websites into structured Markdown for AI coding agents.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install design-md-generator
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-md-generator 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 MD Generator?
The Design MD Generator is a sophisticated tool built for developers who need to bridge the gap between visual inspiration and technical implementation. By analyzing a live URL, the skill extracts a comprehensive design system—spanning colors, typography, spacing, and component patterns—and formats it into a standardized DESIGN.md document. This process leverages the Google Stitch format, making the output highly readable for AI models. When using Openclaw Skills, this generator ensures your AI coding assistant has the exact CSS tokens and architectural principles required to build pixel-perfect interfaces that match any reference site.
Design MD Generator Use Cases
- Rapidly documenting an existing website design system for documentation or migration.
- Providing precise visual context to AI agents during a frontend development workflow.
- Reverse-engineering the visual language of any web property into actionable design tokens.
- Strengthening the design-to-code pipeline using Openclaw Skills to automate specification generation.
How Design MD Generator Works
- The browser tool navigates to the target URL to capture screenshots and snapshots of the rendered DOM.
- An extraction script parses computed styles to identify unique colors, font hierarchies, and spacing scales.
- The skill synthesizes the raw data into nine structured sections defined by the Google Stitch standard.
- AI-ready prompts are generated in the final section to facilitate immediate UI building.
- The final DESIGN.md and optional visual catalogs are saved to the project directory within the Openclaw Skills framework.
Design MD Generator Setup
To utilize this skill, follow these steps within your environment:
# From your Openclaw Skills directory
cd design-md-generator
# Execute the token extraction script
node scripts/extract-tokens.js "https://example.com"
Ensure your browser tools are configured to allow snapshots and screenshots for accurate visual analysis.
Design MD Generator Data Schema & Taxonomy
The generated DESIGN.md organizes design data into a clear taxonomy:
| Data Type | Extraction Detail |
|---|---|
| Colors | Semantic roles, Hex values, and functional categories (Brand, Text, Border). |
| Typography | Font families, size scales, weights, and line-heights in a hierarchy table. |
| Layout | Spacing scales, grid definitions, and responsive breakpoints. |
| Components | Detailed CSS for buttons, cards, and inputs including hover/active states. |
Design MD Generator Advanced Features
- Full support for the Google Stitch DESIGN.md format standard.
- Automated generation of visual style guides through preview.html exports.
- Semantic tokenization of raw CSS values for better developer experience.
- Optimized for Openclaw Skills to provide seamless multi-agent support for UI/UX tasks.
SKILL.md
Loading
Related Openclaw Skills
Q-Skill
Q-Skill is a versatile AI intelligence suite that integrates smart query routing, creative thinking frameworks, rapid utility tools, and rigorous quality control.
Comprehensive Knowledge System
A three-layered intellectual framework merging investment philosophy, prompt engineering, and standardized AI programming methodologies.
ZhangDi Avatar
A high-fidelity digital persona of entrepreneur ZhangDi designed for strategic business analysis and decision-making using structured frameworks.
Clawder
Clawder is a production-grade AI coding skill that implements JT directives to eliminate agent laziness through mandatory verification and autonomous bug fixing.
Report-gama
Report-gama is a professional market intelligence system that automates the generation of 15-chapter research reports with real-time data and PDF export capabilities.
Baidu Search Engine
A powerful search integration that allows AI agents to perform live web queries and research within the Openclaw Skills framework.
Featured*
