Site Design — Design skill for Claude Code
Extract a website's design system into DESIGN.md using Firecrawl (colors, fonts, spacing, components).
How to install Site Design
Installs to ~/.claude/commands/henrylethesloth-shopify_claude_skills-site-design.md
mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/HenryLeTheSloth/shopify_claude_skills/HEAD/.claude/commands/site-design.md -o ~/.claude/commands/henrylethesloth-shopify_claude_skills-site-design.md Restart Claude Code, or start a new session, for it to be picked up.
What Site Design does
Extract a website's design system into DESIGN.md using Firecrawl (colors, fonts, spacing, components).
Alternatives in Design
- Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
- Pair — Fuse two extracted designs into a single hybrid identity 3.6k ★
- Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Extract Design Tokens
Extract design tokens - colors, type, spacing, shadows - from a URL, screenshot, or CSS into CSS variables and
Figma Theme Sync
Pull Figma variable collections (colors, spacing, fonts, radius) and diff against auxi/src/theme/theme.ts to s
Style Guide
Generate comprehensive design system documentation including colors, typography, spacing, components, and usag
Consistency
Design consistency check. Scan all components for inconsistencies in colors, spacing, typography, buttons, ani
Design Theme Generation Skill
Claude Skill for systematic design theme generation from moodboard analysis. Generate professional, non-generi
Theme Swap
Recolour an extracted site's design around a new brand primary. OKLCH hue rotation preserves perceptual lightn
Related Agents
Figma Interpreter
Use this agent to analyze Figma designs and extract technical specifications for development. This agent parse
Ds Tokens
Use ONLY to extract design tokens (colors, spacing, radius, typography) from the Figma file's LOCAL variable c
Site Cloner
Extract a complete design specification from a live website URL — design tokens, typography, class-annotated s