opendraft
New: give Claude the whole system with one link

ReactTailwind CSS v4shadcn registry

A design system your AI builds with

Paste one link into Claude. It learns opendraft's components, tokens and design rules, then builds your screens from them instead of inventing its own.

Browse components
→raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms.txt

  • 143 components

    From buttons to data tables, installed as source.

  • 39 AI patterns

    Chat, tool calls, approvals and thinking traces.

  • One theme file

    Light and dark mode from the same tokens.

  • Docs AI can read

    An llms.txt index and a plain page per component.

See it build

You describe the screen. Claude assembles it from opendraft.

Every example starts with the same opendraft link and a plain request. Pick one to see what Claude installs, the code it writes and the result.

app/sign-in/page.tsx

You

A sign-in page with email and password, a “remember me” option, GitHub sign-in and a link to create an account.

  1. Read raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms.txt
  2. npx shadcn add @opendraft/card @opendraft/input @opendraft/label @opendraft/checkbox @opendraft/button @opendraft/separator
  3. Wrote app/sign-in/page.tsx
page.tsxtsxReady
1import { Button } from "@/components/ui/button"2import { Card, CardContent, CardDescription,3  CardFooter, CardHeader, CardTitle } from "@/components/ui/card"4import { Checkbox } from "@/components/ui/checkbox"5import { Input } from "@/components/ui/input"6import { Label } from "@/components/ui/label"7import { Separator } from "@/components/ui/separator"89export default function SignInPage() {10  return (11    <Card className="w-full max-w-sm">12      <CardHeader>13        <CardTitle className="heading text-2xl">14          Welcome back15        </CardTitle>16        <CardDescription>Sign in to your workspace.</CardDescription>17      </CardHeader>18      <CardContent className="grid gap-4">19        <div className="grid gap-2">20          <Label htmlFor="email">Email</Label>21          <Input id="email" type="email" placeholder="you@company.com" />22        </div>23        <div className="grid gap-2">24          <Label htmlFor="password">Password</Label>25          <Input id="password" type="password" />26        </div>27        <Label className="font-normal text-muted-foreground">28          <Checkbox defaultChecked /> Remember me for 30 days29        </Label>30        <Button className="w-full">Sign in</Button>31        <Separator />32        <Button variant="outline" className="w-full">33          Continue with GitHub34        </Button>35      </CardContent>36      <CardFooter className="justify-center text-sm text-muted-foreground">37        No account? <a className="ml-1 text-brand">Create one</a>38      </CardFooter>39    </Card>40  )41}
Welcome back
Sign in to your workspace.
No account? Create one
How it works

One link turns Claude into an opendraft developer

Without it, an assistant guesses at your UI and every screen comes out a little different. With it, Claude works from the same parts and rules you do.

01

Share the link

Paste the opendraft prompt into Claude, or add the link to your project's rules file once.

raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms.txt
02

Claude reads the system

It learns how to set up a project, the design rules, every token, and what each component is for.

rules · tokens · 143 components
03

Real components land in your repo

Claude installs them with the shadcn CLI and builds from them. The code is yours to read and change.

npx shadcn add @opendraft/card
What's inside

Everything a product screen needs

The usual app components, plus the AI and data pieces most kits leave out. All of it shares one set of tokens.

71 core components

Buttons, inputs, dialogs, menus, tables and date pickers, built on Radix.

39 AI agent patterns

Streaming answers, tool calls, approvals and reasoning traces for chat products.

Data and workflows

Records tables, diffs, flowcharts and insight charts for internal tools.

One theme file

Every color, radius and shadow is a token. Change one and every screen follows.

Light and dark

Each token has a dark value. Any section can go dark with one class.

Shared motion

One set of springs and easings, so every component moves the same way.

Accessible

Keyboard and screen-reader support comes from Radix primitives.

Ready-made screens

Blocks for a CRM board, analytics, settings, sign-in and an agent chat. Install one and pass your data.

Source you own

No package to update or work around. The files live in your repo.

Make it yours

Your fonts, your colors, your corners

opendraft's look is a starting point, not a rule. Pick a heading font, a body font, a primary color and how round things should be. Copy the prompt and Claude applies it to every component, or copy the CSS and paste it in yourself.

Your theme

100% · body 14px
Primary color
2px
3px

Invite your team

Teammates get an email with a link to join this workspace.

Send invites
Add people by email.
AdAda ObiOwner
SaSam ReyesEditor
Use the opendraft design system for this. Read https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms.txt first and follow its rules: install components from the @opendraft registry and style only with its tokens. If you can't run shell commands, fetch each component's file from https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/r/<name>.json (each file's content is inside) and create them in the project yourself.

Build: [describe what you want to build]
Open in ClaudeOpen in ChatGPT

Change a setting above and the prompt picks it up. With the defaults, the assistant uses opendraft's own look.

Components

Start from a working piece

Each component has a live preview, the code behind it and a one-line install. These are a good place to start.

Browse all 143 components
Prompt BarAI Agents
Thinking TraceAI Agents
+13
Tool ChipsAI Agents
Question CardAI Agents
Records TableData & Workflows
⌘K
Command PaletteComponents
Date Range PickerComponents
+1.15%
Insight CardsData & Workflows
FAQ

Questions, answered

Something missing? Open an issue on GitHub and it'll be added here.

Using it with AI

Copy the prompt from this page and paste it into Claude along with what you want to build. The prompt points Claude at llms.txt, which explains the setup, the design rules and every component.

Yes, though only Claude is tested so far. Any assistant that can open a link can read llms.txt, and the prompt on this page has "Open in ChatGPT" too. Lovable and other React, Tailwind and shadcn builders fit the stack. Chat tools that can't run commands read the files from the registry and write them for you. For editors like Cursor or Claude Code, save llms-full.txt into the project and point your rules file at it.

Yes. opendraft's look is a default. Tell Claude what you want, like Inter for headings, IBM Plex Sans for body text, a black primary and 12px buttons, and it changes the brand tokens so every component follows. The theme builder on this page writes that prompt for you.

Only when nothing in opendraft fits. The rules tell it to install existing components first, and to build anything new from opendraft parts and tokens.

Code

React 19, Tailwind CSS v4 and a shadcn components.json. Next.js works well but isn't required.

No. Components install through the shadcn CLI as source files in your project, so you can read and change all of it.

Yes. opendraft keeps shadcn's token names, so your current components pick up the theme and opendraft components sit alongside them.

Cost and credits

Yes. opendraft's own code is MIT-licensed. Once a component is installed, the code is in your project and yours to change.

Most are original. Some are adapted from beUI (MIT) and Beautiful UI and restyled to opendraft's tokens. The credits are in THIRD_PARTY_NOTICES.md on GitHub.

Build your next screen with opendraft

Copy the prompt, tell Claude what you need, and start from real components.

Install by hand
Follow along on GitHubReport a bug, ask for a component or read the source.