domains / families / design / design-system

design-system

combined

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'. Creates the Tamagui brand system for an Expo/React Native Power Apps mobile app, including design-system.md, tokens.ts, and an HTML gallery.

When to use

• Starting a new project based on an existing site's visual language
• Documenting a site's design system that was never formally written down
• Preparing `.design/DESIGN.md` before running the design loop
• Extracting brand guidelines from a client's existing website
• Creating consistency documentation for a multi-page project
• Extracting design tokens from a Google Stitch project
• **Step 6.5** — auto-invoked from `/create-mobile-app` after scaffold + `pa app init`, before screen builders
• **Standalone** — `/design-system` callable any time to create or refresh a brand system

When not to use

• Screen-level visual tweaks → use `/edit-app`
• Plan-level screen changes → use `/edit-app screens`
• Data model changes → use `/add-dataverse` or `/setup-datamodel`
• Use this skill only when the task clearly matches its upstream source and local project context.
• Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
• Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

Skill page

Conflict

The three skills share the name 'design-system' but perform fundamentally different tasks. The first (microsoft) is a generator for a specific mobile stack (Expo/Tamagui) that creates a brand spec, tokens, and an HTML gallery. The second (jezweb) is an extractor that reverse-engineers a design system from an existing website or screenshot into a DESIGN.md file. The third (sickn33) is a set of mechanical implementation invariants (performance, FOUT prevention, token architecture) for frontend code. Because they cover generation, extraction, and implementation rules respectively, no single copy is the 'original' that the others reproduce; they are distinct tools for different stages of the design process.