# Website design system, Figma Make prompts and Webflow class plans

## What it does

Turns the brand identity and the approved wireframe into everything a designer and a Webflow builder start from: design tokens, CSS / Tailwind / Webflow variables, copy-paste Figma Make prompts for each page, a plan for turning the Figma design into components, and a section-by-section Webflow class plan. Nexus writes the specs; a person does the design in Figma and the build in the Webflow Designer.

## Set it up

1. ✋ Choose the design system the build uses: **"Use Lumos for the client's website."** or **"Use Relume for the client's website."** Lumos is the default when nothing is chosen. Every later step (tokens, prompts, class plan, component plan) follows this choice.
2. **"Compile the design system."** builds the full bundle from the brand identity and the approved wireframe.

Switching systems after the bundle is compiled means re-compiling. Nexus tells you what has to be redone and asks before switching.

## Use it

- **Tokens:** **"Compile the brand tokens."** writes the token file (W3C DTCG format) from the brand colours and type. **"Give me the CSS variables and Tailwind theme."** compiles the forms you use: CSS variables, a Tailwind theme, a Webflow variables sheet (to reset the cloneable's variables to this brand) and Tokens Studio files for importing into Figma. The reply links the brand system page, with a download for each format.
- **Figma Make:** **"Give me the Figma Make prompt for the homepage."** writes a prompt you paste into Figma Make, with the brand, the design system's rules and the page's wireframe built in. Leave the page out to get one for every approved page.
- **No wireframe, or not a web page?** **"Create a Figma Make prompt for a pricing comparison graphic."** works from a short brief and the brand: a single page from its content structure, a social ad, a banner, an email header, a one-pager.
- **Components:** after the Figma design is approved, **"Give me the Figma component plan."** lists which sections and elements to make into components, their names (matched to the Webflow classes) and their variants.
- **Webflow build:** **"Give me the Lumos class plan."** or **"Give me the Relume class plan."** gives the recipe for each section of each page: which component and classes to use and how they nest.

✋ The designer imports the tokens with Tokens Studio, runs the Make prompts, and builds components and pages by hand. Nexus can't edit Figma files or the Webflow Designer for you.

## Troubleshooting

- **The class plan tool refuses and names the other system.** The client is set to the other design system. Ask for that system's plan, or switch systems.
- **Nexus asks you to approve the wireframe first.** The multi-page Figma Make prompt and the class and component plans read the approved wireframe. Approve it, or use the freeform Figma Make prompt.
- **Tokens fail: no brand identity.** Build the brand identity first (brand identity guide).

## Prompts

- "Use Lumos for the client's website."
- "Use Relume for the client's website."
- "Compile the design system."
- "Compile the brand tokens."
- "Give me the CSS variables and Tailwind theme."
- "Give me the Figma Make prompt for the homepage."
- "Create a Figma Make prompt for a pricing comparison graphic."
- "Give me the Figma component plan."
- "Give me the Lumos class plan."
- "Give me the Relume class plan."