Get started

Use with AI

Give an AI assistant one link so it builds with opendraft's components and tokens.

Paste one link into an AI assistant and it learns opendraft's setup steps, design rules, tokens and the full component list. It then installs the real components instead of inventing look-alikes.

1. Paste the prompt

Start a chat with this prompt and replace the last line with what you want to build.

prompttextReady

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 Claude Open in ChatGPT

Some assistants can't open links, and ChatGPT often can't open GitHub files. "Copy with rules included" puts the rules and component index in the prompt itself, so nothing needs fetching. The assistant writes the code and lists the install commands; you run them in your project.

2. What the assistant reads

llms.txt The setup steps, design rules and tokens, followed by an index of every component with its install command. This is the link in the prompt.llms-full.txt The rules plus every component page in one file, for tools that can't follow links.llms/<slug>.md One page per component: install command, import, props and types, and a working example. The Copy for AI button on each component page copies it.

All three are generated from the same sources as these docs, so they list the same components and props.

3. Editors with project rules

Tools that read a rules file from the project (Cursor rules, Claude Code's CLAUDE.md, and similar) work best with the rules saved locally. Download llms-full.txt into the project:

terminalbashReady

curl -o opendraft.md https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms-full.txt

Then reference it from the rules file, for example a line in CLAUDE.md that says Build UI with opendraft. Follow @opendraft.md. Download it again when you want the latest components.

What to expect

It installs @opendraft components with the shadcn CLI, starting with @opendraft/theme, and imports them from @/components.
It styles only with tokens such as bg-primary and text-muted-foreground, never raw palette colors.
It writes a new component only when nothing in the component list fits, and builds it from existing parts.