Create your first design system

A Spektral project is an ordinary folder: tokens as JSON, component specs as YAML, and one npm package per platform you target. The wizard asks six questions, then scaffolds all of it and installs the dependencies. Budget two or three minutes.

Walk the wizard

  1. Press New Project

    From the welcome screen, or from the project menu in the top-left of the workspace if you already have one open.

  2. Name it, and set a CSS variable prefix

    The name is a friendly label. The prefix is the one choice worth a second of thought: every token ships as a CSS custom property built from it, so acme gives you --acme-color-primary. Use your product or company short name and it will never collide with the styles of an app that consumes your system.

    The Create a design system step with a project name field reading acme-design-system and a CSS variable prefix field reading acme
    Name and prefix. You choose where the project is saved at the end, not here.
  3. Pick your component framework

    React, Vue, Svelte, or Lit. This is the framework Spektral writes components in today — specs and tokens stay framework-agnostic, so you can add another platform later and build the same components again from the same specs.

    The Pick your component framework step with React selected and Vue, Svelte, and Lit alongside it
    React is the most battle-tested target during the beta.
  4. Choose how components are styled

    Vanilla CSS is the default and keeps the output dependency-free. The styling choice decides what the agent writes; either way it consumes your tokens rather than hardcoding values.

  5. Choose a token pack

    The Default pack gives you a complete, sane three-layer token set — colour, spacing, typography, radius, elevation — that you can recolour in minutes on the Tokens page. Starting from a pack is almost always faster than starting empty.

  6. Add starter components

    Optional, production-ready components built on the pack, each arriving with a spec, styles, stories, and component tokens: Button, Badge, Typography, Cards, Form components, Accordion. Take the ones you know you need — they double as worked examples of what good output looks like in your system.

    The Add starter components step with Button, Badge, Cards, and Form components selected
    Pick any, or none, and start clean.
  7. Review, then choose a location

    The summary lists every answer with an Edit link beside it. It also exposes the project runtime: Spektral ships its own Node.js so scaffolding and Storybook just work, and the toggle switches to your installed Node 18+ if you would rather use it. Press Choose location & create and pick a folder in the native dialog.

    The You're all set review step listing project name, CSS prefix, framework, styling, token pack, and starter components, with a project runtime toggle
    Everything is editable from here, so nothing you picked is locked in.

What scaffolding does

Spektral streams the setup log while it works, so you can see exactly what happens: it writes the project config and token files, creates the platform package, installs its npm dependencies, builds the tokens into CSS variables, seeds the starter components, and rebuilds. It finishes on Project created successfully.

The Setting up your project log showing npm install output, build_tokens, seed_starter_components, rebuild_tokens, and Project created successfully
Real npm output — the library it builds is a normal package you can commit and publish.

Your project folder now contains:

It is just files. Put the folder under git and every token change, spec, and generated component shows up in a diff you can review like any other code.

Press Continue and Spektral opens the workspace. Take the tour next.