AI Integration Tokens

Give AI your token rules, and it builds with design tokens instead of hardcoded values. Dark mode, spacing, colors — all automatic.
For component usage with AI, see the Component AI Integration.

llms.txt standard

All AI tools

Zero hardcoding

https://7onic.design/llms.txt

Supported AI Tools

llms.txt is an open standard. Any AI tool that can read text files can use it.

Claude Code

Add to CLAUDE.md or pass via prompt

Cursor

Add to .cursor/rules

GitHub Copilot

Add to copilot-instructions.md

ChatGPT

Paste URL in conversation

How to Use

Choose the method that fits your AI tool and workflow.

Reference Path

Point your AI tool to the file path — simplest setup

CLAUDE.md / .cursor/rules

Rules: node_modules/@7onic-ui/tokens/llms.txt

Copy & Integrate

Copy llms.txt content into your project's AI rules file.

Your rules file

# 7onic Design Tokens
(paste llms.txt content here)

Direct Prompt

Tell the AI to read llms.txt directly in your prompt.

Prompt

Read node_modules/@7onic-ui/tokens/llms.txt and style this page with 7onic tokens

URL Reference

Use the domain URL for web-based AI tools.

Prompt / Rules

Read https://7onic.design/llms.txt and follow the token rules

What AI Does Automatically

Once AI reads llms.txt, it follows these rules without you having to repeat them.

Token Classes Only

Uses bg-primary instead of bg-blue-500, text-sm instead of text-[13px], rounded-md instead of rounded-[7px].

Dark Mode for Free

Token-based colors automatically adapt to light/dark themes, so no dark: prefixes are needed.

Consistent Spacing

Uses spacing tokens (p-4, gap-2) instead of arbitrary pixel values (p-[17px]).

Self-Check Before Output

AI verifies every line against the token whitelist before showing you the code.

Before / After

The same UI, built with and without token rules

Without llms.txt

<div className="bg-blue-500 text-white p-[20px]
  rounded-[8px] shadow-lg">
  <h2 className="text-[18px] font-medium">
    Dashboard
  </h2>
  <p className="text-gray-300 text-[14px]">
    Welcome back
  </p>
</div>

With llms.txt

<div className="bg-background-muted text-foreground p-5
  rounded-lg shadow-md">
  <h2 className="text-lg font-semibold">
    Dashboard
  </h2>
  <p className="text-text-muted text-sm">
    Welcome back
  </p>
</div>

Token-based code automatically adapts to dark mode, custom themes, and brand changes — no manual updates needed.

Example Prompts

Copy these prompts to get started quickly.

Read llms.txt and style a landing page with 7onic tokens

Build a pricing card using 7onic design tokens

Create a dashboard layout — use only 7onic token classes

Troubleshooting

Common issues and how to fix them

AI uses hardcoded colors like bg-blue-500

Tell the AI: "Re-read llms.txt. Replace all hardcoded colors with token classes."

AI adds dark: prefix classes

Remind it: "Token colors auto-adapt to dark mode. Remove all dark: prefixes."

AI uses arbitrary values like p-[17px]

Say: "Use only spacing tokens from llms.txt. p-4 not p-[17px]."

Disclaimer

AI is not perfect. Always review AI-generated code before deployment. Verify design requirements, accessibility, and token usage are correct.