Kc1t/sites-pixel-perfect

픽셀 퍼펙트 사이트 (Sites pixel perfect)

AI 사이트가 평범해 보이는 이유는 세 가지입니다: 모호한 계획, 스톡 이미지 에셋, 결과물을 확인하지 않기 때문입니다. 이 스킬은 세 가지를 모두 해결합니다. 에셋은 Higgsfield에서 맞춤 생성되고, 계획은 모든 것에 수치가 명시된 픽셀 퍼펙트 프롬프트이며, 결과물은 전달 전에 프린트로 확인합니다.

항상 순서대로 단계를 따르세요.

1. 요청을 읽고 결정하기 (질문하지 않기)

다섯 가지를 결정하고, 선택한 내용을 짧은 메시지로 알리세요.

• 대상 및 대상자: 제품이나 인물, 그리고 페이지가 누구를 설득하려는지.
• 분위기를 세 단어로 (예: "조용함, 고급스러움, 야간").
• 효과는 하나만, 페이지의 시그니처가 됩니다 (레시피는 references/efeitos.md 참조):
  • 커서 (cursor): 캐릭터가 마우스를 따라 고개를 돌립니다 (마우스로 제어되는 비디오).
  • 손전등 (lanterna): 커서가 원형 조명을 열어 이미지 내부를 보여줍니다.
  • 루프 (loop): 사진이 루프 비디오로 바뀌며, 레이어에 패럴랙스가 적용됩니다.
• 출력: index.html 하나만 (기본값), 또는 픽셀 퍼펙트 프롬프트만 (프롬프트만 요청한 경우).
• 범위: 히어로만 (기본값) 또는 전체 랜딩 페이지.

답변 없이 진행할 수 없는 경우에만 질문하세요 (예: 실제 브랜드 이름).

2. Higgsfield에서 에셋 생성하기

에셋이 페이지를 고급스럽게 보이게 만듭니다. 선호도 순서:

1. 사용자의 에셋.
2. Higgsfield에서 생성, MCP를 통해, 선택한 효과의 레시피(references/efeitos.md 참조)에 따라.
3. 생성이 불가능한 경우: 타이포그래피와 움직임만으로 페이지 구성. 절대 회색 박스, 스톡 이미지, 또는 가상의 URL을 사용하지 마세요.

모든 효과에 적용되는 규칙:

• 이미지 먼저, 비디오는 나중에. 이미지는 적은 크레딧이 들고, 비디오는 수십 개가 듭니다. 이미지가 확정된 후에만 비디오를 생성하세요. 비디오 생성 전에 비용을 알리세요.
• 두 번째 이미지는 항상 첫 번째 이미지의 편집본 (Nano Banana가 기본 이미지를 편집), "keep everything identical"로 변경할 부분만 다르게 합니다. 처음부터 다시 생성하면 모든 것이 어긋납니다.
• 방향은 이미지 가장자리를 기준으로 ("head turned toward the LEFT edge of the image"). "그의 왼쪽"이라고 하면 모델이 잘못 이해합니다.
• Nano Banana는 한 번에 하나의 작업만 처리합니다. 하나를 보내고 끝날 때까지 기다린 후 다음을 보내세요. 두 개를 동시에 보내면 한도 초과 오류가 발생합니다.
• 텍스트를 위한 절반은 비워둠: 주제를 한쪽에 배치하고, 다른 쪽은 깔끔하게 둡니다.
• 이미지 배경 = 페이지 배경. 이미지 가장자리의 헥스 색상을 기록합니다. 그것이 --bg가 됩니다.

3. 픽셀 퍼펙트 프롬프트 작성하기

다음 순서대로 8개 부분으로 프롬프트를 작성하세요. 모델은 references/especificacao.md에 있습니다: 서체, 색상, 에셋, 구조, 애니메이션, JavaScript, 반응형, 점검.

모든 값은 수치로 표시합니다. "예쁜 그라데이션"이나 "부드러운 애니메이션"은 없습니다: 모든 형용사에는 그것을 만들어내는 숫자가 함께 와야 합니다. 페이지의 실제 텍스트(제목, 부제목, 내비게이션, 버튼)도 작성하세요.

프롬프트만 요청받은 경우, 그것이 결과물입니다. references/revisao.md로 확인하고 여기서 중단하세요.

4. 조립하기

프롬프트가 지정한 대로 정확히 조립하세요:

• <style>과 <script>가 포함된 하나의 index.html, 폰트는 링크로, CDN 라이브러리는 버전이 고정된 것.
• CSS의 첫 번째 규칙은 html, body에 배경을 설정하여 흰색 깜빡임이 없도록 합니다.
• 시맨틱 HTML, 실제 <title>, alt, 가시적 포커스, prefers-reduced-motion 존중.
• 모바일(마우스 없음) 및 동작 축소 모드에서는 효과가 정지된 예쁜 프레임으로 유지됩니다.
• 로렘 입숨, 플레이스홀더 박스, 이모지를 아이콘으로 사용하지 마세요.

5. 보고 수정하기 (필수)

데스크탑(1440×900)과 모바일(390×844)에서 페이지 스크린샷을 찍고 스크린샷을 확인하세요. Playwright 사용: npx playwright screenshot --viewport-size=1440,900 index.html desktop.png. 스크린샷 도구가 없으면 페이지가 시각적으로 확인되지 않았다고 말하고 references/revisao.md에 따라 코드를 다시 검토하세요.

references/revisao.md의 기준으로 점수를 매기고, 가장 약한 세 가지 항목을 구체적인 값으로 수정한 후 다시 스크린샷을 찍으세요. 최대 세 번 반복하거나, 평균이 8점을 넘고 모든 항목이 7점 이상이 될 때까지.

6. 게시하기 (요청 시)

Higgsfield MCP가 .higgsfield.app 주소로 사이트를 업로드합니다 (create_website 및 deploy_website; 자세한 단계는 get_workflow_instructions에서 website-builder-flow를 참조). 모든 배포는 바로 공개됩니다: 미리 알리고, 사이트에 키나 개인 데이터를 남기지 마세요.

7. 전달하기

• 파일과 여는 방법.
• 최종 데스크탑 스크린샷.
• 효과와 선택 사항에 대한 두세 줄.
• Higgsfield에서 사용된 크레딧, 에셋별로.
• 임시적인 것이 있다면 무엇을 바꿔야 하는지.

파일

• references/efeitos.md: 세 가지 레시피, 생성 프롬프트 및 코드 포함.
• references/especificacao.md: 8개 부분으로 된 픽셀 퍼펙트 프롬프트의 모델.
• references/revisao.md: 점수 기준과 수정 주기.

구조 (요청 → 미디어 → 명세 → 조립 → 스크린샷)는 MotionSites Web Builder에서 가져왔으며, MIT 라이선스(LICENSE.md 참조)입니다. 프롬프트, 레시피, 그리고 이 스킬의 코드는 당사의 소유입니다.