영화적 패턴의 사이트 제작
모든 새 사이트는 하나의 패턴으로 시작되며, 다섯 가지 스킬을 이 순서대로 적용하여 완성합니다. 각 스킬은 고유한 역할을 담당합니다. 하나라도 건너뛰거나 순서를 바꾸면 다음 세 가지 결과 중 하나가 발생합니다: 예쁘지만 전환율이 낮거나, 전환은 되지만 마감이 부족하거나, 모바일에서 깨지는 결과.
시작하기 전에
- 비즈니스에 관한 기존 자료를 읽으십시오:
identidade.md,site.json,_memoria/또는 운영자가 전달한 브리핑. 사실(이름, 전화번호, 주소, 가격, 평점, 평가, 사진)은 오직 해당 자료와 비즈니스의 공개 출처에서만 가져옵니다. 사이트에 포함할 평가는 100% 긍정적인 경우에만: 결함, 문제, 불만, 거래 취소 또는 의문을 제기하는 평가는 칭찬으로 끝나더라도 제외합니다. 의심스러우면 포함하지 마십시오. 또한 사이트의 다른 부분에서 제외된 평가를 작성한 사람을 언급하지 마십시오. - 강조 색상뿐만 아니라 브랜드 전체 색상. 로고나 간판이 두 가지 색상(예: 주황색과 파란색)을 사용하는 경우, 두 색상 모두 사이트에 해당 간판이나 로고의 톤으로 나타나야 합니다. 거의 검은색에 가까운 배경은 두 번째 색상으로 간주되지 않습니다.
- 로고가 결정되면 탭 아이콘으로 사용. 비즈니스에 로고가 있는 경우(소유주가 보낸, Linktree, 사이트, 네온사인 또는 재설계 및 승인된 경우), 해당 로고가 사이트의 파비콘이 됩니다:
img/favicon.png파일(정사각형, 배경이 없는 로고에서 여백을 두고 추출, 64 및 180px)을<head>에<link rel="icon">및<link rel="apple-touch-icon">으로 연결합니다. 16px에서 읽기 어려울 정도로 너무 넓은 로고의 경우: 로고의 중심 요소(레이블, 모노그램, 로고 글꼴의 이니셜)를 사용하고, 다른 문자나 임의의 아이콘은 사용하지 마십시오. 로고가 없으면 파비콘은 브랜드 색상의 이니셜로 만듭니다. - 포함된 템플릿에서 시작하십시오:
${CLAUDE_SKILL_DIR}/template/(README.md에 placeholders, 사진 및personalizar.sh스크립트에 대한 설명이 있습니다). 모든 로컬 상점이나 서비스에 적용 가능합니다; 해당 틈새에 맞지 않는 섹션을 교체하십시오. 다른 템플릿은 틈새가 이 템플릿에 없는 구조를 요구하는 경우에만 사용하며, 그 경우에도 이 템플릿의 마감 처리를 적용합니다. - 기술 기반: 정적 HTML(자체 파일에 CSS 및 JS가 포함된 하나의
index.html과img/디렉토리). 동일한 시각적 효과와 애니메이션을 제공하며, 토큰을 덜 소비하고, 빌드 없이 게시 가능하며, 종속성으로 인해 깨지지 않습니다. Next.js는 서버가 필요한 경우에만 사용: 데이터베이스에 저장하거나 비밀 키로 웹훅을 발송하는 양식, 로그인 영역, 많은 페이지가 생성되는 블로그, 또는 프로젝트가 이미 Next.js로 존재하는 경우(이 경우 기반을 유지하십시오). - 기존 사이트인 경우, 수정하기 전에 현재 버전을 저장하십시오 (
versoes/vN-antes-vN+1/).
순서 (한 번에 하나의 스킬, 이 순서대로)
frontend-design: 비즈니스의 실제 아이덴티티(로고 색상, 포스터 타이포그래피, 섹션 대비)를 사용한 시각적 방향. 종료 조건: 팔레트, 글꼴 및 섹션 구조가 결정되었을 때.landing-page-cinematografica: 움직임과 마감(계단식 진입, 노이즈, 무게감 있는 버튼, 평가 강조, 카운팅 숫자, 살아있는 모서리 또는 대각선). 종료 조건: 해당 스킬의 금지 목록 항목이 하나도 나타나지 않을 때.revenue-centric-design(references/conversion-and-landing-pages.md열기): 5초 테스트를 통과하는 히어로, 모바일 첫 화면에 증거, 특정 CTA와 그 아래 보증 문구, 1.5 섹션마다 CTA, 외부 클릭 최소화. 종료 조건: 약속이 증거보다 크지 않을 때.copywriting(Eugene Schwartz 기준): 모든 텍스트를 최종 고객의 언어로, 사실을 지어내지 않고 작성. 종료 조건: 사이트의 모든 문장이 비즈니스 출처에서 확인 가능할 때.adaptar-mobile, 항상 마지막: 360px 및 375px에서 확인하고, 1440px가 깨지지 않았는지 확인. 종료 조건: 스크린샷을 열어서 확인했을 때.
마무리
- 로컬에서 서빙하고 링크를 제공하십시오 (
http://localhost:PORTA). 게시는 운영자가 요청할 때만 하십시오. - 전달 시, 실행된 다섯 가지 스킬과 증거가 없는 항목(확인되지 않은 사실, 에뮬레이션으로만 테스트됨)을 알려주십시오.