HenryLeTheSloth

Site Design — Design skill for Claude Code

Design community

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

Terminal
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 Repository