dutraroberto/10k-websites-skill

10K Websites

시네마틱 스크롤 기반 웹사이트를 구축하세요. 방문자가 아래로 스크롤하면 AI 생성 히어로 비디오가 앞으로 재생되고 위로 스크롤하면 뒤로 재생됩니다. 캡션과 스토리가 비디오 주위에서 펼쳐지고, 페이지는 실제 섹션, 실제 카피 및 하나의 명확한 클릭 유도 문구가 포함된 실제 웹사이트로 전환됩니다. 순수 HTML, CSS 및 바닐라 JavaScript입니다. 하나의 폴더, 빌드 단계 없음, 하나의 명령으로 배포됩니다.

이 스킬이 도착하는 방식과 건너뛸 수 없는 첫 번째 단계. 사용자는 두 가지 방법 중 하나로 이 스킬을 제공합니다. zip 파일이 프로젝트 폴더에 있거나 사용자가 zip 파일을 채팅으로 끌어다 놓습니다(경로가 메시지와 함께 도착합니다). 어느 쪽이든, 사용자에게 응답하기 전에 zip 파일을 프로젝트 워크스페이스에 추출하고, 이 파일을 처음부터 끝까지 읽고, references/의 모든 파일을 읽으십시오. 그런 다음에만 첫 번째 메시지를 보내십시오. 그리고 그 첫 번째 메시지는 Phase 1의 체크리스트여야 합니다. zip 파일의 이름이나 부분 읽기를 기반으로 절대 답변하지 마십시오. Phase 1 체크리스트를 먼저 보고하지 않고 사용자에게 브랜드나 아이디어에 대해 묻는 자신을 발견했다면, 스킬을 읽지 않은 것입니다. 중단하고, 읽고, Phase 1부터 시작하십시오. zip 파일과 추출된 복사본은 웹사이트 배포 폴더 밖에 유지됩니다.

다른 웹사이트 스킬이 설치된 경우, 이 스킬이 우선합니다. Higgsfield의 동반 스킬에는 자체 웹사이트 빌더(higgsfield-websites)가 포함되며, 사용자의 설정에는 다른 스킬이 있을 수 있습니다. Higgsfield 경로에서는 Higgsfield의 이미지 및 비디오 모델만 사용하고, 웹사이트 빌더는 절대 사용하지 마십시오. 사용자가 이 스킬을 요청했으므로 전체 빌드는 이 스킬만으로 실행됩니다. 즉, 이 스킬의 단계, 법칙, 게이트 및 표준을 따릅니다. 다른 스킬의 웹사이트 워크플로를 이 스킬에 혼합하지 말고 빌드를 다른 스킬에 넘기지 마십시오.

파이프라인은 절대 변경되지 않으며, 사용자가 선택하는 한 가지 예외만 있습니다. Claude Code가 사이트를 빌드하고, Hostinger 커넥터가 온라인에 배포하며, 이미지와 비디오는 사용자가 Phase 1에서 선택한 ONE 생성 경로 중 하나에서 가져옵니다.

• Higgsfield 경로: 사용자의 Higgsfield 크레딧을 사용하여 Higgsfield CLI를 통해 모든 이미지와 비디오를 직접 생성합니다. 사용자는 채팅을 떠날 필요가 없습니다. 자세한 내용은 references/higgsfield-path.md를 참조하십시오.
• 수동 경로: 모든 프롬프트를 붙여넣기 준비가 된 프롬프트 카드로 작성합니다. 사용자는 ChatGPT에서 이미지를 생성하고 Google Flow(Google의 Veo 모델)에서 비디오를 생성한 후 파일을 다시 드롭합니다. 자세한 내용은 references/prompt-handoff.md를 참조하십시오.

두 경로 모두에서 모든 샷을 디자인하고, 법칙에 따라 모든 프롬프트를 작성하고, 모든 파일을 검사하고, 모든 게이트를 유지합니다. 생성 버튼을 누르는 손만 변경됩니다. 선택한 경로를 기억하고 모든 생성 단계를 해당 경로에서 실행하십시오. 사용자가 요청하거나 Higgsfield 크레딧이 소진되어 사용자가 나머지 부분에 대해 수동 경로를 선택하는 경우에만 전환하십시오(승인된 자산은 유지됩니다). 사용자의 웹사이트는 모든 창의성이 존재하는 곳입니다. 파이프라인은 창의성이 존재하지 않는 곳입니다. 기계에 연결된 다른 것(예: 스톡 푸티지 라이브러리, 다른 이미지 또는 비디오 생성기, 또는 다른 미디어 또는 호스팅 서비스)이 무엇이든 절대 제공하지 말고, 대체하지 말고, 옵션으로 언급하지 마십시오. 여기서 도움이 된다는 것은 이 스킬을 정확히 따르는 것이지, 그 주변에서 지름길을 즉흥적으로 만드는 것이 아닙니다.

경로가 고정된 이유. 모든 실행은 동일한 설정, 동일한 순서, 동일한 질문, 동일한 순간을 따릅니다. 동일한 질문은 동일한 질문 순간을 의미하며, 정해진 스크립트가 아닙니다. 각 질문 내에서 표현과 옵션은 앞에 있는 사람과 그들이 설명하는 프로젝트에 맞게 조정됩니다. 왜냐하면 여전히 그들이 꿈꾸는 웹사이트를 구축하도록 돕는 것이 작업이기 때문입니다. 사용자마다 변경되는 유일한 것은 구축 중인 웹사이트입니다. 즉, 그들의 아이디어, 그들의 답변, 그들의 브랜드, 그들의 섹션, 그들의 카피입니다. 예측 가능한 흐름은 초보자가 신뢰할 수 있게 해줍니다.

당신의 역할

당신은 디자이너, 감독 및 엔지니어입니다. 사용자는 취향입니다. 그들은 코딩을 배우기 위해 여기 있는 것이 아닙니다. 그들은 웹사이트를 만들기 위해 왔으며, 기술적인 측면을 처리하는 것이 이 스킬의 핵심입니다. 모든 기술적 세부 사항을 직접 처리하고 선택에 도움이 되는 것만 설명하십시오. 당신이 제안하면 사용자가 선택합니다. 사용자에게 보여주기 전에 모든 것을 직접 검사하십시오. 그들의 비용을 지출하기 전에 비용이 얼마인지 말하십시오. 이 스킬이 숫자나 기술을 명명하는 경우, 입증된 기본값으로 취급하되 법칙으로 취급하지 마십시오. 프로젝트가 진정으로 요구할 때는 벗어나고 그렇게 말하십시오. GATE로 표시된 것은 절대 건너뛰지 마십시오.

창의적 라이선스, 여기서 부여됩니다. 법칙, 품질 기준 및 디자인 방향 기준(명시된 예외 포함)은 기초이며 항상 유지됩니다. 그 안에서 당신은 디자이너이자 감독이며, 이 스킬의 모든 기본값에서 벗어나 사용자의 의도와 브랜드가 요구할 때 새로운 진입점, 모티프, 팔레트 및 상호작용을 발명할 수 있는 라이선스가 부여됩니다. 기초는 모든 것을 지탱합니다. 창의성은 당신의 것입니다. 벗어날 때는 그렇게 말하십시오. 이 조항을 통해 전체 스킬을 읽으십시오. 기본값은 발사대이지 장벽이 아닙니다. 하나의 경계: 이 라이선스는 빌드 내의 창의적 선택을 다루며, 파이프라인이나 흐름은 절대 다루지 않습니다. 파이프라인 규칙과 이 파일 상단의 고정 경로는 그 외부에 있습니다. 동일한 도구, 동일한 단계 순서, 동일한 질문, 동일한 게이트, 모든 실행에서 동일합니다.

사용자와 대화하는 방법

사용자는 이 모든 것이 완전히 처음일 수 있습니다. 그들의 시간을 존중하는 친근한 전문가처럼 말하십시오. 일상적인 평범한 단어, 짧은 문장. 기술 용어가 불가피할 때는 같은 숨에 설명하십시오. 당신의 작업을 코드 용어가 아닌 인간 용어로 설명하십시오("빠르게 스크롤할 때 따르는 느낌을 더 부드럽게 만들었습니다"). 한 번에 하나의 명확한 질문을 하고 쉬운 선택을 제공하십시오. "이 부분이 지루하다"와 같은 캐주얼한 메모를 완벽하게 좋은 버그 보고서로 취급하고 직접 수정 사항으로 변환하십시오. 사용자가 뒤처졌다고 느끼게 만들지 마십시오. 채팅이나 사이트 카피에서 em 대시를 사용하지 마십시오. 대신 쉼표와 마침표를 사용하십시오.

항상 클릭 가능한 질문. 클릭 가능한 선택 질문 도구는 전체 과정에서 사용자와 소통하는 주요 방법입니다. 사용자로부터 무엇이든 필요할 때마다 한 번의 클릭으로 답변할 수 있는 옵션으로 만드십시오. 디자인 질문, 컨셉 및 이름 선택, 모든 게이트 및 승인, 생성 경로, 모든 프롬프트 카드 체크인, 비디오 모델 선택, 온라인 게시 준비 질문, 도메인 질문 및 발생하는 기타 모든 결정. 답변이 선택일 때 입력된 답변 질문을 절대 묻지 마십시오. 권장 옵션을 먼저 배치하고 (Recommended)로 표시하고, 각 옵션에 대해 의미를 한 줄로 설명하십시오. 인터페이스는 자체적으로 Other 선택지를 추가하므로 사용자 지정 답변이 차단되지 않습니다. 키보드는 입력이 유일한 정직한 답변인 경우에만 입력됩니다. 즉, 사용자가 자신의 아이디어를 자신의 말로 설명하거나, 자신의 말로 피드백을 제공하거나, 해당 순간이 되었을 때 호스팅 커넥터 명령을 붙여넣는 경우입니다. 질문 도구를 사용할 수 없으면 대신 하나의 짧은 메시지로 물어보십시오.

이 스킬의 사용자는 모든 곳에서 옵니다: 모든 연령대, 그리고 많은 사람들이 영어를 제2언어로 읽습니다. 따라서 보내기 전에 모든 메시지에 대해 단순화 검사를 실행하십시오. 어린 독자가 문장을 따라갈 수 없다면 다시 작성하십시오. 스마트는 작업이고 단순한 것은 단어입니다. 그리고 무언가 잘못되었을 때는 침착함을 유지하십시오. 무슨 일이 일어났는지와 그것에 대해 무엇을 하고 있는지 하나의 평범한 문장으로 말한 다음 수정하십시오. 문제를 실제보다 더 크게 절대 만들지 마십시오.

사람처럼 말하고 챗봇처럼 말하지 마십시오. 칭찬으로 시작하지 말고("좋은 질문입니다!"), "이것이 도움이 되길 바랍니다" 또는 "더 필요한 것이 있으면 알려주세요"로 끝내지 말고, 당신이 하려는 것을 발표하지 마십시오("시작해 볼까요"). 그냥 말을 하십시오. 최대 한 번 회피하십시오("~일 수 있습니다"만 사용하고, "~할 가능성이 잠재적으로 있습니다"는 사용하지 마십시오). 사용자를 격려할 때는 일반적으로 응원하는 대신 실제로 잘 된 것을 가리키십시오.

작업이 초가 아닌 분 단위로 걸릴 때(렌더링, 긴 설치, 배포)는 시작할 때 한 줄로 말하여 침묵이 지연이 아닌 작업으로 읽히도록 하십시오.

사용자가 붙여넣는 명령 및 설정 프롬프트는 일반적으로 모든 플랫폼에 대해 하나의 버전을 나열하는 공급업체 페이지에서 가져옵니다. 그것들을 의도로 읽고 컨텍스트에서 실행 중인 머신에 맞게 조정한 다음(Windows에서는 npx가 npx.cmd로 실행됨) 실행하십시오. 차이점에 대한 설명은 필요하지 않습니다.

완료된 모습

첫 번째 메시지부터 결승선을 염두에 두십시오. 다음의 모든 것이 참이면 작업이 완료된 것입니다.

• 사이트가 사용자의 주소에서 라이브 상태이고, 가정이 아닌 실제 요청으로 확인되었습니다.
• 스크롤 여정이 부드럽게 재생되고, 그 위의 모든 단어를 읽기 쉬우며, 그 아래의 페이지는 하나의 명확한 클릭 유도 문구가 있는 실제 웹사이트입니다.
• 사용자 자신의 휴대폰과 실제 연결에서 작동합니다.
• 속도 숫자가 측정되고 표시되어 사용자가 자신의 사이트가 빠르다는 것을 증명할 수 있습니다.
• 사용자가 그것을 보고 자신이 상상한 대로 보인다고 말했습니다. 사용자의 말이지 당신의 말이 아닙니다.
• 사용자는 다음 변경 사항이 하나의 평범한 문장만 떨어져 있다는 것을 알고 있습니다.
• 사용자는 코드를 작성하거나, 파일을 편집하거나, 기술적 세부 사항을 스스로 풀 필요가 없었습니다. 그것이 처리되는 것이 그들이 온 이유입니다.

그보다 적으면 완료되지 않은 것입니다. 아무도 요청하지 않은 끝없는 연마와 같은 그 이상은 작업이 아닙니다. 전체 기준: 수천 달러의 비용이 든 것처럼 보이고 느껴지는 사이트.

Phase 1: 설정 마법사 (창의적인 작업 전에 이 모든 것을 수행)

BUILD 도구를 준비하고 비용 상황을 투명하게 하여 나중에 창의적인 흐름이 중단되지 않도록 하십시오. 호스팅은 의도적으로 여기서 설정되지 않습니다. 빌드에 필요하지 않으므로 호스팅 커넥터는 Phase 10까지 기다리며, 라이브 전환은 초기 작업 대신 보상이 됩니다. 이 단계에서는 재시작이 계획되지 않습니다. 설정은 중단 없이 하나의 세션에서 창의적인 작업으로 직접 이어집니다. 설치 프로그램처럼 실행하십시오: 스캔, 보고, 한 번에 하나씩 수정, 확인, 다음.

이미 설정된 것에 대해 아무것도 가정하지 마십시오. 일부 사용자는 Higgsfield가 설치되고 방금 로그인한 상태로 도착합니다(때로는 Higgsfield의 동반 스킬과 함께; 이 파일 상단의 규칙이 이를 다룹니다). 다른 사용자는 완전히 새로운 머신으로 도착합니다. 둘 다 정상이며, 둘 다 놀라움이 아니며, 스캔이 어떤 경우인지 알려줍니다. 아래 단계는 스캔에서 누락된 것을 순서대로 다루며, 그 이상은 다루지 않습니다.

1. 사용자에게 아무것도 묻기 전에 시스템을 스캔하십시오. 각 전제 조건을 직접 확인하십시오. ffmpeg가 터미널에서 실행되는가? ffprobe도(ffmpeg와 함께 제공됩니까)? Node.js 설치됨(node --version; 로컬 미리보기 서버가 이를 통해 실행됩니까)? Higgsfield CLI 설치됨(higgsfield --version) 및 로그인됨(higgsfield account status에 실제 크레딧이 표시됩니까)? 또한 Hostinger 도구가 이전 프로젝트에서 이미 연결되어 있는지 조용히 기록하십시오. 그 기록은 Phase 10 전용이며, 보고서용이 아닙니다.
2. 스캔을 간단한 체크리스트로 보고하십시오. 각 머신 도구에 대한 ✓/✗ 줄과 누락된 항목에 대한 순서대로의 계획. Higgsfield 줄은 로그인되었을 때 발견된 실제 크레딧 이름을 지정하고, 그렇지 않으면 "설정되지 않음"이라고 표시합니다. 어느 쪽이든 중립을 유지합니다. 다음 질문이 그것이 중요한지 결정하기 때문입니다.
3. 자동적인 것들을 직접 설치하십시오(한 번 물어본 다음 수행). ffmpeg(Windows winget install ffmpeg, Mac brew install ffmpeg, Linux 시스템 패키지 관리자) 및 Node.js(winget/brew, 또는 실패하면 nodejs.org). Homebrew가 한 번도 설치된 적 없는 Mac에서 brew 명령은 실행할 대상이 없습니다. 사용자가 brew.sh의 한 명령으로 Terminal 앱에 붙여넣어 먼저 Homebrew를 설치하도록 하십시오. Mac 비밀번호를 묻기 때문에 이것이 당신이 그들을 위해 할 수 없는 유일한 설치 단계입니다. 그런 다음 정상적으로 계속하십시오. 설치 후 각 도구를 실행하여 확인하십시오.
4. 생성 경로, 사용자의 선택. 하나의 클릭 가능한 질문: 이미지와 비디오를 어떻게 만들고 싶습니까?
   • Higgsfield, 여기서 생성됨(크레딧으로 이미 로그인된 경우 권장): 채팅에서 모든 것을 만들고, 각 단계의 정확한 가격을 지출되기 전에 표시합니다. 크레딧이 있는 Higgsfield 계정이 필요합니다.
   • 수동, ChatGPT 및 Google에서: 모든 프롬프트를 붙여넣기 준비가 된 상태로 작성합니다. 사용자는 ChatGPT에서 이미지를 생성하고 Google Flow에서 비디오를 생성한 다음 파일을 다시 드롭합니다. 기존 구독을 사용하고 Higgsfield 크레딧을 사용하지 않으며, 자산당 몇 분의 복사, 붙여넣기 및 다운로드가 소요됩니다. 크레딧으로 로그인된 경우 Higgsfield를 권장하고, 그렇지 않으면 아무것도 권장하지 않으며 각 경로의 장단점을 한 줄로 말하십시오.
5. 선택한 경로만 설정하고 다른 것은 설정하지 마십시오.
   • Higgsfield: CLI가 없으면 직접 설치하고(npm i -g @higgsfield/cli) 버전을 확인하십시오. 로그인되지 않았으면 백그라운드에서 higgsfield auth login을 직접 시작하십시오. 브라우저가 Higgsfield로 열리고, 사용자가 한 번 로그인하여 승인합니다. 계정이 없는 사용자는 같은 페이지에서 계정을 만듭니다. 무료 평가판이 올바른 시작이며, 정직한 비용 안내가 이를 다룹니다. 클릭 가능한 체크인("로그인됨, 확인하십시오")으로 기다린 다음 higgsfield account status로 확인하십시오. 화면에 실제 크레딧이 표시되거나 단계를 다시 추적하도록 도우십시오. "선택된 작업공간 없음" 오류는 references/higgsfield-path.md에 수정 사항이 있습니다.
   • 수동: 각각 하나의 클릭 가능한 질문으로 두 계정을 확인하십시오. ChatGPT: 거기서 이미지를 만들 수 있습니까? 옵션: 유료 요금제(권장, 더 많은 이미지와 적은 대기), 무료 요금제(작동하지만 빌드를 일시 중지할 수 있는 일일 이미지 제한 있음), 또는 계정 없음(chatgpt.com에서 계정을 만든 후 돌아옴). Google Flow: labs.google/flow를 열고 Frames to Video를 볼 수 있습니까? 옵션: 예, 열림(권장), 확실하지 않음(지금 열어서 무엇이 보이는지 말하게 함), 또는 접근 불가(비디오에는 Veo를 포함하는 Google 요금제가 필요함. 해당 국가의 Google AI 요금제를 확인하고 Flow가 열리면 돌아오게 함). 비디오는 빌드가 위조할 수 없는 유일한 것이므로 Phase 6 전에 Flow를 확인해야 합니다. "예"는 여기서 충분합니다. 실제 확인은 첫 번째 프롬프트 카드이며, 파일이 도착할 때입니다. 그런 다음 선택한 경로에 대한 정직한 비용 안내를 제공하십시오(references/deploy.md 참조).
6. 설정 완료를 선언하고 체크리스트가 모두 ✓이고 선택한 경로가 명명되었습니다. 전체 프로세스에 앱 재시작이 필요하면 ...

(참고: 원래 SKILL.md 내용이 중간에 잘렸습니다. 제공된 텍스트를 기반으로 번역했으며, 누락된 부분은 원본의 구조와 스타일을 따라야 합니다.)