🎯

design-system

🎯Skill

from jezweb/claude-skills

What it does

Skill that extracts a complete design system from an existing website, HTML file, or screenshot into a DESIGN.md file — analyzing colors, typography, components, spacing, and atmosphere via Playwright browser automation and HTML inspection. Output is optimized for the design-loop skill.

📦

Same repository

jezweb/claude-skills(197 items)

design-system

Installation

Vibe Index InstallInstalls to .claude/skills/

npx vibeindex add jezweb/claude-skills --skill design-system

skills.sh Install⚠ Installs to .agents/skills/

npx skills add jezweb/claude-skills --skill design-system

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/design-system/SKILL.md

SKILL.md

647Installs

AddedMar 28, 2026

View on GitHub Back to Skills

More from this repository10

🎯

shadcn-ui🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

tailwind-v4-shadcn🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

tanstack-query🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

tailwind-theme-builder🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

color-palette🎯Skill

Skill for generating complete, accessible color palettes from a single brand hex, creating 11-shade scales, semantic tokens, dark mode variants, and WCAG contrast checking for Tailwind v4

🎯

fastapi🎯Skill

Provides FastAPI development patterns including async endpoints, dependency injection, Pydantic models, authentication, and API documentation best practices

🎯

image-processing🎯Skill

Image processing skill for Claude Code providing guided workflows for image manipulation, resizing, format conversion, and optimization.

🎯

ux-audit🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

favicon-gen🎯Skill

Generates favicon files in multiple sizes and formats for web projects, from a collection of 87 production-ready skills for Cloudflare, React, and AI integrations.

🎯

wordpress-elementor🎯Skill

A WordPress Elementor skill from a Claude Code skills collection that guides Claude through recipes for building and managing WordPress sites with the Elementor page builder.