GliaKit

One design system that lives in two places: a free Figma UI kit and a wired Next.js + shadcn boilerplate. Fifteen production screens in light and dark, tokens that map 1:1 to Tailwind, and AI rules that let Cursor and Claude Code build on-brand from the first prompt.

Client

UIForge · Self-initiated

Year

2026

My Role

Designer · Product Lead

Platform

Figma · Next.js

Tags

Design System · Next.js Boilerplate · AI-native

The Product

One system across Figma, code, and AI

GliaKit is a commercial design system for people shipping SaaS products with AI coding tools. It is deliberately two products in one: a free Figma library that gets discovered and duplicated, and a paid Next.js + shadcn boilerplate that turns the same system into a running app — auth, payments, database, and email wired on day one. The bet is that the value isn't the components, it's the parity between design, code, and the AI tools building on top of both.

Ships as a free Figma UI kit plus a paid, fully-wired Next.js boilerplate — fifteen SaaS screens in light and dark, from dashboard and billing to auth and AI chat.
Free figma design system
Free figma design dark and light mode
Foundations

One token layer, light and dark

Every color, space, and radius is a Figma variable, not a hard-coded value. A semantic layer sits on top of raw primitives, so light and dark themes come from a single source of truth. Type, spacing, and effect styles are defined once and reused everywhere — the same discipline a production design system needs to stay consistent as it grows.

Tokens ship with code-ready names (e.g. bg-primary, var(--background)), so a variable reads the same in Figma and in the codebase.
Components & Screens

Composed, never redrawn

Every screen is assembled from the same base primitives — buttons, inputs, surfaces, tables — rather than drawn from scratch. That keeps fifteen production screens consistent, from dashboard, billing, and settings to auth flows and the AI-app patterns most kits skip: chat, streaming, agent steps, and tool calls. Change one token or variant and it ripples cleanly across every screen.

Fifteen wired screens in light and dark, all inheriting from the same primitives — so the system stays coherent and easy to extend as new patterns emerge.
15 Free next.js screens
figma tokens and code
Design ↔ Code ↔ AI

Maps 1:1 to the code — and the AI tools

GliaKit is named and structured to mirror how the code is actually built: tokens map to Tailwind, component names follow shadcn conventions, and the kit ships with rules files for Cursor and Claude Code plus a prompt library. The payoff is concrete — an AI coding tool references the existing system instead of regenerating it, so new screens come out on-brand and burn fewer AI-coding credits.

Figma tokens, Tailwind classes, shadcn components, and AI rules all speak the same language — turning the kit into a shared source of truth for design, developers, and AI tooling.

Need a production-ready design system or UI kit?

Book a free 20–30 minute call to discuss your design system, component library, or product UI.

Next case study

The Kids Tales
All projects