본문으로 건너뛰기

05 · AI GENERATION RULES

AI 생성 하드 제약 체크리스트

POSX를 위해 코드나 콘텐츠를 생성하는 모든 AI(Claude Code · Cursor · Copilot 등)는 아래 항목을 전부 동시에 충족해야 합니다. 휴먼 리뷰에서 각 항목은 필수 통과 기준입니다.

§1

컬러

  • .tsx에 HEX 하드코딩 금지 · 변수가 필요한 경우 var(--posx-*) 형식 사용
  • 배경 / 카드 / 보더 / 본문은 시맨틱 토큰만 사용 (bg-background · bg-card · border-border · text-foreground)
  • 브랜드 컬러는 bg-primary / text-primary 사용 · 다크 모드 자동 대응
  • 대면적 그라디언트는 승인된 6종 그라디언트만 사용 · 즉흥 조합 금지
  • 한 화면에 보조 컬러(teal / gold / rose / azure) 2개 이상 사용 금지
DOclassName="text-posx-purple-600"
DON'Tstyle={{ color: "#6352CE" }}
§2

타이포그래피 & 레이아웃

  • 제목은 font-heading(Space Grotesk) · 본문은 font-sans(Inter) · 라벨/숫자는 font-mono
  • 글자 크기는 규정 스케일 사용 · 매직 값 금지 (Hero 예외만 허용)
  • 금액 / 퍼센트 / 해시 / 표 숫자는 반드시 tabular-nums
  • Eyebrow는 text-[11px] font-mono uppercase tracking-widest로 통일
DOclassName="font-mono tabular-nums"
DON'TclassName="text-[15px]"
§3

컴포넌트

  • 버튼 / 카드 / 배지 / 폼 / 다이얼로그는 @/components/ui/*(shadcn)에서 임포트 · 재구현 금지
  • 주요 CTA는 항상 <Button>(default = 브랜드 퍼플) · 한 화면에 하나만 허용
  • 로고는 항상 <PosxLogo> 컴포넌트 사용 · SVG 패스 복사·인라인 재작성 금지
  • 클래스 병합은 cn() 사용
DOimport { Button } from "@/components/ui/button"
DON'T<div className="..." onClick={...}>Button</div>
§4

라운드 & 섀도

  • 라운드는 시맨틱 클래스 rounded-sm/md/lg/xl/2xl/full 사용 (--radius에서 파생)
  • 섀도는 shadow-xs/sm/md/lg/xl + --shadow-brand 사용 · 커스텀 섀도 컬러 금지
§5

다크 모드

  • 컬러는 시맨틱 토큰 우선 (테마 자동 대응)
  • 테마별 분기가 필요하면 dark: 변형 사용 · 조건부 클래스는 반드시 쌍으로 작성
  • React state에서 theme을 직접 판별해 className을 교체하는 것 금지 (테마 관리 컴포넌트 제외)
DOclassName="bg-card dark:bg-posx-purple-900/40"
DON'Ttheme === "dark" ? "bg-navy-800" : "bg-white"
§6

모션

  • 입장 애니메이션은 <Reveal>로 래핑 · 같은 그룹은 delay={i * 0.05}
  • 트랜지션은 --dur-fast/base/slow + --ease-out 사용
  • prefers-reduced-motion 반드시 지원
  • GSAP 등 대형 모션 라이브러리 도입 금지
§7

접근성

  • <button>은 type="button" 필수(제출용 제외) · 아이콘 전용 버튼은 aria-label 필수
  • SVG: 장식용은 aria-hidden · 의미 전달용은 role="img" + aria-label
  • 폼은 <label htmlFor> + aria-describedby
  • 터치 타깃 ≥ 44×44px
§8

파일 & 디렉터리

  • 새 컴포넌트 → components/ui/*(shadcn 생성) 또는 components/sections/*(비즈니스 섹션)
  • 전역 스타일 / 새 토큰 → app/globals.css · :root와 .dark 모두에 정의
  • 문서 소스 → docs/ 해당 번호 디렉터리 · 자산 → assets/ 해당 카테고리
§9

코드 품질

  • TypeScript strict · any 금지 (필요 시 unknown + 타입 가드)
  • Props는 interface가 아닌 type으로 정의
  • 서버 컴포넌트 우선 · 상태/브라우저 API가 필요할 때만 "use client"
  • Lorem Ipsum 등 플레이스홀더 잔여물 금지
§10

콘텐츠 컴플라이언스 (POSX 전용)

  • AI가 작성한 대외 카피는 마케팅 컴플라이언스 레드라인 검증을 통과해야 함 (가격 예측 / 수익 약속 / 다단계 추천 보상 / 허위 제휴 금지)
  • AI 생성 이미지는 "AI-assisted" 표기와 승인 필수 · 프롬프트에 cinematic / epic / hyperreal 사용 금지
  • 데이터 인용에는 Source + As-of 필수 · 숫자 날조 금지
DO$23.8T (Source: World Bank · As of 2025)
DON'T"Expected 3–5x at listing"