{
  "@type": "help_guide",
  "id": "website-design-system",
  "title": "Website design system, Figma Make prompts and Webflow class plans",
  "kind": "feature",
  "summary": "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.",
  "aliases": [
    "design system",
    "lumos",
    "relume",
    "design tokens",
    "brand tokens",
    "css variables",
    "tailwind theme",
    "webflow variables",
    "tokens studio",
    "figma make",
    "figma make prompt",
    "figma components",
    "class plan"
  ],
  "engine": "site_build",
  "agents": [],
  "related": [
    {
      "id": "site-build-engine",
      "page": "https://nexus.effiqs.com/help/site-build-engine"
    },
    {
      "id": "website-planning",
      "page": "https://nexus.effiqs.com/help/website-planning"
    },
    {
      "id": "brand-identity",
      "page": "https://nexus.effiqs.com/help/brand-identity"
    },
    {
      "id": "website-launch-qa",
      "page": "https://nexus.effiqs.com/help/website-launch-qa"
    }
  ],
  "reviewed": "2026-10-15",
  "sections": [
    {
      "heading": "What it does",
      "key": "what-it-does",
      "markdown": "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."
    },
    {
      "heading": "Set it up",
      "key": "set-it-up",
      "markdown": "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.\n2. **\"Compile the design system.\"** builds the full bundle from the brand identity and the approved wireframe.\n\nSwitching systems after the bundle is compiled means re-compiling. Nexus tells you what has to be redone and asks before switching."
    },
    {
      "heading": "Use it",
      "key": "use-it",
      "markdown": "- **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.\n- **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.\n- **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.\n- **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.\n- **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.\n\n✋ 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."
    },
    {
      "heading": "Troubleshooting",
      "key": "troubleshooting",
      "markdown": "- **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.\n- **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.\n- **Tokens fail: no brand identity.** Build the brand identity first (brand identity guide)."
    },
    {
      "heading": "Prompts",
      "key": "prompts",
      "markdown": "- \"Use Lumos for the client's website.\"\n- \"Use Relume for the client's website.\"\n- \"Compile the design system.\"\n- \"Compile the brand tokens.\"\n- \"Give me the CSS variables and Tailwind theme.\"\n- \"Give me the Figma Make prompt for the homepage.\"\n- \"Create a Figma Make prompt for a pricing comparison graphic.\"\n- \"Give me the Figma component plan.\"\n- \"Give me the Lumos class plan.\"\n- \"Give me the Relume class plan.\""
    }
  ],
  "prompts": [
    {
      "text": "Use Lumos for the client's website.",
      "tool": "pick_design_system"
    },
    {
      "text": "Use Relume for the client's website.",
      "tool": "pick_design_system"
    },
    {
      "text": "Compile the design system.",
      "tool": "compile_design_system"
    },
    {
      "text": "Compile the brand tokens.",
      "tool": "compile_brand_system_tokens"
    },
    {
      "text": "Give me the CSS variables and Tailwind theme.",
      "tool": "compile_token_outputs"
    },
    {
      "text": "Give me the Figma Make prompt for the homepage.",
      "tool": "generate_figma_make_prompt"
    },
    {
      "text": "Create a Figma Make prompt for a pricing comparison graphic.",
      "tool": "generate_figma_make_prompt_freeform"
    },
    {
      "text": "Give me the Figma component plan.",
      "tool": "compile_figma_component_plan"
    },
    {
      "text": "Give me the Lumos class plan.",
      "tool": "compile_lumos_class_plan"
    },
    {
      "text": "Give me the Relume class plan.",
      "tool": "compile_relume_class_plan"
    }
  ],
  "page": "https://nexus.effiqs.com/help/website-design-system",
  "markdown": "https://nexus.effiqs.com/help/website-design-system.md"
}