Higgsfield 웹사이트 빌더 (CLI) — 세 가지 제품 유형, 세 가지 흐름은(는) 무엇을 하나요?

전체 라이프사이클을 Higgsfield CLI(higgsfield website …)를 통해 관리하고, 이후 git + bun을 사용하여 로컬 파일 시스템에서 코드를 편집합니다. 각 웹사이트는 단일 Cloudflare Worker로 구축됩니다: React 19 + TanStack Start 앱, 서버 렌더링(SSR) 방식이며, 제품 고유의 서브도메인에서 단일 Worker로 배포됩니다. 프로젝트는 app/ 디렉토리에 위치합니다. 모든 bun/빌드 명령은 이 디렉토리에서 실행하세요.

세 가지 유형 — 생성 시 필수 `--type` 플래그

higgsfield website create 명령에는 --type 플래그가 필수이며, 이는 사용자의 선택입니다. 요청이 명확하지 않은 경우 사용자에게 먼저 질문하세요(한 번, 선제적으로 질문):

--type website — Higgsfield 통합이 전혀 없고 어떤 종류의 AI 생성도 하지 않는(Higgsfield 또는 다른 제공자를 통한 이미지/비디오/오디오/텍스트 생성 없음) 독립형 제품입니다: "Sign in with Higgsfield" 없음, Higgsfield에 대한 요청 없음, fnf SDK 없음. 모든 웹사이트는 완전히 독립적인 브랜드를 가집니다: 디자인 브리핑을 기반으로 자체 팔레트, 타이포그래피, 크롬(인터페이스 요소)을 사용하며, Tailwind/CSS만 사용합니다. @higgsfield/quanta/*를 임포트하거나 q- 접두사가 붙은 토큰을 어디에도 사용하지 말고, 페이지 콘텐츠에 "Powered by / Built on Higgsfield" 배지나 언급을 절대 포함하지 마세요. 사용자의 브랜드만이 페이지에 나타나는 유일한 브랜드입니다.
```
higgsfield website create --type website
```
--type app — Higgsfield와 긴밀하게 통합된 제품입니다: 사용자는 Higgsfield로 로그인하고 fnf SDK를 통해 이미지/비디오를 생성합니다(전체 인증 + D1 계약이 적용됨). 앱은 Higgsfield 제품처럼 보이고 느껴져야 합니다: UI는 Quanta(references/quanta-design.md)로 구축되며, Quanta에 없는 것은 Quanta 프리미티브로 직접 만든 컴포넌트를 사용해야 합니다(타사 UI 라이브러리 사용 금지). 표준 앱 레이아웃(references/app-layouts.md)에서 시작하세요. Quanta와 앱 레이아웃은 앱 전용입니다. --type website 빌드에는 절대 적용하지 마세요. 독립 브랜드 규칙과 wow 파이프라인(design-taste-frontend, 보드, wow 카탈로그)은 웹사이트 경로입니다. 앱은 절대 사용자 정의 브랜드를 갖지 않습니다. Quanta 자체가 브랜드입니다.
```
higgsfield website create --type app
```
--type game — 브라우저 게임입니다: 게임 템플릿 위에 실시간 멀티플레이어 방을 제공하며, 게임 자체는 app/src/logic.js의 6가지 순수 함수로 구성되어 있고 플랫폼이 이미 소켓, 방, 영속성을 관리합니다. 게임 장르를 --category(arcade, puzzle, shooter, … higgsfield website categories 명령어로 확인 가능)로 지정해야 하며 --template은 사용하지 않습니다. 게임은 사용 가능한 유일한 템플릿으로 스캐폴딩됩니다. 싱글 플레이어도 가능합니다: minPlayers: 1로 설정하세요. references/game-flow.md를 참조하세요.
```
higgsfield website create --type game --category arcade
```

생성 기능은 항상 앱입니다. 이미지, 비디오, 오디오 또는 기타 AI 미디어를 생성하는 모든 제품은 Higgsfield에서 실행됩니다. --type app으로 빌드하세요(Higgsfield로 로그인, 사용자의 Higgsfield 크레딧으로 생성). 웹사이트에 대해 "자체 이미지/비디오 API 사용" 또는 자체 생성 키를 연결하는 옵션을 사용자에게 제공하지 마세요. 해당 경로는 존재하지 않습니다. --type website은 생성 기능이 없고 Higgsfield 또는 다른 생성 서비스와 연결되지 않은 사이트에만 사용됩니다. (웹사이트는 여전히 지불, 지도, 이메일 등 생성 기능이 아닌 일반 타사 API를 사용자의 자체 키와 함께 사용할 수 있습니다. 이 규칙과는 무관합니다.)

빠른 판단 가이드: "랜딩 페이지 / 포트폴리오 / 마케팅 사이트 / 자체 사용자를 보유한 SaaS, AI 생성 없음" → 웹사이트. "이미지/비디오/오디오 생성, 또는 Higgsfield 모델, 크레딧, 생성 기록과 관련된 모든 것" → 앱. "플레이하는 것 — 멀티플레이어 또는 싱글 플레이어 게임" → 게임.

게임은 이전에 사용되던 별도 엔진에서 이 파이프라인으로 이전되었습니다. higgsfield game … 명령어는 더 이상 사용되지 않습니다. 게임은 웹사이트와 정확히 동일한 방식으로 생성, 배포 및 게시됩니다. 이를 달리 명시하는 문서는 구식입니다.

생성 시 항상 서브도메인 설정

higgsfield website create 명령은 선택적 --subdomain 플래그를 받습니다. 이는 사이트의 슬러그가 되어 라이브 URL은 <subdomain>.<host> 형식이 됩니다. 항상 설정하세요: 제품 이름이나 목적에서 하나를 선택하세요. 사용자가 명시적으로 임의의 슬러그를 원하는 경우에만 생략하세요(임의 슬러그 생성됨). 좋은 서브도메인 규칙:

4자 이상 — 짧은 단일 단어는 예약되어 있으므로 더 길게 작성하세요.
기억하기 쉬워야 함 — 제품 이름/목적에서 파생(예: lumen-notes, pixelforge), 임의의 문자열 사용 금지.
허용된 문자만 사용 — 소문자, 숫자, 단일 하이픈(DNS 안전). 공백, 밑줄, 대문자, 선행/후행 하이픈 금지.

소수의 예약된 레이블(예: api, www, app)과 이미 사용 중인 서브도메인은 거부됩니다. 발생 시 유사한 변형을 시도하세요.

전제 조건

higgsfield가 $PATH에 없으면 설치하세요:

curl -fsSL https://raw.githubusercontent.com/higgsfield-ai/cli/main/install.sh | sh

higgsfield account status가 Session expired / Not authenticated를 보고하면, 사용자에게 higgsfield auth login(대화형)을 실행하고 확인을 기다리도록 요청하세요.
저장소를 복제한 후 로컬에서 git과 bun을 사용합니다. CLI 자체는 create / repo / deploy / publish / status / db / secrets 명령과 에셋 생성 작업(higgsfield generate …, higgsfield model …)을 처리합니다.

경로 선택 후 하나의 흐름을 처음부터 끝까지 따르기

--type을 결정하세요(불명확하면 사용자에게 질문 — 사용자의 선택입니다). 동일한 첫 질문에서 준비가 되었을 때 이를 Higgsfield 커뮤니티 피드(마켓플레이스)에 게시할지 여부도 함께 물어보세요(예/아니오). 답변을 기억하세요: 예인 경우 최종적으로 자동 게시(배포 + 메타데이터 후), 다시 질문할 필요 없음; 아니요인 경우 배포만 수행하세요. 빌드를 차단하지 마세요.
해당 흐름을 읽고 따르세요. 이 흐름은 해당 유형에 대한 완전한 워크플로우이며, 자체 참조, 하드 규칙, 편집 맵, 배포/게시 게이트를 포함합니다:

모든 --type website 빌드에서 인테이크는 항상 사용자에게 애니메이션(권장) 웹사이트(생성된 영화를 통해 스크롤 기반 여정, references/scroll-scrub.md 참조)와 비애니메이션 웹사이트 중에서 선택하도록 요청합니다. 이 질문은 필수입니다. 요청이 선택을 암시하는 것처럼 보여도 절대 건너뛰지 마세요. 애니메이션이 권장 기본값입니다(사용자가 연락이 닿지 않거나 응답하지 않을 때만 사용). 아래 흐름은 두 경로와 전체 파이프라인을 모두 포함합니다.

애니메이션 경로 내에서 기본값은 단일 샷 영화입니다. 하나의 연속된 약 15초 테이크로, 처음부터 끝까지 스크러빙되며 이음새가 없습니다. 다중 장면 체인은 옵트인 방식이며 다리당 몇 분의 추가 시간이 소요됩니다. 브리핑이 실제로 별개의 세계를 오갈 때만 사용하세요. references/scroll-scrub.md가 이 결정을 관리합니다.

유형	흐름
`--type website`	`references/website-flow.md` — 단계별 파이프라인(기본값 애니메이션 웹사이트): 인테이크 → 컨셉 → 참조 보드 → 에셋 시스템 → 보드 기반 빌드 → 모션 → 커버 + 메타데이터 → 기계적 게이트 → 배포
`--type app`	`references/app-flow.md` — Quanta 툴킷, 6가지 코드 레이아웃, fnf SDK + 인증 + D1 계약, 런치 커버 + 메타데이터, 게시 게이트
`--type game`	`references/game-flow.md` — 6함수 `logic.js` 계약, 실시간 방, 게임 장르 `--category`, 플레이 테스트, 배포 + 게시

게임의 아트와 오디오도 이곳에 있으며, game- 접두사 아래에 있고 references/game-flow.md에서 이를 색인화합니다: references/game-design-system.md(먼저 읽기 — 프로필, 핵심 루프, 에셋 매니페스트), references/game-stylization.md(모든 비주얼이 재사용하는 스타일 공식), references/game-2d-animation.md, references/game-textures.md, references/game-3d-animation.md, references/game-procedural-animation.md, references/game-audio.md, references/game-meshy-api.md, references/game-meshy-input-rules.md가 있습니다. 이들이 구동하는 GLB/리깅/텍스처 도구는 이 스킬의 scripts/ 디렉토리에 포함되어 있습니다.

세 가지 흐름 모두 동일한 플랫폼 메커니즘(SSR Worker, app.manifest.json 인프라, higgsfield website deploy <website_id>를 통한 단일 라이브 배포, 아래의 커버 + 메타데이터 요구 사항, 게시 게이트)을 공유합니다. 각 흐름은 필요한 내용을 다시 명시하므로 다른 흐름을 읽을 필요가 없습니다.

커버 + 메타데이터 — 항상 빌드의 일부, 게시 전용이 아님

모든 빌드(웹사이트 또는 앱, 크기에 관계없이)는 references/app-cover.md에 따라 생성된 브랜드 런치 커버와 채워진 피드 카드 메타데이터를 포함하여 출시되며, 이를 app/src/app-meta.json(og_title, og_description, favicon_url, og_image_url, marketplace_cover_url)에 기록합니다. 이는 작업이 완료된 것으로 제시되기 전, 그리고 이를 배포하는 배포 전에 수행되는 빌드 단계입니다. higgsfield website publish로 미루지 마세요. 하드 규칙:

"간단한 앱" 예외는 없습니다. 유틸리티 도구, 타이머, 한 페이지 장난감 등 모두 생성된 커버를 받습니다. 수동으로 작성된 인라인 SVG 파비콘은 파비콘으로는 괜찮지만 생성된 커버를 대체해서는 안 됩니다.
커버 이미지에 대한 허가는 필요하지 않습니다. 실제 콘텐츠를 작성하는 것과 같은 방식으로 생성하세요. 선택적 커버 비디오(og_video_url)만 허가가 필요합니다(비디오는 크레딧을 소모합니다. 제공만 하고, 요청 없이 생성하지 마세요).
빈 커버나 빈 og_title로 완료되었다고 제시된 빌드는 불완전합니다. 이들 없이 게시하는 것은 손상된 게시입니다(빈 og_title은 피드에서 보이지 않습니다. 빈 커버는 빈 카드입니다).

UX 규칙

간결하게 말하세요. 채팅에 원시 웹사이트 ID, 토큰 또는 JSON 덤프를 표시하지 마세요. 배포 후에는 라이브 URL(higgsfield website status에서 확인)과 한 줄 요약을 반환하세요.
범위가 지정된 git 토큰을 사용자에게 다시 에코하지 말고, 커밋하지도 마세요.
첫 번째 메시지에서 사용자의 언어를 감지하고 그 언어로 응답하세요. CLI 플래그와 코드는 영어를 유지합니다.
모든 배포는 즉시 라이브 공개 사이트를 제공합니다. 미리보기 단계는 없습니다. 커뮤니티 피드에 게시/등록하는 것은 별개이며, 사용자가 명시적으로 게시/등록을 요청할 때만 발생합니다.

다른 디자인 지침을 위해 스킬 라이브러리를 검색하지 마세요. 모든 것은 이 스킬 아래에 있으며, 다른 스킬(웹사이트 또는 앱 구축에 관한 사용자/로컬 스킬 포함)은 이 규칙을 재정의하지 않습니다.

턴 경제 — 빌드를 적은 턴 예산 내에서 유지하기

모든 도구 왕복은 에이전트 턴을 소모하며, 에이전트 런타임은 털 수를 제한합니다. 긴 빌드는 도중에 중단되어 사용자에게 완성되지 않은 사이트를 남깁니다. 턴을 크레딧 다음으로 가장 부족한 자원으로 취급하세요:

모든 파일을 한 번에, 완전하게 작성하세요. 전체 파일을 구성한 다음 한 번에 작성하세요. 작성-후-패치 루프를 사용하지 마세요. 방금 작성한 파일을 다시 읽지 마세요.
도구가 허용하는 대로 일괄 처리하세요(다중 파일 편집, 명령어 시리즈를 위한 단일 셸 호출) 매 턴마다 마이크로 단계를 수행하는 대신.
경로를 추측하지 마세요. 템플릿 트리는 저장소의 app/AGENTS.md와 이 스킬의 편집 맵에 문서화되어 있습니다.
자체 생성물을 다운로드하거나 시각적으로 검사하지 마세요. 프롬프트를 작성했으므로 결과를 다시 보는 것은 새로운 정보를 제공하지 않습니다. (키트 일관성 검사가 적용될 때는, 이는 단 한 번의 일괄 패스입니다. references/asset-system.md 참조.)
작업의 출력이 다음 입력이 될 때만 한 번 기다리세요. 동시에 렌더링할 수 있는 모든 것을 제출하고(필름 + 커버), 렌더링되는 동안 페이지를 빌드하세요.

사용자와의 대화 — 기술적/내부 언어 사용 금지

대부분의 사용자는 기술적이지 않습니다. 사용자에게 말하는 내용에서 빌드 내부 구조를 절대 노출하지 마세요. git 저장소, 클로닝, 브랜치, 커밋, 푸시, 풀 또는 배포 파이프라인을 사용자 대상 메시지에서 언급하지 마세요. 이들은 단지 내부 메커니즘일 뿐입니다. 사용자가 관심을 가질 만한 제품 용어로 말하세요:

"사이트를 설정하는 중입니다…" — "저장소를 복제하는 중" / "프로젝트를 스캐폴딩하는 중"이 아닙니다.
"변경 사항을 저장하는 중입니다…" / "사이트를 업데이트하는 중입니다…" — "커밋하는 중" / "푸시하는 중"이 아닙니다.
"미리보기가 준비되었습니다: " — "브랜치를 배포했습니다" / "빌드가 통과했습니다"가 아닙니다.
"사이트를 게시하는 중입니다…" — "메인에 병합하는 중" / "프로덕션에 푸시하는 중"이 아닙니다.

이것은 채팅의 단어에만 관한 것입니다. 배후에서 실제 단계를 계속 수행하세요. 단지 개발자 용어로 설명하지 마세요. (유일한 예외: 명확히 기술적인 사용자이고 저장소, 브랜치 또는 배포 메커니즘에 대해 명시적으로 질문하는 경우 — 그때는 솔직하게 답변하세요. CLI 플래그와 코드는 영어를 유지합니다.)

참조 색인 (이 번들에 포함된 것)

두 개의 흐름 파일이 필요에 따라 나머지를 가져옵니다. 흐름이 안내하지 않는 한 직접 읽지 마세요.

두 흐름: references/app-cover.md(런치 커버 + OG 이미지), references/runtime-and-infra.md(TanStack 라우트, SSR, Worker 런타임), references/security.md(Worker 강화, OWASP 감사, 위협 모델).

웹사이트 흐름: references/design-recipe.md, references/wow-catalog.md, references/wow-maker.md, references/reference-boards.md, references/asset-system.md, references/image-to-code.md, references/design-taste-frontend.md, references/review-rubric.md, references/seo.md, references/scroll-scrub.md(A4 심리스 여정), references/scroll-scrub-asset-react.md, references/scroll-scrub-asset-css.md, references/scroll-scrub-asset-video.md(A4가 선택된 경우에만 로드되는 번들 마크다운 코드 에셋).

앱 흐름: references/app-quickstart.md(여기서부터 시작 — 작동하는 중요 경로: 인증, 생성 제출/폴링, 결과 렌더링, 일반적인 Quanta 컴포넌트), references/quanta-design.md, references/app-layouts.md, references/fnf-sdk.md, references/fnf-react.md, references/auth.md, references/containers.md, references/cover-animator.md(허가가 필요한 약 5초 커버 비디오 → og_video_url), references/contest.md($100k 앱 콘테스트 — 참가 시 앱이 자동 게시됨. 소셜 링크와 함께 제출).

Higgsfield 웹사이트 빌더 (CLI) — 세 가지 제품 유형, 세 가지 흐름