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)를 다섯 단계의 영화 제작 파이프라인으로 안내하는 '에이전트 스킬'(레시피와 스크립트 세트)로 작동합니다:
- 레콘: 수상 경력이 있는 사이트를 분석하고 실시간 참조에서 무드보드를 생성합니다.
- 커밋 시트: 브랜드 색상, 타이포그래피, 모션 예산을 사전에 확정합니다.
- 자산 생성: 로컬 CLI(예: Blender 또는 Gemini)를 사용해 3D 기하학, 이미지, 비디오를 생성합니다.
- 빌드: 범용 WebGL, GSAP, Lenis를 사용해 고성능 모션을 구현합니다.
- 게이트: 모든 사이트는
slopscan(일반적인 AI 디자인 패턴을 탐지하는 린터)과motionqa(레티나 디스플레이에서 60fps 성능을 보장하는 Playwright 테스트)를 통과해야 합니다.
대상 사용자
AI 에이전트를 사용하여 고해상도의 영화적 랜딩 페이지와 웹 경험을 만들고 싶은 개발자 및 디자이너.
주요 기능
- 안티-슬롭 린터: 종속성 없이 작동하는 도구로, 일반적인 AI 디자인의 획일성(예: 특정 보라색-파란색 그라데이션, 기본 폰트)을 감지하면 빌드를 실패시킵니다.
- 성능 게이트:
motionqa를 사용해 DPR 2에서 프레임 속도를 측정하여 고해상도 화면에서 부드러운 움직임을 보장합니다. - 에이전트 독립성: Claude Code, Cursor, Windsurf 등
SKILL.md파일을 읽을 수 있는 에이전트와 호환됩니다. - 영화적 도구 세트: 스크롤 스컬프된 비디오 엔진과 CC0 라이선스 자산을 확보하는 도구를 포함합니다.
- 접근성 기준:
prefers-reduced-motion지원을 강제하고, 자바스크립트 없이도 콘텐츠가 읽을 수 있도록 보장합니다.
관련
- 프로젝트
- 프로젝트
- 프로젝트
- 프로젝트
- 프로젝트