tasteskill v2 - 프론트엔드 디자인 스킬

tasteskill v2

모델이 만든 페이지는 대개 모델이 본 모든 페이지의 평균처럼 보입니다. 가운데 정렬된 세 줄의 헤드라인, 그 위의 작은 레이블, 아이콘 카드 한 줄, 부드러운 그라데이션, 몇 개의 얇은 선, 그리고 모노스페이스 캡션. 그 안에 틀린 것은 하나도 없지만, 결정된 것도 아무것도 없습니다.

이 스킬은 그러한 기본값을 결정으로 대체합니다. 네 가지 방식으로 말이죠:

1. 스크립트가 방향성을 제시하면, 당신이 그중 하나를 선택합니다. 모델이 디자인을 만들어내라고 요청받으면 항상 카테고리 기본값을 선택합니다. scripts/draw.mjs는 연구된 20개의 방향성 중 세 개를 제시합니다. 당신은 주제의 아이디어를 가장 잘 담을 수 있는 방향성을 선택합니다. 그러면 스크립트는 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; 기본적으로 상업적 사용을 허용하는 라이선스만 해당). 카테고리가 아닌 목록을 검색하십시오: 옛 엽서 속의 그 거리, 동네의 옛 지도, 재료의 확대 사진, 판화 속의 그 직업, 그 종류의 박물관 유물, 식물 도판, 별자리 지도. 의도를 가지고 크게 사용하십시오. 히어로로 하나의 기록 사진, 페이지의 모티프로 확대된 판화, 연락처 섹션으로 거리의 실제 지도. 선택하기 전에 각각을 살펴보십시오. --get <ref>는 그것을 assets/에 다운로드하고 출처와 라이선스를 기록하며, --credits는 사용된 모든 자산의 저작권 표시를 생성합니다.

사용 예: node <skill>/scripts/assets.mjs "San Francisco 1906 earthquake" --get 2 (결과 2를 다운로드하고 태그합니다). 검색 후 대화형 선택을 위해 node <skill>/scripts/assets.mjs를 인수 없이 실행할 수도 있습니다.

5. 글자를 설정합니다. references/typography.md는 갤러리 연구 w:max 도표(가장 넓은 히어로가 90ch까지, 평균 67ch)에서 각 역할의 실제 치수를 알려줍니다. <skill>/assets/base.css의 유형 단계에서 시작하되, 방향 시트가 지시하는 대로 크기와 행간을 조정하십시오. 설정이 너무 작은 것이 유일하게 흔한 실수입니다. 작은 크기로 인쇄했을 때 괜찮아 보이는 텍스트는 화면에서, 특히 먼 거리에서 작게 보입니다. 자신의 타입을 '작게' 조정하지 말고, 연구에 따르면 평균 디스플레이 타입은 방문자의 머리 높이에서 대략 5-8도입니다.
6. 원래 레이아웃에 없는 접촉점을 만드십시오. 텍스트와 이미지의 교차점을 만드십시오(단어가 사진과 겹치거나, 이미지가 텍스트 블록 안으로 들어가거나). 갤러리 연구의 가장 효과적인 페이지는 콘텐츠를 별개의 구역으로 분리하지 않고 접촉점을 만들었습니다. 방향 시트가 제공하지 않는 경우라면 무시해도 됩니다.
7. 스크립트 없는 버전을 만드십시오. 페이지가 스크립트 없이도 완전히 작동하고 정보를 전달하는지 navigator를 비활성화한 상태에서 확인하십시오. 라이브 기능은 스크립트가 필요하지만(그리고 뚜렷하게 작동함을 나타내는 표시를 가져야 함), 다른 모든 항목은 첫 번째 로드와 스크립트 없이 존재해야 합니다. CSS 변환 및 전환은 스크립트 없이 작동하지만 '야간 모드'나 '승무원' 같은 카피 변경은 스크립트 없이 정적 기본값으로 고정되어야 합니다.
8. 가로 방향을 확인하십시오. 모든 내용이 오버플로 없이 맞는지 확인하십시오.
9. 모션을 만드십시오. references/motion.md를 참조하십시오. 지금 만드십시오. 필요하지 않으면 아무것도 움직이지 마십시오. 여기서 기본값은 아무것도 없음입니다.
10. 인쇄 스타일. 방문자가 페이지를 인쇄할 때 콘텐츠만 보고 싶다는 의미가 아니라, 증분 작업 흐름(cv와 함께, 링크와 함께, 복사용)에 적합해야 합니다.

7. 측정하기

node <skill>/scripts/inspect.mjs --url http://localhost:PORT

이 명령은 실제 브라우저에서 집계된 규칙에 대해 페이지를 측정합니다: 줄 길이, 유형 규모, 색상 대비, 히어로 높이, 간격, 섹션 다양성, 요소 수. 해석하는 방법:

• 각 검사를 통과하거나 실패합니다. 통계가 아닙니다. 규칙을 위반한 경우 수정하거나 무시한 이유를 보고서에 기록하십시오.
• 요소 수는 비용이 아닙니다. 섹션당 평균 HTML 요소 수를 중점적으로 봅니다. 콘텐츠가 적은 섹션은 너무 많은 불필요한 래퍼로 팽창되어서는 안 됩니다.
• 색상 대비는 글로벌로 측정됩니다. 텍스트 및 텍스처 기반 그래픽의 WCAG 2.1 AA를 확인합니다. 이 검사는 색상 유무에 관계없이 통과합니다.
• 오류가 있는 경우 경고합니다. 귀하의 보고서는 미해결 문제가 있음을 언급해야 합니다.
• 이 명령은 자체 설치(puppeteer의 Chromium 다운로드)가 필요할 수 있습니다. 첫 번째 실행이 더 오래 걸립니다.

8. 보여주기

서빙 중인 브라우저에서 node <skill>/scripts/screenshots.mjs --url http://localhost:PORT를 실행하여 390px, 1024px 및 1440px에서 전체 페이지 스크린샷을 캡처하십시오. 결과 파일은 .taste-skill/에 있습니다.

9. 보고하기

references/report.md의 섹션을 채워서 .taste-skill/report.md 보고서를 직접 작성하십시오:

• 요약 (변경 횟수, 아이디어 문장, 상태)
• 생성된 각 방향 및 선택 사항 (및 다시 그리기 이유)
• 모든 이미지 선택 및 출처 (라이선스 포함) – 10개 미만의 이미지는 메모를 포함해야 함
• 인벤토리 (1단계)
• 주장 (2단계)
• 검사 결과 (7단계)
• 작성된 모든 의사 콘텐츠: 요리 이름, 요금, 프로젝트 제목 (참조 references/invention.md)
• 알려진 문제

보고서는 스크린샷과 당신의 구축된 페이지와 함께 고객이나 동료에게 전달되는 것입니다. 읽는 사람을 위해 쓰고, 추적을 위해 쓰지 마십시오. 이 보고서 없이 빌드는 완료되지 않습니다.

10. 복습하기

스크린샷과 심사 위원 루브릭(references/rubric.md)을 사용하여 자신의 작업을 검토하고, 발견한 내용을 기록하고, 수정한 다음 다시 스크린샷을 찍으십시오. 테스트에서 이 루프(스크린샷 -> 루브릭 -> 수정 -> 다시 스크린샷)는 페이지를 더 좋게 만드는 유일한 일관된 방법이었습니다. AI는 자신의 출력을 평가할 수 없습니다. 이 단계를 건너뛰면 최종 품질이 떨어집니다.

루브릭 점수. 당신의 기준은 5점 만점에 4점, 모든 섹션에서입니다. 그렇지 않다면, 무엇이 잘못되었는지 찾아내고 수정한 다음 다시 스크린샷을 찍으십시오.

참조

• references/copy.md — 카피 덱 형식, 헤드라인 길이 계산
• references/typography.md — 설정 크기, 연구 치수
• references/motion.md — 모션 지침
• references/rubric.md — 심사 루브릭
• references/invention.md — 의사 콘텐츠 작성 방법
• references/report.md — 보고서 템플릿

스크립트 참조

스크립트	용도	독립형 실행 가능
scripts/draw.mjs	방향성, 유형, 팔레트, 청사진 제공	--help 및 --list 예
scripts/assets.mjs	공개 컬렉션에서 이미지 검색 및 다운로드	예: --get 2로 다운로드
scripts/inspect.mjs	실제 브라우저에서 규칙 측정	URL 필요
scripts/screenshots.mjs	3가지 너비의 전체 페이지 스크린샷	URL 필요

빠른 시작 단계별 요약

단계	작업	명령어/위치
1	브리프 읽기, 인벤토리 작성	—
2	주장 작성	references/copy.md 참조
3	방향성 선택	draw.mjs --sector ... --options 3
4	아이디어 발굴	인벤토리에서 문장 작성
5	전체 카피 작성	references/copy.md 참조
6	페이지 구축	토큰 -> 히어로 -> 섹션 -> 이미지 -> 유형
7	규칙 측정	inspect.mjs --url ...
8	스크린샷 캡처	screenshots.mjs --url ...
9	보고서 작성	.taste-skill/report.md
10	복습 및 반복	루브릭, 수정, 다시 스크린샷