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 (Tokens)

All AI tools

Zero hardcoding

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

llms.txt is already included when you install the package. Copy this URL to quickly re-instruct your AI when needed.

Supported AI Tools

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

Claude Code

Cursor

GitHub Copilot

ChatGPT

How to Use

Choose the method that fits your AI tool and workflow.

Local — Package Installed

Claude Code, Cursor, Copilot — AI can read local files directly.

Reference Path

Recommended

Point your AI tool to the file path — simplest setup

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

Web — No Local Access

ChatGPT and other web-based AI tools that cannot read local files.

URL Reference

Recommended

Use the domain URL for web-based AI tools.

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

Copy & Integrate

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

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

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.

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.