Kimi K3 Builds $20,000 Websites in 19 Mins

01핵심 개요

02핵심 내용 구조

Kimi K3의 위상: 현재 넘버원 디자인 모델

• Kimi K3는 사람들이 여러 모델을 블라인드 테스트하는 '프론트엔드 코드 아레나'에 실제로 코드화된 결과로 Fable 5를 앞섰으며, 발표자는 이를 지구상 최고의 디자인 모델로 규정한다.
• 3D 디자인 아레나에서도 Claude Fable 5, GLM 5.2, Opus 5보다 높은 1위를 기록해 디자인 역량에서 최상위임을 강조한다.
• 가격은 Fable 5 대비 약 30% 수준으로 저렴해 비용 대비 품질에서 압도적 이점을 가진다는 점이 핵심 셀링 포인트다.

3요소 아키텍처: 빌드·소스·호스팅

• 아름다운 웹사이트 제작에는 (1) 빌드용 지능 모델(Kimi K3 또는 Fable 5), (2) 이미지·비디오 소스, (3) 호스팅 공간의 세 가지만 필요하다고 정리한다.
• 소스는 Higgsfield에서, 호스팅은 Vercel에서 처리하는 구성을 전체 워크플로우로 제시한다.
• 이 구조를 이해하면 초보자도 동일한 결과를 재현할 수 있다는 점을 반복 강조한다.

실행 환경: Claude Code 하네스와 OpenRouter

• Kimi K3는 웹사이트가 아닌 경우 Claude Code 터미널에서 열거나, 발표자의 'Agentic OS'에서 모델을 자유롭게 선택해 대화하는 방식으로 사용한다.
• OpenRouter의 API 키만 있으면 모든 모델에 접근 가능하며, Claude Code 하네스 안에서 실행되므로 compact 같은 슬래시 명령과 스킬을 그대로 활용할 수 있다.
• 컨텍스트 윈도우는 891,000 토큰에서 자동 압축(auto compact)되며, 화면에서 토큰 사용량과 대화 비용을 실시간 확인할 수 있다.

레벨 1: 스토리형 데스크톱 웹사이트

• '하나의 스토리, 하나의 스크롤' 원칙으로 몰입형 스토리 웹사이트를 만들며, 예시로 벌·벌집에서 최종 제품(꿀 제품)까지의 여정을 담은 'Honey Drop' 사이트를 생성한다.
• 스킬 실행 시 사전 점검(pre-flight status)으로 Higgsfield CLI 로그인, Vercel 로그인 상태를 확인하고 미디어 엔진 사용 여부, 심사(judge) 모델 등을 질문한다.
• GPT-5.6을 심사(judge)로, 또는 별도의 Kimi K3를 2차 모델로 태그해 교차 검증(cross-verify)함으로써 결과 품질을 끌어올린다.

레벨 2: 모바일 최적화 디자인

• 대부분 사용자가 모바일이라는 점을 근거로, 동일한 스토리 스핀(story spine)을 유지하되 '한 화면당 하나의 아이디어' 원칙으로 모바일용을 재구성한다.
• 특정 브레이크포인트에서 세로 비디오가 가로로 자연스럽게 전환되도록 지시하는 등, 다른 곳에서 잘 하지 않는 동적 모바일 대응을 구현한다.
• 비디오 재생성에는 비용이 들므로 모바일에서 비디오를 빼더라도, 발표자의 이전 스타트업 경험(월 5만 명 순방문·SEO 데이터 기반)을 근거로 모바일 디자인 자체는 반드시 고려해야 한다고 강조한다.

레벨 3: 브랜드 개인화 웹사이트

• 실제 수익화는 고립된 데모가 아니라 기존 브랜드 아이덴티티(색상 팔레트, 로고, 톤)를 반영한 개인화 웹사이트에서 나온다고 설명한다.
• Fritz Cola(흰색·검정·빨강 팔레트)를 예시로, 하나의 프롬프트로 웹사이트에서 로고·타이포그래피·브랜드 아이덴티티를 추출해 3D 웹사이트로 조립한다.
• 이때 Firecrawl로 불필요한 HTML(H1·H2 태그 등)을 걷어내고 핵심 정보만 추출하면, 모델이 웹 스크래핑에서 헤매지 않고 안정적으로 브랜드를 파악한다.

03기술적 맥락

• Kimi K3는 디자인 레퍼런스를 주면 이를 매우 정교하게 따라 복제하는 능력이 뛰어나, 레퍼런스 기반 디자인 재현에서 강점을 가진다.
• Kimi K3의 비용은 Opus 5와 유사한 구간(즉 완전 무료는 아님)이지만 Fable 5보다는 저렴하다.
• Higgsfield는 Seedance, VO, Kling 3.0, Nano Banana 등 여러 생성 모델에 접근할 수 있는 미디어 소스 허브 역할을 한다.

04전략적 의미

• 최고 디자인 성능 모델을 대형 모델의 30% 비용으로 쓸 수 있어, 웹사이트 제작 서비스의 마진 구조가 근본적으로 바뀔 수 있다.
• 브랜드 개인화(레벨 3)는 기존 고객사에 프로스펙티브 제안을 자동 생성하는 영업 도구로 확장 가능하다.
• 스킬(skill)에 시행착오와 오류 대응을 축적해 재사용하는 방식은, 개인의 노하우를 반복 가능한 자산으로 전환하는 전형적 사례다.

05핵심 워크플로우·방법론

• 검증된 스킬 다운로드 → Kimi K3에 스킬 부여 → Higgsfield CLI·Vercel 연결 → 아이디어 입력 → 사전 점검·질문 응답 → 생성·심사 → Vercel 배포의 순서로 진행한다.
• 모델이 오작동하면 Claude Code에 상황을 설명해 채팅 안에서 해당 모델과 인터페이스하며 문제를 해결하도록 위임할 수 있다.
• 발견된 모든 오류를 스킬에 다시 기록해("write this into the skill") 누구에게도 재발하지 않게 만드는 반복 개선 루프를 강조한다.

06활용 시나리오

• 벌·꿀 스토리처럼 자산이 전혀 없는 상태에서 모델의 상상력만으로 몰입형 제품 랜딩 페이지를 생성한다.
• 콜라 브랜드(Fritz Cola)의 로고·색상·타이포를 자동 추출해 3D 프로모션 사이트를 제안 자료로 제작한다.
• 데스크톱용 사이트를 만든 뒤 동일 스토리로 모바일 버전을 동적으로 재구성해 두 포맷을 함께 배포한다.

07현황 및 전망

• 'AI 모델 왕좌는 게임 오브 쓰론즈보다 자주 바뀐다'는 비유처럼, 현재 최고 자리(Kimi K3)는 유동적이며 지속적 재평가가 필요하다.
• 비용 저렴화와 스킬 기반 자동화가 결합되면서 비개발자의 고품질 웹 제작 진입장벽이 빠르게 낮아지고 있다.
• Firecrawl 같은 에이전트 전용 스크래핑 도구의 병행 사용이 안정적 워크플로우의 사실상 필수 요소로 자리 잡고 있다.

08용어 사전