Agent Skills
› AjayIrkal23/agentic-mercy-10x
› design-extract
design-extract
GitHub从网站URL提取完整设计系统，生成颜色、排版等8种格式文件。支持多页爬取、暗色模式、框架自动适配及竞品对比。提供Tailwind、CSS变量、Figma等集成方案，助力开发者快速复用设计语言。
Trigger Scenarios
用户提供网站URL并要求分析其设计风格
需要获取目标网站的色彩、字体或组件规范
请求将现有设计转换为特定框架配置（如Tailwind）
Install
npx skills add AjayIrkal23/agentic-mercy-10x --skill design-extract -g -y
SKILL.md
Frontmatter
{
"name": "design-extract",
"description": "ALWAYS invoke when a reference URL is available to extract complete design systems from live websites — tokens, Tailwind config, typography, colors, and component anatomy. Commands: \/extract, \/grade, \/battle, \/remix, \/pack, \/theme-swap, \/brand, \/pair."
}
Extract Design Language
Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.
Prerequisites
Ensure designlang is available. Install if needed:
npm install -g designlang
Or use npx (no install required):
npx designlang <url>
Process
- Run the extraction on the provided URL:
npx designlang <url> --screenshots
For multi-page crawling: npx designlang <url> --depth 3 --screenshots
For dark mode: npx designlang <url> --dark --screenshots
- Read the generated markdown file to understand the design:
cat design-extract-output/*-design-language.md
-
Present key findings to the user:
- Primary color palette with hex codes
- Font families in use
- Spacing system (base unit if detected)
- WCAG accessibility score
- Component patterns found
- Notable design decisions (shadows, radii, etc.)
-
Offer next steps:
- Copy
*-tailwind.config.jsinto their project - Import
*-variables.cssinto their stylesheet - Paste
*-shadcn-theme.cssinto globals.css for shadcn/ui users - Import
*-theme.jsfor React/CSS-in-JS projects - Import
*-figma-variables.jsoninto Figma for designer handoff - Open
*-preview.htmlin a browser for a visual overview - Use the markdown file as context for AI-assisted development
- Copy
Output Files (8)
| File | Purpose |
|---|---|
*-design-language.md |
AI-optimized markdown — the full design system for LLMs |
*-preview.html |
Visual HTML report with swatches, type scale, shadows, a11y |
*-design-tokens.json |
W3C Design Tokens format |
*-tailwind.config.js |
Ready-to-use Tailwind CSS theme |
*-variables.css |
CSS custom properties |
*-figma-variables.json |
Figma Variables import format |
*-theme.js |
React/CSS-in-JS theme object |
*-shadcn-theme.css |
shadcn/ui theme CSS variables |
CLI Commands
Core Extraction
designlang <url>— Colors, typography, spacing, shadows, radii, CSS vars, breakpoints, animations, componentsdesignlang apply <url>— Auto-detect framework and write tokens to your projectdesignlang clone <url>— Generate a working Next.js starter with extracted design
Grading & Comparison
designlang grade <url>— Shareable HTML Design Report Card — letter grade, 8 dimensions, evidence, strengths + fixesdesignlang battle <urlA> <urlB>— Head-to-head graded battle card with verdict, dimension table, palette comparison
Design Transformation
designlang remix <url> --as <vocab>— Restyle the audited page in another vocabulary (brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial)designlang theme-swap <url> --primary <hex>— Recolour the extracted design around a new brand primarydesignlang pair <urlA> <urlB>— Fuse two designs across 7 axes (colours/type/spacing/shape/motion/voice/components)
Documentation & Analysis
designlang brand <url>— Full editorial brand-guidelines document (13 chapters)designlang pack <url>— Bundle every output into one polished design-system directorydesignlang drift <url> --tokens <file>— Check local tokens for drift against a live sitedesignlang visual-diff <before> <after>— Side-by-side HTML diff of two URLs
MCP Server
designlang mcp— Launch stdio MCP server for Cursor / Claude Code / agent integration
Claude Code Slash Commands
Inside Claude Code sessions (via plugin):
/extract <url>— Full extraction output/grade <url>— Design Report Card/battle <urlA> <urlB>— Comparative analysis/remix <url> --as <vocab>— Style transformation/pack <url>— Bundled design system/theme-swap <url> --primary <hex>— Recolour around a new brand primary/brand <url>— Full editorial brand-guidelines document/pair <urlA> <urlB>— Fuse two designs
Additional Commands
- Compare two sites:
npx designlang diff <urlA> <urlB> - View history:
npx designlang history <url>
Options
| Flag | Description |
|---|---|
--out <dir> |
Output directory (default: ./design-extract-output) |
--dark |
Also extract dark mode color scheme |
--depth <n> |
Crawl N internal pages for site-wide extraction |
--screenshots |
Capture component screenshots (buttons, cards, nav) |
--wait <ms> |
Wait time after page load for SPAs |
--framework <type> |
Generate only specific theme (react or shadcn) |
Version History
- 581d130 Current 2026-07-19 09:06
