7onicDESIGN SYSTEM

AI Integration Components

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

llms-full.txt
38 components
하드코딩 제로
https://7onic.design/llms-full.txt

Supported AI Tools

llms-full.txt도 동일한 표준을 따릅니다. 텍스트를 읽을 수 있는 모든 AI 도구에서 사용할 수 있습니다.

Claude Code

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

Cursor

.cursor/rules에 추가

GitHub Copilot

copilot-instructions.md에 추가

ChatGPT

대화에 URL 붙여넣기

How to Use

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

Reference Path

node_modules의 파일을 AI 도구에 지정합니다.

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

Copy & Integrate

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

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

Direct Prompt

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

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

URL Reference

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

프롬프트 / 규칙
Read https://7onic.design/llms-full.txt and build with 7onic components

What AI Does Automatically

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

Uses 7onic Components

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

Correct Compound Patterns

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

Token Classes Only

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

Form Patterns

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

Before / After

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

llms-full.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-full.txt 적용
<Button variant="solid">
  Save Changes
</Button>

<Modal>
  <Modal.Trigger asChild>
    <Button>Open</Button>
  </Modal.Trigger>
  <Modal.Content>
    <Modal.Title>Confirm</Modal.Title>
    <Modal.Description>
      Are you sure?
    </Modal.Description>
  </Modal.Content>
</Modal>

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

Example Prompts

아래 프롬프트를 복사해서 컴포넌트로 빌드를 시작하세요.

llms-full.txt를 읽고 7onic으로 SaaS 대시보드를 만들어
7onic 컴포넌트로 폼 밸리데이션이 있는 설정 페이지를 만들어
7onic으로 정렬과 페이지네이션이 있는 데이터 테이블을 만들어줘

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-full.txt를 다시 읽어. 커스텀으로 만들지 말고 기존 7onic 컴포넌트를 사용해."

AI가 compound 서브컴포넌트를 빠뜨림

AI에게 전달하세요: "Modal에는 Modal.Content와 Modal.Title이 필요해. llms-full.txt의 compound 구조를 확인해."

AI가 잘못된 Props를 전달함

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

Disclaimer

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