tasteskill v2 - 안티-슬롭 프론트엔드 스킬

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

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

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. 아무것도 없으면 생략하십시오: 그려면 해당 자산에 의존하는 구성을 피하고 시트는 사진 슬롯을 정직하게 채우는 방법을 알려줍니다(소프트웨어는 HTML로 자체 인터페이스를 보여줌; 사진이 없는 제품은 그려지고 그 세계의 실제 사진 중에 배치되며, 가짜 제품 샷은 절대 아님). 공개 컬렉션에서 찾을 그림은 프로젝트 자체의 것이 아닙니다. --have에서 제외하십시오.
• --keep palette,type: 브랜드가 이미 색상이나 서체를 고정한 경우. 그러면 구성만 뽑고 브랜드의 값을 역할에 매핑합니다.

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

• 그것을 채택하십시오. 당신이 원래 만들었을 레이아웃과 혼합하지 마십시오. 낯설게 느껴진다면 좋습니다: 익숙한 레이아웃이 바로 이 스킬이 방지하고자 하는 것입니다.
• 하나의 슬롯을 다시 그리십시오(--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 <참조>는 그것을 assets/에 다운로드하고 출처와 라이선스를 기록합니다. --credits는 푸터용 크레딧 라인을 출력합니다. 발견된 사진은 클라이언트 주변의 세계를 보여주며 클라이언트의 자체 제품, 방, 요리, 사람 또는 팀으로 제시되지 않습니다.
   4. 직접 그리기. SVG 또는 CSS 드로잉. 사실적인 것을 가장하는 대신 추상적, 도식적 또는 재료적이어야 합니다.

   그림이 페이지에 선명도와 무게를 부여하지 못한다면(회색 상자, 미리보기 없음, 또는 "여기에 이미지" 표시), 보유하고 있지 않은 자산에 의존하는 방향을 선택한 것입니다. --have 없이 다시 뽑으십시오.

5. 하나의 살아있는 것(4단계)을 구축하십시오. 즉시 작동하거나 매 방문마다 다른 유일한 페이지 기능입니다.

7. 룩 앤드 필 점검하기

node <skill>/scripts/inspect.mjs --port 3000

이 명령은 브라우저를 열어 페이지 스타일을 검사하고 설정된 하우스 스타일 규칙에 대해 보고합니다. 수동 검사 지점:

• 텍스트 크기. 16px 미만의 본문 텍스트가 없어야 합니다. 히어로 헤드라인은 모든 뷰포트에서 최소 3rem이어야 합니다(보통 그 이상).
• 간격. 섹션 사이에 최소 4rem의 수직 간격. 히어로는 뷰포트 높이의 최소 80%를 차지해야 합니다.
• 대비. WCAG AA(일반 텍스트의 경우 4.5:1, 큰 텍스트의 경우 3:1).
• 줄 길이. 본문 텍스트 블록은 75자 이하여야 합니다.
• 터치. 모든 상호 작용 가능한 요소는 최소 44x44px입니다.

8. 세 가지 너비에서 스크린샷 촬영하기

node <skill>/scripts/screenshot.mjs --url http://localhost:3000

이 명령은 1200px, 768px, 375px에서 스크린샷을 .taste-skill/screenshots/에 저장합니다.

9. 룩 앤드 픽스 루프

스크린샷을 보고 평가표(references/jury-rubric.md)에 따라 채점하십시오. 각 라운드에서 발견된 문제를 수정하고 다시 스크린샷을 촬영하십시오. 점수가 7/10 이상이거나 3라운드 이상 수정한 후 중단하십시오.

참고 자료

• references/copy.md: 카피 작성 지침, 문서 산술 및 예제
• references/jury-rubric.md: 심사위원 평가 기준
• references/layout-patterns.md: 증명된 레이아웃 패턴

디렉토리 구조

<skill>/
  scripts/
    draw.mjs         # 방향 딜러
    inspect.mjs      # 브라우저 검사기
    screenshot.mjs   # 스크린샷 유틸리티
    assets.mjs       # 공개 컬렉션 이미지 검색
  assets/
    base.css         # 중립 CSS 기초
  references/
    copy.md
    jury-rubric.md
    layout-patterns.md