Back to Sintra/Creative & Design
advanced·Creative & Design·Multi-week

Design System Build

A component architecture, token structure, code examples, documentation template, and governance process — across Figma + React + Storybook.

⬡
Recommended modelClaude Sonnet 4.6

Detailed prompt engineering for generative models

What you need to fill in

[product]

Tools used

ChatGPTClaudeFigmaJavaScript

The prompt

"Build a design system and component library for [product]. Requirements: - Figma/Sketch components - Design tokens (colors, typography, spacing) - WCAG 2.1 AA compliance - Dark/light mode - Multi-language - Mobile-first Technical: - React/Vue/Angular components - Storybook documentation - Automated testing - Version control Provide: - Component architecture - Token structure - Code examples - Documentation template - Governance process"
Open in Claude

Sample output

**Token tree** ``` color/ bg/{abyss, steel, hairline} fg/{1, 2, 3, on-violet} accent/{violet, cyan-ice} diff/{beginner, intermediate, advanced, expert} type/{display, h1, h2, body, eyebrow, mono} space/{1..24} // 4px grid radius/{none, sm, md, lg, pill} shadow/{1, 2, 3, glow, glow-strong} motion/{ease-out, dur-fast, dur-base, dur-slow} ``` **Governance:** all changes via PR, two reviewers (1 design + 1 eng), Storybook snapshots + visual diff CI.

Try with these tools

midjourneydall e 3runway
design-systemcomponentsaccessibilitymulti-week

More in Creative & Design

Page Layout Help

A suggested layout, a colour scheme, an essentials list, the most common mistakes to avoid, and free tool picks.

beginner

Full App Design

User flows, wireframe descriptions, component specs, responsive considerations, a11y requirements, and a design-system recommendation.

intermediate

Chart Selection Help

Chart-type picks per metric, clarity tips, a colour scheme, the labels/annotations you need, and tool suggestions.

beginner