Design Token Prompt for AI-Generated Websites

Avoid generic AI website designs by using concrete design tokens instead of vague adjectives. This prompt forces the model to build to your exact spec, preventing bland defaults.

🤖 Works with: Any

The Prompt

Copy and paste — replace anything in [brackets].

AESTHETIC: [one line, the intended feeling] COLOURS (exact hex, as CSS variables): - Background, surface, primary text, secondary text, one accent, border. No pure white, no pure black. FONTS (named, from Google Fonts): - Headings: [not Inter/Roboto] - Body: [not Inter/Roboto] - Mono for data/labels if the UI needs it SPACING: 4px base, defined scale (8/16/24/40/64). COMPONENTS: explicit rules for cards (radius, border vs shadow), buttons (fill, radius), hero layout (asymmetric, not centered). AVOID: Inter, Roboto, purple, gradients, pure white, three-column card default.

What it’s good for

Generate unique, non-generic website designs by specifying exact design tokens instead of relying on vague prompts that lead to bland defaults.

How to use it

1. Fill in the placeholders with your specific design choices (e.g., hex colors, font names, spacing scale).
2. Paste the completed prompt into your AI tool (e.g., ChatGPT, Claude) when requesting a website design.
3. Review the output and iterate if needed by adjusting tokens for finer control.

Curated from the community via Reddit.