Skills for Real Engineers. Straight from my .agents directory.
39 skills
extract-design
Agent skill from
Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', 'turn this URL into design tokens', 'make a Tailwind theme from this site', or '/extract-design'. Do not use for building a new UI from scratch unless the user first wants to extract an existing website's design language.
How to install extract-design
install extract-design
# install the design-extract pack with the skills CLI
npx skills add Manavarya09/design-extract# or add only this skill to Claude Code: copy the folder
skills/extract-design/
# into
~/.claude/skills/extract-design/ (all projects)
.claude/skills/extract-design/ (one project)
1# Extract Design Language23Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.45## Prerequisites67Ensure `designlang` is available. Install if needed:89```bash10npm install -g designlang11```1213Or use npx (no install required):1415```bash16npx designlang <url>17```1819## Process20211. **Run the extraction** on the provided URL:2223```bash24npx designlang <url> --screenshots25```2627For multi-page crawling: `npx designlang <url> --depth 3 --screenshots`28For dark mode: `npx designlang <url> --dark --screenshots`29302. **Read the generated markdown file** to understand the design:3132```bash33cat design-extract-output/*-design-language.md34```35363. **Present key findings** to the user:37 - Primary color palette with hex codes38 - Font families in use39 - Spacing system (base unit if detected)40 - WCAG accessibility score41 - Component patterns found42 - Notable design decisions (shadows, radii, etc.)43444. **Offer next steps:**45 - Copy `*-tailwind.config.js` into their project46 - Import `*-variables.css` into their stylesheet47 - Paste `*-shadcn-theme.css` into globals.css for shadcn/ui users48 - Import `*-theme.js` for React/CSS-in-JS projects49 - Import `*-figma-variables.json` into Figma for designer handoff50 - Open `*-preview.html` in a browser for a visual overview51 - Use the markdown file as context for AI-assisted development5253## Output Files (8)54…
Excerpt shown under the repository's MIT license.
Keep exploring
Similar skill repositories
An agentic skills framework & software development methodology that works.
15 skills
A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.
CC1 skill
Public repository for Agent Skills
20 skills
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
CCCU6 skills
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
CCCXCUGH6 skills