한 줄 요약
Fable 5로 단일 프롬프트만 써서 인터랙티브·3D·애니메이션 웹사이트를 생성·리디자인하는 실험 영상. 자기소개 사이트, Type UI/Reddit 리디자인, 브라우저에서 플레이 가능한 3D 팩맨 게임, 포트폴리오, Vanguard 복제까지 테스트하고 웹디자인에서 Fable 5가 Gemini·ChatGPT보다 낫다고 결론 내린다.
영상 메타
- 채널: Codex Community
- 길이: 약 5분 14초 (314초)
- 업로드: 2026-06-11
- 조회수: 약 82,792회
픽업 인사이트
- Fable 5(앤트로픽 최신 모델)로 단일 프롬프트만 써서 인터랙티브·어워드급 웹사이트를 생성·리디자인하는 테스트를 진행. Claude Desktop에서 자기 자신을 소개하는 사이트를 요청하니 약 13분 사고 후 3D 나비·도트 인터랙티브 요소와 타이포그래피·색 사용이 좋은 결과를 냈다.
- Claude Code에서 디렉토리를 주고 3.js와 GSAP로 어워드급 사이트를 요청하니 10~20분 만에 3D 에셋, 미세한 애니메이션, 스크롤에 맞춰 드나드는 행성 등을 만들었고 “단일 프롬프트로 생성한 사이트 중 가장 잘 나온 축”이라고 평가했다.
- 기존 사이트(Type UI) 리디자인은 약 20분·토큰을 많이 소모했고, 커스텀 마우스 커서가 들어간 3D 효과와 뷰포트 진입 시 페이드인되는 애니메이션을 적용해 기존 정적 버전보다 낫다고 봤다.
- 에이전트의 디자인 스킬(design skill)을 Fable에 연결해 팩맨 미감을 요청하니, 디자인 스킬과 3.js를 끌어와 페이지 안에 브라우저에서 플레이 가능한 3D 팩맨 게임까지 구현했다.
- 스크린샷을 첨부해 Reddit을 리디자인하니 더 미니멀하고 가독성 높은 결과가 나왔고, Motion Sites의 Vanguard 프롬프트를 복제하니 약 20분 만에 애니메이션 배경 등 온라인 AI 생성물과 동급의 랜딩 페이지를 만들었다.
- 결론적으로 웹디자인에서 Fable 5가 현존 최고 수준이며 Gemini·ChatGPT가 낸 결과보다 우수하다고 평가했고, 향후 Claude Code·VS Code·Cursor에 붙여 일상 코딩에서도 테스트해 보겠다고 했다.
용어
- Fable 5 [모델 · 구독]: 앤트로픽의 최신 모델. 웹디자인·코딩·게임 플레이 등에서 강한 성능을 보인다고 영상이 소개.
- Claude Code [도구 통신 (MCP · CLI · API)]: 앤트로픽의 CLI 코딩 도구. 실제 디렉토리 컨텍스트를 주고 사이트를 통째로 생성시켰다.
- Design skill (디자인 스킬) [하니스 · 패턴]: 에이전트에 특정 디자인 언어·미감을 주입하는 재사용 스킬. Fable에 연결해 팩맨 미감 같은 일관된 디자인을 생성.
- 3.js (Three.js) [기타]: 브라우저에서 3D 그래픽을 렌더링하는 자바스크립트 라이브러리.
- GSAP [기타]: 웹 애니메이션을 만드는 자바스크립트 라이브러리(GreenSock).
- Motion Sites [기타]: AI 모델이 생성한 웹사이트와 그 프롬프트를 모아 공유하는 사이트.