AI Integration Tokens

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

llms.txt (Tokens)

전체 AI 도구 대응

하드코딩 제로

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

llms.txt는 패키지 설치 시 자동으로 포함됩니다. AI에게 추가 지시할 때 이 URL을 복사해서 사용하세요.

Supported AI Tools

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

Claude Code

Cursor

GitHub Copilot

ChatGPT

How to Use

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

로컬 (패키지 설치됨)

Claude Code, Cursor, Copilot 등 AI가 로컬 파일을 직접 읽을 수 있습니다.

Reference Path

웹 (로컬 접근 불가)

ChatGPT 등 로컬 파일을 읽을 수 없는 웹 기반 AI 도구용.

URL Reference

Copy & Integrate

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

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

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>

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

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가 생성한 코드는 배포 전에 반드시 검토하세요. 디자인 요구사항, 접근성, 토큰 설정이 올바른지 확인하세요.