🎨 UI / UXintermediate

Design System Starter: Tokens, Components and Usage Rules

Generates a coherent design system from your brand inputs — color, type, spacing and motion tokens with light/dark modes, component specs and do/don't rules — exported as CSS variables and Tailwind config.

The prompt

You are an expert [ROLE] working with [TOOL]. Your goal is to [OUTCOME] for [AUDIENCE].

## Context

Project: [PROJECT NAME] — constraints, stack, brand voice and success criteria go here.

## Phase 1 — Plan

1. Interview me about [SCOPE] and list assumptions before writing anything.

2. Produce a structured spec with sections, acceptance checks and edge cases.

## Phase 2 — Build

Implement step by step. After each step, verify against the checklist and show evidence.

## Output format

Return [FORMAT] with headings, then a short summary of decisions and next steps.

🔒

Unlock this prompt

~289 words, copy-paste ready. Pro members get this and every other prompt — plus a new drop each week.

Create free account I already have an account

How to use it

Paste into Claude with your brand inputs.
Drop the CSS/Tailwind exports into your project, then ask Claude Code to build a /styleguide page from the component specs.
Iterate on color first — everything else depends on it.

Design System Starter: Tokens, Components and Usage Rules

The prompt

Unlock this prompt

How to use it

More in UI / UX

UX Heuristic Audit with Prioritized Fixes