Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser automation and HTML inspection. Produces a semantic design system document optimised for consistent page generation. Triggers: 'extract design system', 'design system', 'create DESIGN.md', 'analyse the design', 'what design does this site use', 'extract styles from', 'reverse engineer the design'.
$npx -y skills add jezweb/claude-skills --skill design-systemInstalls into the current project.
Run `npx skills use "https://github.com/jezweb/claude-skills" --skill "jezweb/claude-skills/design-system"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/jezweb/claude-skills" that are relevant to the current task. Run `npx skills add "https://github.com/jezweb/claude-skills"` and select the relevant skills, then follow their instructions.