Getting Started
From nothing to a page built on your own system, with the same components in Figma and in code. Do the first five steps once per project; the last two whenever you need them.
Create your system
No account needed: your systems are kept in this browser.
- Open the builder and choose Create design system.
- Answer the questions: brand color, grays, corners, density, typeface, lines and shadows. The preview on the right shows real screens, light and dark. Customize under any answer opens the full editor for it.
- Choose Download design system, then Download system package.
- In the same window, choose Save to my systems. Until you do, the system lives only in this tab. Download
system.jsontoo if you will work from another browser.
Add the package to your project
Unzip veritheme-system.zip into the project root. The MCP server looks for the manifest there.
| File | What it is for |
|---|---|
veritheme.system.json |
The manifest: name, revision, which files are which. The MCP server starts here. |
tokens.json |
Your tokens in DTCG. The Figma plugin and the MCP server read it. |
theme.css |
Your tokens as CSS, loaded after the library. |
veritheme.min.css, veritheme.min.js |
The library the system was built on, so nothing depends on a CDN. |
veritheme-base.min.css |
The page reset: no browser margin around the page, your typeface on the body. |
system.json |
The builder’s source file, to open the system again. |
AI.md |
What to tell your AI: how to connect the server and what to call first. |
README.md, index.html |
A short note and a demo page. |
Generate the library in Figma
The plugin turns tokens.json into variables, text styles and every component, all linked.
- Install the plugin from Figma Community and run it in a new file.
- Drop
tokens.jsonon it and choose Apply theme. This creates the variable collections and text styles. - Choose Generate Selected. The components your system uses are ticked already. They land on the Foundations, Components and Blocks pages.
- Publish the file as a library, so every screen file draws from it.
Load it in code
The page reset, the library, then your theme. Dark mode is the .dark class on the html element.
<link rel="stylesheet" href="veritheme-base.min.css">
<link rel="stylesheet" href="veritheme.min.css">
<link rel="stylesheet" href="theme.css">
<script src="veritheme.min.js" defer></script>npm and a CDN work too: see Installation, which also shows the dark-mode script.
Connect your AI
Two MCP servers: Veritheme for components, tokens and checks, and Figma's own to read your frames.
claude mcp add veritheme -- npx -y @veritheme/mcp-server
Run it in the project root and start a new session. Then ask the AI to call get_project_system: it should name your system and its revision. Connect Figma's MCP server next to it the way Figma describes. Other clients, and a hook that checks every file the AI writes, are on the MCP Server page.
Build a screen
From a Figma frame when you have one, from a spec when you do not.
From a Figma frame
Draw the screen with instances of the library and auto layout, with every value bound to a variable. Then run the figma-to-page prompt with a link to the frame, or ask:
Build this frame with Veritheme: https://www.figma.com/design/…?node-id=12-345Each instance becomes its component and variant. A detached layer or a raw value has nothing behind it in code, so it is listed for you rather than guessed.
Without a mockup
Ask for the spec first and approve it before any markup. It is the cheapest moment to fix a misplaced control.
Build a pricing page. Before any markup, send me its spec: the regions,
every control and what it changes, and the data it shows. Wait for my OK.
A block that appears twice, like a pricing card, is saved once with register_project_component into veritheme.project.json. Commit that file: later pages and sessions reuse the block as it is.
Keep it in sync
The builder is the source. A change goes out from it to Figma and to code.
- Open the system from your list in the builder, change it and download the package again.
- In Figma, drop the new
tokens.jsonon the plugin and choose Apply theme: the variables update in place, and so do your screens. If components changed, generate them again; existing instances stay linked. - In code, replace
theme.css,tokens.jsonandveritheme.system.json. Your AI sees the new revision on its next call.