agiwhitelist/auteur

The Claude Code skill that directs a website like a film. Commit-sheet, generated assets, build, and an executable anti-slop linter that gates every ship.

해결하는 문제

auteur는 AI로 생성된 웹사이트에서 흔히 볼 수 있는 '비정형성'과 예술적 방향성의 부재를 해결합니다. 일반적인 템플릿이나 무작위 AI 출력에 의존하는 것이 아니라, 코드를 한 줄도 쓰기 전에 고급 예술적 방향성, 성능 기준(60fps), 접근성 기준을 강제하는 체계적인 파이프라인을 제공합니다.

작동 방식

이는 AI 에이전트(예: Claude Code)를 다섯 단계의 영화 제작 파이프라인으로 안내하는 '에이전트 스킬'(레시피와 스크립트 세트)로 작동합니다:

  1. 레콘: 수상 경력이 있는 사이트를 분석하고 실시간 참조에서 무드보드를 생성합니다.
  2. 커밋 시트: 브랜드 색상, 타이포그래피, 모션 예산을 사전에 확정합니다.
  3. 자산 생성: 로컬 CLI(예: Blender 또는 Gemini)를 사용해 3D 기하학, 이미지, 비디오를 생성합니다.
  4. 빌드: 범용 WebGL, GSAP, Lenis를 사용해 고성능 모션을 구현합니다.
  5. 게이트: 모든 사이트는 slopscan(일반적인 AI 디자인 패턴을 탐지하는 린터)과 motionqa(레티나 디스플레이에서 60fps 성능을 보장하는 Playwright 테스트)를 통과해야 합니다.

대상 사용자

AI 에이전트를 사용하여 고해상도의 영화적 랜딩 페이지와 웹 경험을 만들고 싶은 개발자 및 디자이너.

주요 기능

  • 안티-슬롭 린터: 종속성 없이 작동하는 도구로, 일반적인 AI 디자인의 획일성(예: 특정 보라색-파란색 그라데이션, 기본 폰트)을 감지하면 빌드를 실패시킵니다.
  • 성능 게이트: motionqa를 사용해 DPR 2에서 프레임 속도를 측정하여 고해상도 화면에서 부드러운 움직임을 보장합니다.
  • 에이전트 독립성: Claude Code, Cursor, Windsurf 등 SKILL.md 파일을 읽을 수 있는 에이전트와 호환됩니다.
  • 영화적 도구 세트: 스크롤 스컬프된 비디오 엔진과 CC0 라이선스 자산을 확보하는 도구를 포함합니다.
  • 접근성 기준: prefers-reduced-motion 지원을 강제하고, 자바스크립트 없이도 콘텐츠가 읽을 수 있도록 보장합니다.

관련

  • 프로젝트
  • 프로젝트
  • 프로젝트
  • 프로젝트
  • 프로젝트