Extract comprehensive design language from websites including colors, typography, animations, interactive states, shadows, gradients, component patterns, and UX behaviors. Generates pixel-perfect design guides with responsive screenshots and complete design system documentation. Use when analyzing website design, creating design systems, or rebuilding sites.
Generate pixel-perfect design guides from any website URL with automated extraction of design tokens, CSS styles, and screenshots.
# Install dependencies
uv sync
# Install Playwright browsers
playwright install chromium
uv run main.py --url https://example.com
uv run main.py --url https://stripe.com --output ./stripe-design
uv run main.py --url https://github.com --viewport-width 1920 --viewport-height 1080
--url, -u - Website URL to analyze (required)--output, -o - Output directory (default: ./output)--viewport-width - Viewport width in pixels (default: 1600)--viewport-height - Viewport height in pixels (default: 1200)The tool generates the following files in the output directory:
output/
├── design-guide.md # Comprehensive design documentation
├── viewport_screenshot.png # Viewport screenshot
├── fullpage_screenshot.png # Full page screenshot
├── extracted.html # Original HTML structure
├── extracted.css # All CSS styles
└── computed_styles.json # Computed element styles
The generated design-guide.md includes:
# Extract design from Stripe
uv run main.py --url https://stripe.com --output ./stripe-design
# Review the design guide
cat ./stripe-design/design-guide.md
# Examine extracted CSS
cat ./stripe-design/extracted.css
Extract design information
uv run main.py --url https://example.com
Review the design guide - Study design tokens and patterns
Build HTML - Create /tmp/test.html using the design tokens
Compare - Take screenshots and compare with originals
Iterate - Refine until pixel-perfect
Document learnings - Update design guide with findings
This tool is designed as a Claude Code skill. When used in Claude Code:
./design-guide/output/When running in Claude Code with Playwright MCP:
The tool supports an iterative workflow:
Each iteration improves accuracy and captures nuances.
MIT
Generated using Claude Code skill framework
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer