Make AI coding tools use your design system

AI tools generate generic code. kit is the packaging layer that teaches them to generate on-brand components instead.

Get startedBrowse components

How it works

Three steps to on-brand AI output

1

Install

One command adds components with AI context to your project.

2

Context

AI tools read component rules, props, and design tokens automatically.

3

Generate

Every prompt produces on-brand code. No more generic output.

Same prompt.
Different output.

Without kit

<button className="bg-primary
  text-primary-foreground
  hover:bg-primary/90
  h-10 px-4 py-2 rounded-md
  text-sm font-medium">
  Get Started
</button>

Seven utility classes. Zero brand identity.

With kit

<Button
  variant="primary"
  size="lg">
  Get Started
</Button>

Your component. Your brand. AI knows the difference.

Works with every AI tool

v0CursorClaude CodeLovableWindsurf

47 components. One install each.

Every component ships with AI context — props, usage rules, and design tokens that v0, Cursor, Claude Code, Lovable, and Windsurf understand.

Button

Badge

SuccessErrorInfoWarningOutline

Input

Switch

Progress

Avatar

ON
KT
JD

Start building

Install a single component or scaffold a full project. Get started in 30 seconds.

or: npx @n3wth/kit init

Package yours

Input your Figma tokens or CSS variables. Get a hosted registry, MCP server, and AI context packs for your entire team.

Coming soon