Generate a design system from one prompt

One specific prompt and two setup questions get you real tokens in your CSS in about ten minutes.

The sentence is the design brief

Type a sentence on the homepage, press Build, and about a minute later you have colour ramps for both themes, a type scale, spacing, radii, shadows, motion and a set of components, all wired to each other. Whether you keep any of it depends on the sentence.

Flash reads your prompt the way a designer reads a brief. It wants to know who the product is for and what they do in it all day. A vague brief gets a safe, forgettable answer from people and models alike. A specific one gets you a system with an opinion.

This is the start-here post. It walks the whole path once: the prompt, the optional reference URL, the two setup questions, what happens during the build, your first five minutes in the editor, and getting CSS into a project. Budget ten minutes.

Write the prompt

The input says "Describe your product and style, or paste yourdomain.com to build from your site...". If you have a site, paste it and Flash builds from what it finds there. If you don't, describe who the product is for, what they do in it and how it should feel. Nouns beat adjectives. "Receptionists at dental clinics" tells Flash more than "clean and modern" ever will, because it implies long sessions, dense screens and a need to be calm.

Stuck on a blank box? The Try one of these chips under the input are decent starting points, and you can edit them before you build.

[!TIP] AI use is metered per day, and the homepage shows how many generations you have left. One considered prompt costs less than five rerolls of a lazy one.

Add a reference URL, or don't

Under the prompt there's a field that says "Paste reference URL (e.g. nike.com)". Give it a site and Flash scans that site's stylesheets and builds around what it finds: its colours, fonts, radii and spacing. Brand colours it finds are kept exactly, not re-imagined from the hue.

Use it when you already have a brand and want the system to match it. Leave it empty when you want a fresh direction, because a reference pulls hard toward the site you gave it. If you want to import a whole site with more control over what comes in, see importing from your live website.

Quick setup before we generate

Press Build and a short chat opens, titled "Quick setup before we generate". It asks what you build with, then how you style it. The second question only lists what exists for your first answer: pick Vue and Material UI shows up as Vuetify, pick Angular and it is Angular Material.

The framework sets what your component code and code package target. The styling choice sets the names: once you pick a library, component names and tokens follow that library's official docs, so the theme you export looks like one its own documentation would recognise.

Not sure? Just build it for me skips the questions, and the line under it says which stack you will get: Next.js with Tailwind CSS unless you have answered something already. Whatever you pick, [[Export > Copy code]] can still give you CSS, SCSS, Tailwind or JSON later.

What happens during the build

The build runs in six phases. You'll see each title with a short line underneath, and the whole thing usually takes under a minute.

The colour phase is worth understanding. The AI chooses hues. The ramps from 0 to 1000 and the semantic tokens that point at them are computed, and text and fill pairs are checked against WCAG AA: 4.5:1 for body text, 3:1 for large text and UI fills. That's why a generated palette rarely hands you grey text you can't read.

Your first five minutes

The build drops you in the editor at Foundations. Before you ask for anything bigger, do one quick pass:

1. Colors. Is primary the colour you meant? Then switch to dark values and look again. Dark is a second theme with its own values, not an inverted copy.
2. Typography. Check the fonts in use. If one is wrong, open the font picker and type any Google font by name.
3. Spacing. Glance at the scale. If your product is dense, a tighter scale now saves you retuning every component later.
4. Components. Open a button and an input. This is where the tokens meet reality, with hover, pressed, focus and disabled states you can edit one by one.
5. Save. The header has Save next to Export.

For broader changes, press {{⌘K}} (or {{Ctrl+K}}) to open Ask Flash and say what you want, like "Make the primary colors warmer". Every change comes back as a patch you Apply or Discard. Editing foundations covers the manual side in depth.

Get CSS into your project

Open [[Export > Copy code]]. Pick CSS from CSS · SCSS · Tailwind · JSON, choose how colours are written (HEX, RGBA, HSL or OKLCH), and copy. Also derive can add a high-contrast set, which moves each foreground to a step of its own ramp that reaches 7:1, or a density variant. Copy code is on Free. Free CSS and Tailwind exports carry a small Flash attribution comment.

What you paste looks like this, trimmed. Primitives are declared once, semantic tokens point at them, and the second theme only re-points what differs:

:root {
  --neutral-0: #ffffff;
  --neutral-50: #f6f7f7;
  --neutral-900: #1b1f20;
  --neutral-1000: #0c0e0f;
  --primary-400: #2a9aa4;
  --primary-500: #0e7c86;

  --background: var(--neutral-1000);
  --surface: var(--neutral-900);
  --foreground: var(--neutral-50);
  --primary: var(--primary-400);
}

[data-theme="light"] {
  --background: var(--neutral-50);
  --surface: var(--neutral-0);
  --foreground: var(--neutral-900);
  --primary: var(--primary-500);
}

Drop it into your global stylesheet and use the semantic names, never the steps:

body {
  background: var(--background);
  color: var(--foreground);
}

.card {
  background: var(--surface);
}

Set data-theme="light" on <html> to switch themes. The export also includes a prefers-color-scheme: light block, so a visitor whose OS is set to light gets the light theme without you writing any JavaScript.

Next, get your tokens into code the other ways: Tailwind, JSON, a runnable code package and a GitHub pull request.