marvinmcv-svg/SCCS-Landing-page

tasteskill v2

모델이 만든 페이지는 보통 모델이 본 모든 페이지의 평균처럼 보입니다. 중앙에 세 줄짜리 헤드라인, 그 위에 작은 레이블, 아이콘 카드 행, 부드러운 그라데이션, 몇 개의 얇은 구분선, 모노스페이스 캡션. 그 안에는 잘못된 것이 없고, 결정된 것도 없습니다.

이 스킬은 이러한 기본값을 결정으로 대체하며, 네 가지 방법으로 작동합니다:

1. 스크립트가 방향을 제시하고, 당신이 그중 하나를 선택합니다. 모델이 디자인을 발명하도록 요청받으면 매번 카테고리 기본값을 선택합니다. scripts/draw.mjs는 20개의 연구된 방향 중 3개를 제시합니다. 당신은 주제의 아이디어를 가장 잘 전달하는 방향을 선택하고, 스크립트는 247개 실제 사이트에서 추출한 라이브러리에서 타이포그래피 시스템, 팔레트, 히어로 및 섹션 구성을 제시합니다.
2. 아이디어는 주제에서 비롯됩니다. 연구에서, 최고의 사이트와 잊혀지는 사이트를 구분한 것은 스타일링이 아니라 대상 자체에서 가져온 개념이었습니다.
3. 장식이 없는 하우스 스타일, 실제 브라우저에서 scripts/inspect.mjs로 측정되므로 규칙이 희망이 아닌 확인을 통해 적용됩니다.
4. 당신이 만든 것을 봅니다. 세 가지 너비의 스크린샷, 심사 기준표, 수정, 다시 확인.

테스트 중 알게 된 한 가지 경고. 장식을 제거하는 것은 절반의 작업에 불과합니다. 레이블, 규칙, 카드를 잃었지만 그 자리에 얻은 것이 없는 페이지는 내용이 부족해 보이며, 블라인드 심사자는 빈 페이지보다 텔이 있는 더 풍부한 페이지를 올바르게 선호합니다. 나머지 절반은 실질입니다. 더 크게 설정된 타이포그래피, 전체 색상 필드, 이 주제 세계의 실제 사진(찾거나 그린 것), 그리고 모든 섹션이 전체 내용을 담고 있는 것. 스킬은 당신에게 그것을 제공하도록 구축되었습니다. 절제와 맞바꾸지 마십시오.

아래 명령어에서 <skill>은 이 스킬의 폴더를 나타냅니다. 프로젝트 루트에서 실행하여 작업 파일이 그곳의 .taste-skill/에 저장되도록 하십시오. 스크립트는 Node 22+와 설치된 Chrome, Edge 또는 Chromium이 필요하며, 아무것도 설치하지 않습니다. assets.mjs는 네트워크 접근도 필요하지만 API 키는 사용하지 않습니다.

실행

순서대로 수행하십시오. 1-5단계는 몇 분이 소요되며 페이지의 품질을 결정합니다.

1. 브리핑과 프로젝트 읽기

실제로 무엇인지 파악하십시오: 주제, 대상, 페이지가 방문자에게 하게 해야 할 한 가지 행동, 스택, 기존 브랜드(색상, 폰트, 로고), 그리고 무엇보다 어떤 이미지가 실제로 존재하는지: 프로젝트 자체 사진이나 제품 사진, 보여줄 수 있는 실제 인터페이스, 호출할 수 있는 이미지 생성 도구, 또는 아무것도 없는 경우. 가지고 있지 않은 사진을 기준으로 계획하지 마십시오. 자체 자료가 없는 경우는 거의 항상 아무것도 없는 것이 아닙니다. 주제의 도시, 거리, 재료, 역사는 공개 아카이브와 박물관에 있으며, 크레딧을 표시하면 무료로 사용할 수 있습니다(6단계, scripts/assets.mjs).

요청이 모호하다면, 묻는 대신 결정하고 한 줄로 해석을 명시하십시오. 누락된 사실이 작업을 막는 경우에만 질문하십시오(예: 제품 이름 없음).

그런 다음 노트에 주제를 목록화하십시오: 이 고객에게 속하고 어떤 경쟁사에도 속하지 않는 8~12가지 항목. 이름과 이름의 의미; 주소, 문 번호, 거리 및 이웃, 그 장소의 모습(타일, 간판, 페인트 색상, 상점 전면의 서체, 빛, 날씨); 브리핑의 숫자(좌석 수, 방 수, 바다까지의 거리, 가격, 연도); 그것이 안고 있는 제약(한 달에 한 배치만, 겨울에 휴업, 예약제); 재료와 색상; 의식과 시간(5시에 켜지는 오븐, 7시의 페리); 그 세계의 인쇄물(시간표, 라벨, 티켓, 간판). 이 목록은 4단계에서 아이디어가 나오는 곳입니다. 블라인드 테스트에서 각 브리핑에서 승리한 페이지는 그러한 목록의 항목(고객 이름과 그 의미, 그 거리, 그것을 그것이게 만드는 하나의 제약)을 기반으로 구축되었으며, 패배한 페이지는 좋은 구성과 카테고리 아이디어를 가지고 있었습니다. 목록은 또한 사진 검색입니다. 각 장소, 재료 및 인쇄물은 6단계의 검색어입니다.

2. 주장 작성하기

디자인 전에, references/copy.md §1에 표시된 대로 페이지를 주장과 증거로 한 줄씩 섹션별로 나열하십시오. 주장은 어떤 섹션이 존재하고 어떤 순서로 배치될지 결정합니다. 주장이 없는 섹션은 삭제하십시오. 이것이 히어로, 로고, 세 가지 기능, 추천사, 가격, 행동 촉구의 기본 순서를 피하는 방법입니다.

3. 방향 그리기

node <skill>/scripts/draw.mjs --sector <섹터> --brief "<주제에 대한 한 줄 설명>" \
  --sections <주장 순서의 역할> [--tone <톤>] [--have <자산>] [--keep palette,type] \
  --options 3

이 명령은 세 가지 방향을 제시하고 각각의 짧은 요약을 출력합니다. 각 방향을 목록과 비교하십시오: 어떤 구성 방식이 이 고객만의 무언가를 전달할 수 있습니까? 가장 익숙한 것이 아니라 그것을 선택하고 노트에 그 이유를 한 줄로 작성하십시오. 테스트에서 주제에 맞지 않는 단일 무작위 방향이 약한 페이지의 가장 흔한 원인이었습니다. 그런 다음 전체 시트를 확인하십시오:

node <skill>/scripts/draw.mjs <동일한 인수, --options 제외> --direction <선택한 id>

• --sector: node <skill>/scripts/draw.mjs --list sectors. 가장 가까운 것을 선택하십시오.
• --sections: --list roles의 역할 (features, showcase, how-it-works, testimonial, proof, stats, pricing, faq, cta, footer, intro, about, work, gallery, list, contact). 히어로는 암시됩니다.
• --tone (선택 사항): quiet, bold, warm, technical, playful, luxury, editorial. 브리핑에서 명확히 요청하는 경우에만 전달하십시오.
• --have: 실제로 존재하는 자산, 쉼표로 구분: photography (장소, 사람 또는 작업에 대한 프로젝트 자체 사진), product-photo (특정 제품의 사진, 또는 이를 생성할 수 있는 이미지 도구), product-ui (실제 스크린샷), illustration, video. 아무것도 없으면 생략하십시오. 그러면 draw는 이에 의존하는 구성을 피하고 시트는 사진 슬롯을 정직하게 채우는 방법을 알려줍니다(소프트웨어는 HTML로 구축된 자체 인터페이스를 보여주고, 사진이 없는 제품은 그려져서 가짜 제품 샷 없이 실제 세계 사진 사이에 배치됩니다). 오픈 컬렉션에서 찾을 사진은 프로젝트 자체 자산이 아닙니다. --have에서 제외하십시오.
• --keep palette,type: 브랜드가 이미 색상이나 서체를 고정한 경우. 그러면 draw는 구성만 제시하고, 브랜드 값을 역할에 매핑합니다.

명령은 방향 시트를 출력합니다. 이 빌드의 아트 디렉션입니다:

• 그것을 채택하십시오. 당신이 원래 만들었을 레이아웃과 혼합하지 마십시오. 낯설게 느껴진다면 좋습니다. 익숙한 레이아웃이 바로 이 스킬이 방지하고자 하는 것입니다.
• 명시할 수 있는 이유가 있을 때만 하나의 슬롯을 다시 그리십시오(--redraw hero | type | palette | photos | section:<role> | direction). 명시된 브랜드 제약과 모순되거나 존재하지 않는 자산이 필요한 경우. 더 편안한 것을 얻기 위해 절대 다시 그리지 마십시오. 모든 재그리기를 보고서에 기록하십시오.
• 제시된 섹션이 실제 내용을 담을 수 없을 때(세 가지 계획을 비교하지만 가격은 하나; 다섯 개의 인용문을 원하지만 없음), 내용을 구부리지 마십시오. --alternatives <role>로 다른 것을 나열하고, 내용과 가정이 일치하는 것을 선택한 다음 --redraw section:<role>=<id>로 가져오십시오.
• 팔레트를 주제와 비교하십시오. 제시된 팔레트는 색상 집합만큼이나 비율 집합(하나의 바탕, 하나의 잉크, 하나의 강조, 필드)입니다. 색상이 주제 자체 재료와 충돌한다면(피트 위스키에 캔디 파스텔, 산악 오두막에 네온), 팔레트를 한 번 다시 그리고; 주제에 고유한 색상이 있다면(재료, 거리의 페인트, 창밖 풍경), 제시된 비율을 유지하고 주제에서 색상을 가져와서 보고서에 명시하십시오.
• node <skill>/scripts/draw.mjs --show로 언제든지 다시 출력하십시오. 긴 세션에서는 각 섹션을 구축하기 전에 다시 읽으십시오.

4. 아이디어 찾기

방향은 구성 방식입니다. 아이디어는 페이지를 이 주제에만 속하게 만드는 것입니다. 노트에 이 문장을 작성하고 두 빈칸이 주제 자체에서 채워질 때까지 구축을 시작하지 마십시오:

이 페이지에서, [주제에 속하는 것] 이(가) [방향이 요구하는 장치] 가 됩니다.

첫 번째 빈칸을 찾을 장소:

• 그것의 결과물. 무엇을 생산합니까? 실제 결과물을 자료로 페이지에 배치하십시오. (시를 인쇄하는 카메라는 종이 조각으로 사본을 전달했습니다.)
• 그것의 대상이나 형태. 물리적으로 어떻게 생겼습니까? 단면, 실루엣? 확대하고, 자르고, 프레임이나 유일한 모티프로 만드십시오.
• 그것의 이름. 글자가 사진을 담을 수 있습니까? 벽으로 쌓을 수 있습니까? 두 모서리로 분할할 수 있습니까?
• 그것의 장소. 누군가를 그곳에 가고 싶게 만드는 하나의 전망이 있습니까?
• 그것의 의식. 스크롤에 따라 페이지가 수행할 수 있는 순서가 있습니까?
• 그것의 인공물. 그 세계에 이미 존재하는 인쇄물: 티켓, 메뉴, 라벨, 영수증, 초대장, 폴더, 매뉴얼?
• 그것의 반대. 이 페이지가 결여한 느낌을 소유한 다른 카테고리는 무엇입니까?

카테고리에서가 아니라 목록(1단계)에서 첫 번째 빈칸을 채우십시오. 경쟁사 테스트: 가장 가까운 실제 경쟁사를 문장에 넣어보십시오(두 블록 떨어진 빵집, 다른 오크 가구 제작자, 같은 산의 다른 오두막). 문장이 여전히 작동하면 아이디어는 카테고리에 속합니다. 빵 한 덩어리는 모든 빵집의 것입니다. 그러나 이 빵집 이름이 유래한 거리의 일곱 문은 오직 이 빵집만의 것입니다. "깔끔하고 현대적인"은 아이디어가 아닙니다. 연구 패널이 가장 낮은 점수를 준 사이트는 아이디어가 "표준 공식을 넘어서는 것이 없음"으로 기록된 사이트였습니다.

하나의 라이브 런 요소. 방문자가 할 수 있는 한 가지, 또는 방문할 때마다 다른 한 가지를 페이지에 제공하십시오. 아이디어에서 만드십시오. 예를 들어, 나무를 선택하고 그 안에 있는 의자를 보기; 이름을 입력하고 활자 주조소의 글자로 잘린 것을 보기; 대출 금액을 설정하고 실제 월별 숫자 읽기; 오두막의 난로가 지금 켜져 있는지와 마지막 페리까지 남은 시간 보기; 크기를 선택하고 방 안에서 보기. 블라인드 테스트에서 모든 승리 페이지는 하나를 가지고 있었고 심사자가 그것을 먼저 언급했습니다. 규칙: 주제의 실제 내용을 사용하고, 엄지손가락으로 전화기에서 작동하며, 스크립트 없이 평범한 대체 수단을 가지고 있고, 읽기를 방해하지 않으며, 놀이터가 아니라 하나의 것입니다. 6단계에서 페이지의 일부로 구축하며 9단계에서 모션으로 추가하지 않습니다.

5. 단어 쓰기

마크업 전에 전체 페이지를 카피 덱(일반 텍스트)으로 작성하고 references/copy.md를 따르십시오:

• 모든 헤드라인은 모든 너비에서 두 줄 이하로 들어맞습니다. 문장을 확정하기 전에 copy.md §2에서 산술을 하십시오. 자신 있는 크기에서 약 32자가 어디서나 안전합니다. 연구된 갤러리 히어로의 중앙값은 5단어, 32자입니다.
• 하나의 보조 문장. 하나의 기본 행동, 그것이 하는 일에 따라 이름이 지정된, 첫 화면의 실제 버튼.
• 첫 화면은 방문자의 첫 번째 질문에 큰 글씨로 답합니다. 이벤트의 경우: 무엇인지, 언제, 어디서(날짜는 헤드라인 또는 두 번째 크기에 속하며, 절대 작은 텍스트에만 있지 않음). 제품의 경우: 무엇이고, 비용 또는 기능. 사람의 경우: 누구이고, 무엇을 하는지. 방문자가 찾아온 모든 섹션(라인업, 메뉴, 방, 가격)에는 자체 제목과 내비게이션의 자체 위치가 있습니다.
• 전체 내용을 작성하십시오. 브리핑이 요청하는 모든 섹션은 정보를 완전히 전달합니다. 전체 메뉴와 가격, 각 방의 세부 사항, 각 연사와 강연, 포함 사항이 포함된 가격, 각 실제 질문에 대한 답변. 내용이 부족한 섹션은 깔끔한 페이지가 더 복잡한 페이지에 지는 가장 흔한 이유입니다.
• 브리핑에 공백이 있는 경우(요리 이름, 방 이름 및 요금, 프로젝트 제목) 샘플 세부 정보가 예상되므로 디자인이 전체 밀도로 표시됩니다. 보고서에 나열하여 고객이 확인하도록 하십시오. 증거는 절대 발명되지 않습니다: 고객, 인용문, 리뷰, 언론, 로고 또는 비즈니스 통계 없음.

6. 그래도 구축하기

마음속에서 모션을 끈 상태로 페이지를 구축하십시오. 애니메이션이 필요한 페이지는 완성되지 않은 것입니다. 작업 순서:

1. 토큰. 시트의 색상 및 타이포그래피 역할을 CSS 사용자 정의 속성으로 정의하십시오. 모든 하위 항목은 토큰만 참조합니다. <skill>/assets/base.css는 시작할 수 있는 중립적인 기반입니다(리셋, 토큰 이름, 유동적인 타이포그래피 단계, 그리드, 포커스 및 선택 스타일, 모션 도우미); 자체 디자인은 없습니다.
2. 청사진이 정확히 설명하는 대로 히어로, 데스크톱 및 전화 너비에서. 다른 모든 것이 존재하기 전에 큰 것을 크게, 작은 것을 작게 만드십시오.
3. 각 섹션을 청사진에서, 이 프로젝트의 내용으로. 기하학을 유지하고 주제를 바꾸십시오. 인접한 섹션은 레이아웃을 공유하지 않아야 합니다. 모든 섹션에 아이디어를 전달하십시오. 가격, FAQ 및 바닥글을 포함하여. 연구에서 가장 흔한 실패는, 심지어 좋은 사이트 중에서도, 독특한 첫 화면 다음에 기본 블록이 오는 것입니다.
4. 이미지, 다음 선호 순서로:
   1. 프로젝트 자체;
   2. 생성된 것(이미지 도구가 있는 경우);
   3. 오픈 컬렉션에서 주제 세계의 실제 사진, 정직한 사진이 존재할 때마다. node <skill>/scripts/assets.mjs "<검색어>"로 검색하십시오(Openverse, Wikimedia Commons, Art Institute of Chicago, Met Museum; 기본적으로 상업적 사용을 허용하는 라이선스만). 카테고리가 아니라 목록을 검색하십시오: 오래된 엽서 속 그 거리, 이웃의 오래된 지도, 가까이 확대한 재료, 판화 속 거래, 그 종류의 박물관 유물, 식물 도판, 별자리표. 크고 의도적으로 사용하십시오. 하나의 아카이브 사진을 히어로로, 확대된 판화를 페이지의 모티프로, 거리의 실제 지도를 연락처 섹션으로. 각각을 선택하기 전에 보십시오; --get <ref>는 assets/에 다운로드하고 출처와 라이선스를 기록하며, --credits는 바닥글을 위한 크레딧 라인을 출력합니다. 발견된 사진은 고객 주변 세계를 보여주며, 고객의 제품, 방, 요리, 사람 또는 팀으로 제시되지 않습니다.
   4. 그린 것...

… (truncated)

(원본 SKILL.md의 전체 내용이 잘렸으므로, 번역도 원본이 잘린 지점까지만 제공되었습니다.)