The short answer: most SaaS boilerplates are code only. A handful include a Figma file, fewer keep that file in sync with the code, and only a few make dark mode a proper token mode in both. If you need everything to be open source, you can assemble it yourself from open libraries; if you want it assembled and kept in sync, expect a paid kit. Here is how to tell a good one from a pretty landing page.
Why the Figma file matters
A starter kit saves you the first two weeks of wiring auth, payments and a database. A design system saves you the next two years of small inconsistencies. When the Figma file and the code are the same system, a designer can change the primary color or a radius once and the product follows. When they are separate, every handoff is a translation, and the translation is where products start to look generic.
This matters even more if you build with AI tools. Cursor and Claude Code will happily generate a screen that works, but they only stay on brand when the tokens and components they can use are written down.
A checklist before you buy
- The Figma file is a working library, not screenshots. Open it and look for variables and components. Flat frames of finished screens look good in a sales page but you cannot change a color in one place. You want variables for color, radius and spacing, and components with variants for every state.
- Figma variables and code tokens share names. If Figma calls a color “Accent / 500” and the code calls it --brand-violet, someone has to translate on every change. Matching names (primary, border, muted-foreground) are the difference between a design system and two files that drift apart.
- Dark mode is a token mode, not a second set of components. Toggle the theme in the demo. In a well-built kit nothing moves: the same components re-render from a second set of token values, and the Figma file has Light and Dark modes on the same variables. If dark mode needs its own components or class overrides everywhere, every new screen doubles the work.
- Components cover states, not just the happy path. Check focus rings, disabled, error, loading and empty states for buttons, inputs, selects and tables, in both Figma and code. Missing states are where a product starts to look unfinished.
- Real screens, not a component dump. A grid of buttons proves very little. Look for wired screens (dashboard, settings, billing, auth) that compose the components the way your product will, with routing and demo data.
- It is ready for AI coding tools. If you build with Cursor or Claude Code, the kit should ship rules files that tell the model to use its tokens and components. Without them, the first generated screen will ignore the design system.
- License, updates and support are clear. Read what you can ship (client work? multiple projects?), whether updates are included, and how refunds work before you pay.
What about open source?
You can build a capable stack from open-source parts. shadcn/ui (MIT) gives you accessible React components you copy into your project, built on Radix primitives and Tailwind CSS, and it supports dark mode through CSS variables. Next.js, Prisma and Auth.js are open source too.
What the open-source route usually leaves to you is the part this article is about: a Figma library whose variables match your tokens, finished product screens, and rules that keep AI tools inside the system. Community Figma files for these libraries exist, but they are maintained separately from the code, so check how closely they match before you rely on them.
Where GliaKit fits
GliaKit is one answer to exactly this question, so here is how it maps to the checklist, honestly:
- The Figma design system is free. The GliaKit UI file on Figma Community includes the full token set as variables, core components and light and dark foundations.
- The code is a paid kit, not open source. It is a Next.js and shadcn/ui-style boilerplate with 15 wired screens, Clerk, Stripe, Prisma and Resend connected, for a one-time €199.
- Figma and code share token names, and every component reads from the same semantic tokens in light and dark.
- It ships rules files for Cursor and Claude Codeplus a prompt library, so generated screens use the kit’s components.
You can judge all of it before paying: open the live demo and toggle dark mode, read every component on the components page, or start with the free Figma UI kit.
Takeaway
Do not buy a SaaS starter for its landing page. Open the Figma file and look for variables, toggle dark mode in the demo, and check that the token names match the code. If those three hold, the rest of the kit is usually built with the same care.