site-inspirado은(는) 무엇을 하나요?
평범한 사이트와 기억에 남는 사이트를 가르는 것은 코드가 아니라 과정입니다: 시각적 참조 → 질문 → 조사 → 동일 스타일의 이미지 → 움직임이 있는 페이지 → 사용자가 여전히 버튼을 찾을 수 있는지 확인.
S=<이 스킬 폴더> · T=<사이트 폴더> (사이트당 하나; 사용자가 지정한 폴더 사용, 예: ~/meu-site; 지정이 없으면 ~/projetos/output/site-inspirado/<slug>). 항상 T 내에서 작업하세요.
최종 사이트는 INEMA의 시각적 스타일(검정과 노랑)을 사용하지 않습니다. 스타일은 사용자의 참조 이미지에서 비롯됩니다. INEMA 시각적 스타일은 키트 가이드에만 적용됩니다.
6단계 (순서대로, 각 단계마다 검문소가 있음)
| # | 단계 | 결과물 | 검문소 |
|---|---|---|---|
| 1 | 참조 | T/refs/ (2~5장의 이미지) | 사용자가 이 분위기가 맞다고 확인함 |
| 2 | 질문 + 조사 | T/BRIEF.md | 올바른 블록의 모든 질문이 답변됨; 지어낸 내용 없음 |
| 3 | 스타일 | T/estilo.json | 측정된 팔레트 + 참조를 보고 작성한 prompt_estilo; 텍스트 대비 ≥ 4.5 |
| 4 | 이미지 | T/img/*.jpg + T/img/folha.jpg | 시트를 확인함: 동일한 스타일, 그려진 글자 없음, 비뚤어진 손 없음 |
| 5 | 페이지 | T/index.html | 메인 버튼에 data-cta 속성; movimento.js를 통한 전환 효과 |
| 6 | 검문소 + 게시 | 검문소 보고서, 사진 | portao.js가 0으로 종료됨; 그 후 게시 (GitHub Pages / 고객의 Vercel) |
1. 참조 이미지
2~5장의 이미지를 요청하세요: 사용자가 이미 가지고 있는 것(초대장, 로고, 매장 사진) + 영감(핀터레스트: "site padaria", "wedding website watercolor"). 사용자가 가지고 있지 않으면 Codex(image_gen)로 2장을 생성하고 진행하기 전에 보여주세요. T/refs/에 저장하세요.
2. 질문과 조사 (아무것도 생성하기 전에)
AI(또는 직접)에게 이렇게 말하세요: "아무것도 생성하기 전에, 필요한 모든 것을 나에게 묻고 이런 유형의 사이트가 일반적으로 무엇을 포함하는지 조사하세요." 사이트 유형(이벤트, 지역 비즈니스, 서비스/컨설팅, 포트폴리오)에 맞는 referencias/perguntas.md 블록을 사용하세요. 실제 사실(오는 방법, 계절 날씨, 근처 명소)을 조사하고 BRIEF에 사용자에게서 온 것과 조사에서 온 것을 표시하세요. BRIEF에서 사이트 유형을 결정하세요: negocio (목표가 행동: 주문, 예약, 전화) 또는 visual (이벤트, 포트폴리오, 초대장: 더 많은 움직임 허용).
3. 측정된 스타일
python3 $S/scripts/estilo.py T/refs T/estilo.json --prompt "<참조를 보고 영어로 된 스타일 설명>"
스크립트가 팔레트를 측정하고 계산된 대비와 함께 배경/잉크/강조 색상을 제안합니다. 최종 색상은 직접 결정합니다 (대비가 4.5 미만이면 잉크를 어둡게). prompt_estilo는 기법 + 조명 + 팔레트를 설명합니다 (예: "loose watercolor on cotton paper, burgundy, sage and cream, thin gold ink accents").
4. 동일한 스타일의 이미지
T/plano.json을 작성하고 (각 이미지 한 줄: nome, 주제에 대한 prompt, largura, altura) 생성하세요:
python3 $S/scripts/imagens.py T/plano.json T/estilo.json T/img --refs T/refs
각 이미지는 참조 이미지와 첫 번째 생성된 이미지(앵커)를 참조로 받습니다: 시리즈가 동일한 스타일로 출력됩니다. 한 번에 하나씩 생성하며, 여유 메모리가 30GB 아래로 떨어지면 스크립트가 대기합니다. T/img/folha.jpg를 열고 어울리지 않는 이미지는 --so nome으로 다시 생성하세요. 사람: 뒷모습이거나 풍경 속에서 작게 (실제 신랑 신부의 얼굴을 지어내는 것은 속임수입니다).
비디오 엔진(이미지에서 애니메이션 클립: Kling, Magnific 등)은 선택 사항이며, 해당 서비스에 대한 사용자의 허가가 있을 때만 사용합니다. 허가가 없으면 움직임은 코드로 처리됩니다 (5단계).
5. 움직임이 있는 페이지
주제에 맞게 디자인된 사이트당 한 페이지 (다른 파일을 절대 복사하지 마세요). 다음을 사용하세요:
cp $S/runtime/movimento.js T/및<script src="movimento.js">(항상T내부, 검문소 전):data-revela(위로/나타남/옆으로/확대/커튼),data-parallax,data-intro(베일 ≤ 1.2초),data-conta,data-contagem. 모두 시스템이 "동작 줄이기"를 요청하면 중지됩니다.- 메인 버튼에는
data-cta가 있어야 합니다.negocio타입에서는 첫 화면에 표시되고, 진입 애니메이션이 없으며, 모바일에서는 고정 바가 추가됩니다. - 이미지에는
width/height, 스크롤 아래에 있을 때loading="lazy", 장면을 설명하는alt가 있어야 합니다.
사용할 움직임의 양 측정: referencias/visual-x-conversao.md.
6. 검문소와 게시
node $S/scripts/portao.js T/index.html --tipo negocio|visual --fotos T/fotos
1440x900 및 390x844 해상도에서, "동작 줄이기" 켜짐/꺼짐 상태로 확인합니다: CTA (negocio 타입인 경우 1.5초 이내에 첫 화면), 콘솔 오류 0개, 깨진 파일 0개, 가로 스크롤 없음, 이미지 로드 완료, "동작 줄이기" 상태에서 애니메이션 실행 없음, 무게 (negocio < 3MB, visual < 8MB). PASSA가 출력될 때만 게시하세요. 처음 실행 시: cd $S/scripts && npm install && npx playwright install chromium.