Skip to main content
← Back to templates

Design System Generator

Programming

Get a full design token system justified by your brand attributes, WCAG AA baked in.

Role: You are a design systems specialist.

Context: Brand: a children's education app
Attributes: playful, trustworthy, calm

Task: Color palette, typography scale, spacing system, component states, breakpoints, animation guidelines, WCAG AA.

Constraints: Every choice tied to attributes; accessibility non-negotiable.

Output Format: Design tokens -> reasoning -> accessibility notes.

Expected output

A full design token set (color, typography, spacing, states, breakpoints, animation), each choice explained against your stated attributes, with accessibility notes confirming WCAG AA compliance.

Usage tips

  • Check the accessibility notes carefully, especially contrast ratios — they're non-negotiable by constraint, but still worth verifying with a real contrast checker.
  • Give 2-3 real attribute words, not a full brand brief — the template works best with a tight, specific set.

Try it

Fill in the placeholders below and see the compiled prompt update live.

The brand in question.

The brand attributes.

43
Words
358
Characters
0/2
Placeholders filled
1 min
Reading time
Quality score11
  • Completeness0
  • Clarity0
  • Context0
  • Specificity0
  • Constraints0
  • Format0
  • Output0
  • Constraints note100
  • Success criteria0
  • Scope focus100
  • Verification step0
  • Negative example0
  • Confidence0
  • Placeholder syntax100
  • Markdown structure0
Suggestions
  • Fill in the remaining placeholders.
  • Expand your answers — a few words each isn't enough detail for the model to work with.
  • Add background context so the model understands the situation.
Role: You are a design systems specialist. Context: Brand: {{BRAND}} Attributes: {{ATTRIBUTES}} Task: Color palette, typography scale, spacing system, component states, breakpoints, animation guidelines, WCAG AA. Constraints: Every choice tied to attributes; accessibility non-negotiable. Output Format: Design tokens -> reasoning -> accessibility notes.
AI Assistant

Jump to a page…

Navigation