7onicDESIGN SYSTEM

AI Integration Tokens

AI에게 토큰 규칙을 전달하면, 하드코딩 값 대신 디자인 토큰으로 빌드합니다. 다크 모드, 스페이싱, 컬러까지 모두 자동으로 처리됩니다.
컴포넌트와 AI 연동은 Component AI Integration를 참고하세요.

llms.txt 표준
전체 AI 도구 대응
하드코딩 제로
https://7onic.design/llms.txt

Supported AI Tools

llms.txt는 오픈 표준입니다. 텍스트 파일을 읽을 수 있는 모든 AI 도구에서 사용 가능합니다.

Claude Code

CLAUDE.md에 추가하거나 프롬프트로 전달

Cursor

.cursor/rules에 추가

GitHub Copilot

copilot-instructions.md에 추가

ChatGPT

대화에 URL 붙여넣기

How to Use

AI 도구와 워크플로우에 맞는 방법을 선택하세요.

Reference Path

AI 도구에 파일 경로를 지정하는 가장 간단한 방법입니다.

CLAUDE.md / .cursor/rules
Rules: node_modules/@7onic-ui/tokens/llms.txt

Copy & Integrate

llms.txt 내용을 프로젝트의 AI 규칙 파일에 복사합니다.

규칙 파일
# 7onic Design Tokens
(paste llms.txt content here)

Direct Prompt

프롬프트에서 AI에게 직접 llms.txt를 읽게 합니다.

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

URL Reference

웹 기반 AI 도구용 도메인 URL을 사용합니다.

프롬프트 / 규칙
Read https://7onic.design/llms.txt and follow the token rules

What AI Does Automatically

llms.txt를 읽으면, AI가 매번 지시하지 않아도 다음 규칙을 따릅니다.

Token Classes Only

bg-blue-500 대신 bg-primary, text-[13px] 대신 text-sm, rounded-[7px] 대신 rounded-md를 사용합니다.

Dark Mode for Free

토큰 기반 컬러는 라이트/다크 테마에 자동 대응하며, dark: 프리픽스가 필요 없습니다.

Consistent Spacing

p-[17px] 같은 임의 값 대신 스페이싱 토큰(p-4, gap-2)을 사용합니다.

Self-Check Before Output

AI가 코드를 보여주기 전 모든 줄을 토큰 화이트리스트와 대조하여 검증합니다.

Before / After

토큰 규칙 유무에 따라 빌드한 동일한 UI

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>
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>

토큰 기반 코드는 다크 모드, 커스텀 테마, 브랜드 변경에 자동으로 대응합니다. 수동 업데이트가 필요 없습니다.

Example Prompts

아래 프롬프트를 복사해서 바로 시작하세요.

llms.txt를 읽고 7onic 토큰으로 랜딩 페이지를 스타일링해줘
7onic 디자인 토큰으로 요금제 카드를 만들어
7onic 토큰 클래스만 사용해서 대시보드 레이아웃을 만들어줘

Troubleshooting

자주 발생하는 문제와 해결법

AI가 bg-blue-500 같은 하드코딩 컬러를 사용함

AI에게 전달하세요: "llms.txt를 다시 읽어. 모든 하드코딩 컬러를 토큰 클래스로 교체해."

AI가 dark: 프리픽스를 추가함

AI에게 전달하세요: "토큰 컬러는 다크 모드에 자동 대응해. dark: 프리픽스를 모두 제거해."

AI가 p-[17px] 같은 임의 값을 사용함

AI에게 전달하세요: "llms.txt의 스페이싱 토큰만 사용해. p-[17px]가 아니라 p-4."

Disclaimer

AI는 완벽하지 않습니다. AI가 생성한 코드는 배포 전에 반드시 검토하세요. 디자인 요구사항, 접근성, 토큰 설정이 올바른지 확인하세요.