멋진 웹사이트은(는) 무엇을 하나요?

기본값

사용자가 명시적으로 다른 언어를 요청하지 않는 한 웹사이트 언어는 영어입니다. 네비게이션, 제목, 본문, 버튼, 폼, 유효성 검사 및 성공 메시지, 대체 텍스트, 접근성 레이블, 메타데이터, 생성된 다운로드가 모두 포함됩니다. <html lang="en"> (또는 대상 시장에 따라 en-GB와 같은 일치하는 지역 태그)을 설정하세요. 고유 명사는 보존하세요.
기본적으로 Codex의 통합 image_gen 도구를 사용하여 래스터 이미지를 생성하고 편집합니다. 사용 가능한 imagegen 스킬 및 현재 도구 스키마를 따르세요. 외부 이미지 API 키가 필요하지 않습니다. 적합할 때 제공된 에셋을 사용하세요.
생성된 비디오의 경우 공식 Higgsfield API가 기본값이고 kie.ai가 두 번째 옵션입니다. 사용자의 선택을 존중하세요. 그렇지 않으면 COOL_WEBSITE_VIDEO_PROVIDER (기본값 higgsfield)를 사용하세요. Higgsfield는 references/higgsfield-api.md의 REST 워크플로우를 사용합니다. KIE는 scripts/kie.mjs shot을 사용합니다. 사용자에게 Higgsfield 계정이 아직 없으면 https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus 에 가입하도록 안내하세요. .env.example을 사용하여 선택한 공급자만 구성하세요. 절대 공급자를 자동으로 전환하거나 이미지 생성 대체 수단으로 사용하지 마세요.
모든 브라우저 제어 및 시각적 검증은 mcp__cua_repl을 통해 통합 브라우저를 사용합니다.
첫 번째 인터뷰 라운드 직후, 페이지 구조를 고정하거나 카피를 작성하거나 에셋을 생성하기 전에 선택적 DataForSEO 기반 SEO를 제공하세요. 선택한 경우 references/seo-dataforseo.md를 따르세요. 리서치가 거부된 경우에도 기본 시맨틱 HTML 및 메타데이터를 유지하세요.
Cool Website는 스킬 이름이며, 클라이언트의 브랜드가 아닙니다. 사이트에 스킬 브랜딩, 제작자 크레딧, 샘플 브랜드 이름 또는 승인 주장을 추가하지 마세요. 제공된 LICENSE 파일과 엔진/소프트웨어 사본을 보관하세요.

스크롤은 모든 방문자가 이미 사용법을 아는 유일한 입력입니다. 이 스킬은 스크롤을 타임라인으로 취급합니다. 휠은 스크러버이고, 페이지는 실제 텍스트가 위에 있는 필름이며, 각 섹션은 방문자가 계속해서 다음 섹션이 무엇인지 알아내고 싶을 만큼 다르게 동작합니다.

제공하는 것: 인터뷰 브리핑, 페이지 문법, 고객 여정 지도, 하나의 설계된 정점이 있는 감정 곡선, 스크롤 점수, 하나의 시그니처 동작, 생성된 에셋, 토큰 기반 디자인 플로어 위의 실제 HTML 페이지, 모든 스크롤 위치에서 페이지가 유지됨을 증명하는 스크린샷 스트립.

이것이 아닌 것

"플라이스루를 생성하고 텍스트를 입히는" 방식이 아닙니다. 그 접근 방식은 하나의 장치를 전체 페이지에 적용하며, 그렇게 만들어진 모든 사이트는 한눈에 알아볼 수 있습니다. 동일한 클레이메이션 디오라마, 동일한 중앙 정렬 카피, 동일한 01 / 06 카운터, 동일한 "스크롤하여 탐색" 안내. 동일하게 동작하는 5개의 섹션은 하나의 섹션을 다섯 번 보여주는 것과 같습니다.

그로부터 네 가지 규칙이 도출되며, 이것이 이 스킬의 핵심입니다:

다양성이 제품입니다. 페이지는 최소 네 가지 장치 제품군을 사용하며 같은 장치를 연속해서 두 번 사용하지 않습니다. references/devices.md를 읽으세요.
브랜드가 실제로 일러스트 스타일이 아니라면 세계는 사진과 같아야 합니다. 부드러운 무광 로우폴리 클레이 디오라마는 기본값으로 금지됩니다. references/worlds.md를 읽으세요.
연속 체인 금지. 하나의 끊기지 않는 카메라 비행은 만들 수 있는 가장 비용이 많이 들고 가장 깨지기 쉬운 것이며, 장면 간 컷을 숨기기 위해서만 존재합니다. 대신 장치를 다양화하면 방문자가 하나의 영화를 보고 있지 않기 때문에 컷이 무료로 사라집니다. 브리핑이 말 그대로 "하나의 연속 여정"인 경우에만 체인을 사용하세요.
다른 세계가 다른 페이지는 아닙니다. 장치 키트는 페이지의 모양을 다양하게 만듭니다. 구조는 별개의 축이며 의도적으로 결정되어야 합니다. 그렇지 않으면 모든 빌드가 동일한 뼈대를 상속합니다. 처음 네 개의 빌드가 정확히 그렇게 했습니다. references/uniqueness.md를 읽으세요.

히어로 구성

입체적 레이어링은 프리미엄 마케팅 히어로의 기본 요구 사항입니다. 에셋을 요청하기 전에 독립적으로 움직이는 배경, 피사체, 전경 및 대기 평면을 계획하세요. 텍스트 페이드가 있는 아름다운 단일 배경은 이 선호도를 충족시키지 못합니다. 깊이는 가시적인 분리, 폐색 및 움직임의 제어된 차이에서 비롯되어야 하며, 헤드라인은 읽기 쉬워야 하고 장면은 하나의 명확한 이야기를 전달해야 합니다.

히어로를 계획하거나 에셋을 생성하기 전에 references/hero-depth.md를 읽으세요. 깨끗한 플레이트, 진정한 알파 컷아웃, 공유 접촉 앵커, 평면 간 타이포그래피, 절제된 스크롤 안무, 모바일 아트 디렉션 및 시각적 승인을 다룹니다. 선택한 문법에 맞는 구성을 사용하세요. 예제 장면을 반복하거나 금지하는 문법에 고정을 적용하지 마세요. 명시적인 정적 또는 더 단순한 지시를 존중하고, 움직임이 줄어들 때 정적 구성에 깊이를 유지하세요.

디자인 및 전달 표준

마케팅 사이트를 계획하기 전에 references/design-standard.md를 읽으세요. 브랜드 리서치, 독립적인 시각적 레이어, 유용한 상호작용, 모바일 구성 및 최종 브라우저 확인을 다룹니다. 이러한 원칙은 맞춤형 페이지를 안내합니다. 고정된 페이지 템플릿이 아닙니다.

0단계: 브리핑 및 창작 권한

무엇이든 생성하기 전에 브리핑을 수립하세요. 이미 제공된 답변과 에셋을 재사용하세요. 사용자가 명시적으로 창작 방향을 위임할 때(예: "당신의 판단에 맡깁니다" 또는 "방해하지 않겠습니다"), 명시적 창작 위임 하에 자체 작성 브리핑을 작성하고 진행하세요. 아래 여덟 가지 주제를 다루고, 증거와 가정을 구별하며, 사용자 인용을 만들거나 다른 인터뷰/승인 체크포인트를 강요하지 마세요.

그렇지 않으면 누락된 결정에 대해 인터뷰하세요. 실제 질문을 하고, 답변을 기록하며, 이름만으로 전체 브랜드를 추론하지 마세요.

첫 번째 라운드에서 제안, 대상, 주요 방문자 행동 및 기존 웹사이트/도메인이 알려지지 않은 경우 포함하세요. 아래 여덟 가지 디자인 주제를 적용 목록으로 취급하세요. 관련 주제를 그룹화하고 라운드당 최대 세 개의 짧은 질문을 하세요. 첫 번째 답변 후, 추가 디자인 세부 사항을 묻기 전에 0a단계를 제공하세요. 디자인 및 SEO 인터뷰 전반에 걸쳐 사실을 재사용하세요.

이 스킬은 하우스 스타일이 아니라 범위 도구입니다. 인간은 의도와 소유한 모든 에셋을 가져옵니다. 인터뷰는 그것이 올바른 종류의 페이지로 전환되는 곳입니다. 하나의 끊기지 않는 세계, 별개의 장면, 인쇄된 챕터, 라이브 표면. 이 스킬은 그 중 어떤 것이든 할 수 있습니다. 인터뷰가 결정합니다.

한 번에 모든 여덟 가지 질문을 강요하지 않고 다음 여덟 가지 주제를 다루세요:

세 단어에서 다섯 단어로 된 분위기, 그리고 어떤 매체에서든 최대 3개의 참고 자료. 영화, 앨범 커버, 상점, 잡지, 게임. "좋아하는 사이트"가 아닙니다. 사이트 이름을 지정하는 것은 페이지가 기존 사이트처럼 보이게 하는 방법입니다.
스크롤 여정, 그들의 말로 섹션별로. 방문자가 먼저 무엇을 봐야 하는지, 그 다음은 무엇인지, 마지막은 무엇인지. 당신이 제공한 메뉴가 아닌 그들의 순서.
에너지 곡선. 어디가 차분해야 하고 어디가 강렬해야 하는지. 내내 시끄러운 페이지는 내내 조용한 페이지만큼 평평합니다.
스크롤하는 동안 단계별로 어떻게 느껴야 하며, 기억해야 할 '한 순간'은 무엇인가요? 에너지는 크기입니다. 이것은 감정이며, 둘은 일치하지 않습니다. 시끄러운 페이지에서 조용한 행동이 가장 강렬할 수 있습니다. 단계별 답변은 감정 곡선이 되고, 한 순간은 정점이 됩니다. 둘 다 BRIEF.md에 필요합니다. references/feel.md를 참조하세요.
이 사이트가 그들이 본 어떤 사이트도 하지 않는 한 가지 일. 이것이 시그니처 동작의 씨앗입니다. 실제 답변을 요구하세요. "기억에 남는 것"은 답변이 아닙니다.
프리미엄 미니멀에서 얼마나 벗어나고 싶은지. uniqueness.md §5의 범위를 제공하세요: 브루탈리스트, 맥시멀리스트, 장난기 있는, 레트로, 조밀한, 에디토리얼, 프리미엄-미니멀. 그들의 답변이 미학적 제품군을 결정하며, 당신의 취향이 아닙니다.
하나의 끊기지 않는 세계, 아니면 별개의 장면? 전체 페이지가 스크롤이 통과하는 하나의 연속된 장소처럼 느껴져야 합니까(Worldflight, references/worldflight.md 참조), 아니면 별개의 장면, 챕터 또는 컷처럼 느껴져야 합니까? 이것은 가장 큰 구조적 분기이며, 나중에 선택하는 장치가 아닌 그들의 결정입니다. 둘 다 명확하게 제공하세요. 어느 쪽도 기본값이 아닙니다.
그들이 이미 가지고 있는 에셋은 무엇인가요? 푸티지, 사진, 제품 샷, 브랜드 키트, 자신의 클립. 실제 에셋은 세계를 고정하고 생성 비용을 줄입니다. 답변은 등급이 매겨지고 인코딩되는 것과 생성되는 것을 결정합니다. "없음"은 좋은 답변이며 완전히 생성된 세계를 의미합니다.

액트 계획 전에 사용자의 말 그대로, 마케팅 문구로 의역하지 말고, <workspace>/builds/<name>/BRIEF.md에 답변을 작성하세요. 이후 모든 다운스트림은 해당 파일을 읽습니다.

BRIEF.md에는 최소한 다음이 포함되어야 합니다:

여덟 가지 주제, 공급된 사용자 답변은 그대로, 위임된 결정은 명확히 표시된 자체 작성.
감정 곡선. 액트당 한 줄: 감정, 그리고 화면에서 그 원인이 되는 것. 액트가 존재하기 전에 작성되고, 점수가 채워짐에 따라 추가됩니다.
정점. 한 순간, 방문자가 친구에게 말할 문장으로 작성되고, 어떤 액트에 있는지.
완성된 tell-someone 문장. "그 사이트는 ___ 하는 곳이야", 경험으로 채워지고 장치 이름이 아닙니다.
죽은 스크롤과 구분할 수 있도록 인증 패스를 위한 모든 작성된 정지.

references/feel.md는 이 네 가지 모두에 대한 사양입니다.

사용자가 진정으로 연락이 닿지 않고 실행이 완전히 자율적인 경우 BRIEF.md를 직접 작성하세요. 브랜드의 목소리로 여덟 가지 질문에 모두 답하고, 파일 상단에 자체 작성, 인터뷰되지 않음 표시를 하고, 최종 보고서에 그렇게 말하세요. 위임 없이 자체 작성된 브리핑은 대체 수단입니다. 위의 명시적 위임은 정상적인 지원 워크플로우이며 사용자가 연락이 닿지 않을 필요가 없습니다.

0a단계: 초기 SEO 선택

첫 번째 인터뷰 답변 후, (사용자의 언어로) 물어보세요: "Google에 최적화된 웹사이트를 만들어 드릴까요? DataForSEO를 사용하여 관련 검색어와 경쟁사를 확인하고 결과를 페이지 구조와 카피에 바로 반영할 수 있습니다." 제안: "예, DataForSEO로", "기술적 기본만", "나중에". 사용자가 이미 SEO를 선택한 경우 이 질문을 건너뛰세요. 창작 위임만으로는 외부 서비스를 설치하거나 API 비용을 사용할 권한이 부여되지 않습니다.

예의 경우, seo-dataforseo.md를 따르세요: 집중 인테이크를 완료하고, MCP를 연결하거나 설치를 제안하고, 연구 예산을 설정하고, 선택한 시장을 연구한 다음 빌드 전반에 걸쳐 결과를 사용하세요. 설정/인증 및 비용 안내에 대해서만 dataforseo-setup.md를 읽으세요. 서버 URL만으로 원격 연결을 식별하기에 충분합니다. 계정 인증은 여전히 완료되어야 합니다.

BRIEF.md에 SEO: 활성화됨 | 기본만 | 연기됨 | 차단됨을 기록하고, 활성화된 경우 대상 시장과 예산을 기록하세요. 기본만 또는 연기됨의 경우 MCP 설치나 유료 연구 없이 계속하세요. 연결이 차단된 경우 독립적인 디자인 및 기술 작업을 계속하고, 키워드 결정을 잠정적으로 표시하세요. 보류 중인 DataForSEO 연구를 완료된 것으로 제시하지 마세요.

부트스트랩

환경이지 작업 단계가 아닙니다. 인터뷰가 완료되고 1단계 전에 한 번만 수행하세요.

수동 확인 대신 사전 점검을 실행하세요. 그렇지 않으면 나중에 오해의 소지가 있는 오류로 표면화되는 실패 모드를 알고 있습니다. 주로 명령의 구문 오류로 누락된 필터를 보고하는 손상된 ffmpeg입니다:

node <skill>/scripts/doctor.mjs

Node, 전체 ffmpeg 빌드, 선택적 API 키 및 확인된 작업 공간을 보고합니다. 비디오 생성이 계획된 경우에만 --video를 추가하세요. 필수 실패는 0이 아닌 값으로 종료됩니다. 브라우저 제어 및 검증은 mcp__cua_repl을 통해 Codex의 통합 브라우저를 사용합니다. 이 스킬에는 별도의 브라우저 자동화 패키지나 로컬 브라우저 실행 파일이 필요하지 않습니다.

작업 공간

빌드 및 지문 레지스트리는 하나의 디렉토리에 있으며, 추정되지 않고 확인됩니다:

node <skill>/scripts/workspace.mjs --ensure     # 경로를 출력하고, 생성하고, 레지스트리를 시드합니다.

확인 순서, 처음 일치하는 항목이 사용됩니다:

COOL_WEBSITE_HOME
cwd에서 위로 올라가며 가장 가까운 .cool-website.json, { "workspace": "..." }
<프로젝트 루트>/cool-website, 여기서 프로젝트 루트는 .git을 포함한 가장 가까운 상위 디렉토리

따라서 빌드 폴더는 <workspace>/builds/<name>/이고 레지스트리는 <workspace>/FINGERPRINTS.md입니다. 레지스트리는 비어 시작합니다. 게이트는 반복을 막기 위해 존재하므로 첫 번째 빌드에서는 지울 것이 없습니다.

이미 다른 곳에 빌드를 유지하고 있다면, 프로젝트 루트에 .cool-website.json을 놓고 그것을 가리키면 아무것도 이동하지 않습니다.

나머지

이미지는 통합 이미지 모델을 사용합니다. 외부 키가 필요하지 않습니다. 생성된 비디오의 경우 .env.example을 웹사이트 프로젝트 루트에 .env로 복사하고 선택한 공급자만 채운 다음 doctor.mjs --video를 실행하세요. --provider higgsfield|kie는 이 확인을 위해 구성된 공급자를 재정의합니다. Higgsfield(기본값)는 HF_API_KEY_ID와 HF_API_KEY_SECRET 및 잔액/가격 책정을 위한 콘솔을 사용합니다. 새 계정은 https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus 에서 가입합니다. KIE는 KIE_AI_API_KEY와 scripts/kie.mjs probe를 사용합니다. references/assets.md를 따르세요. 공급자, 모델 및 승인된 예산을 BRIEF.md에 기록하세요. 제공된 푸티지에는 API 호출이 필요하지 않습니다.
브랜드 키트(색상, 로고, 서체, 기존 제품 샷)가 있는 경우. 브랜드가 이 저장소에 폴더를 가지고 있으면, 무엇이든 생성하기 전에 읽고 하드 룰을 준수하세요. 발명된 숫자를 금지하는 브랜드는 아무리 좋아 보여도 통계 카운터가 없음을 의미합니다.

engine/cool-website.js, engine/cool-website.css 및 LICENSE를 빌드 폴더에 복사하세요. 프로젝트별로 엔진을 절대 편집하지 마세요. 이것은 th

…

[번역을 위해 잘렸습니다]

멋진 웹사이트