AI Integration Components

AI에게 전체 가이드를 전달하면, 7onic 컴포넌트와 토큰으로 빌드합니다. Props, 서브컴포넌트 구성, 폼 레시피까지 모두 포함됩니다.
토큰만 사용하는 경우 Token AI Integration를 참고하세요.

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

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

Supported AI Tools

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

Claude Code

Cursor

GitHub Copilot

ChatGPT

How to Use

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

로컬 (패키지 설치됨)

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

Reference Path

Direct Prompt

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

Read node_modules/@7onic-ui/react/llms.txt and build a dashboard with 7onic

웹 (로컬 접근 불가)

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

URL Reference

Copy & Integrate

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

# 7onic Components + Tokens
(paste llms-full.txt content here)

What AI Does Automatically

전체 가이드로 AI가 컴포넌트와 토큰을 함께 처리합니다.

Uses 7onic Components

커스텀 버튼/모달/폼을 직접 만들지 않고, 올바른 Props로 기존 컴포넌트를 사용합니다.

Complete Sub-component Sets

Modal에는 ModalContent, Tooltip에는 TooltipTrigger 등 필수 서브컴포넌트를 빠짐없이 사용합니다.

Token Classes Only

bg-blue-500 대신 bg-primary를 사용하며, 모든 스타일링이 디자인 토큰을 따릅니다.

Form Patterns

AI가 Input을 Field로 감싸고, FieldLabel에 required를 추가하고, 올바른 에러 처리를 적용합니다.

Before / After

컴포넌트 가이드 유무에 따라 빌드한 동일한 UI

llms.txt 없이

<button
  className="bg-blue-500 text-white px-4 py-2
    rounded-lg hover:bg-blue-600"
>
  Save Changes
</button>

<div className="fixed inset-0 bg-black/50 z-[9999]">
  <div className="bg-white rounded-lg p-6 max-w-md">
    <h2>Confirm</h2>
    <p className="text-gray-500">Are you sure?</p>
  </div>
</div>

llms.txt 적용

<Button variant="solid">
  Save Changes
</Button>

<Modal>
  <ModalTrigger asChild>
    <Button>Open</Button>
  </ModalTrigger>
  <ModalContent>
    <ModalTitle>Confirm</ModalTitle>
    <ModalDescription>
      Are you sure?
    </ModalDescription>
  </ModalContent>
</Modal>

컴포넌트는 다크 모드, 접근성, z-index 레이어링, 애니메이션을 자동으로 처리합니다. 별도 구현이 필요 없습니다.

Token Rules

컴포넌트는 모든 스타일링에 디자인 토큰을 사용합니다. 토큰 전체 가이드는 AI Integration (Tokens)를 참고하세요.

bg-blue-500

bg-primary

text-gray-700

text-foreground

p-[17px]

p-4

rounded-[7px]

rounded-md

Troubleshooting

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

AI가 7onic을 사용하지 않고 커스텀 컴포넌트를 생성함

AI에게 전달하세요: "llms.txt를 다시 읽어. 커스텀으로 만들지 말고 기존 7onic 컴포넌트를 사용해."

AI가 필수 서브컴포넌트를 누락함

AI에게 전달하세요: "Modal에는 ModalContent와 ModalTitle이 필요해. llms.txt의 컴포넌트 구조를 확인해."

AI가 잘못된 Props를 전달함

AI에게 전달하세요: "llms.txt의 Props 테이블을 확인해. 문서화된 prop 값만 사용해."

Disclaimer

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