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."

Machine twins: /help/website-design-system.json · /help/website-design-system.md · /help.json · /llms.txt

Reviewed 2026-10-15. In Slack, ask Nexus how do I … and it answers from this guide, with where your company stands.