qwopop/competitor-reels-tool

tasteskill v2

모델이 만든 페이지는 대개 모델이 본 모든 페이지의 평균처럼 보입니다: 가운데 정렬된 세 줄짜리 헤드라인, 그 위에 작은 라벨, 아이콘 카드 한 줄, 부드러운 그라데이션, 얇은 구분선 몇 개, 그리고 고정폭 캡션. 그 안에 잘못된 것은 없지만, 결정된 것도 아무것도 없습니다.

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

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

테스트 과정에서 얻은 한 가지 경고입니다. 장식을 제거하는 것은 작업의 절반에 불과합니다. 라벨, 규칙, 카드를 잃었지만 그 자리에 아무것도 얻지 못한 페이지는 내용이 부족해 보이며, 블라인드 심사자들은 빈 페이지보다는 텔(tell)이 있는 풍부한 페이지를 올바르게 선호합니다. 나머지 절반은 실질입니다: 더 크게 설정된 타이포그래피, 전체 색상 필드, 이 주제 세계의 실제 사진(찾거나 그린), 그리고 모든 섹션이 전체 콘텐츠를 담고 있는 것. 스킬은 여러분에게 그것을 제공하도록 설계되었습니다. 절제를 위해 그걸 포기하지 마십시오.

아래 명령어에서 <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 <sector> --brief "<주제에 대한 한 줄 설명>" \
  --sections <여러분의 주장 순서에 따른 역할> [--tone <tone>] [--have <assets>] [--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. 없으면 생략하십시오. 그러면 드로우는 이에 의존하는 구성을 피하고 시트는 이미지 슬롯을 정직하게 채우는 방법을 알려줍니다(소프트웨어는 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 "<query>"로 검색하십시오(Openverse, Wikimedia Commons, Art Institute of Chicago 및 Met; 기본적으로 상업적 사용을 허용하는 라이선스만). 카테고리가 아닌 목록을 검색하십시오: 오래된 엽서 속의 거리, 이웃의 오래된 지도, 가까이서 본 재료, 판화 속의 거래, 그 종류의 박물관 유물, 식물 판화, 별자리 차트. 크고 의도를 가지고 사용하십시오: 히어로로 한 장의 아카이브 사진, 페이지의 모티브로 확대된 판화, 연락처 섹션의 실제 거리 지도. 각각을 선택하기 전에 보십시오; --get <ref>는 assets/에 다운로드하고 출처와 라이선스를 기록하며, --credits는 바닥글의 크레딧 라인을 출력합니다. 발견된 그림은 클라이언트 주변의 세계를 보여주며 클라이언트 자신의 제품, 방, 요리, 인물 또는 팀으로 제시되지 않습니다.
   4. --draw <slot>로 그려진 것, 설명과 함께.

--draw의 설명을 얻으려면 node <skill>/scripts/draw.mjs --help-img를 실행하십시오. 새로운 그림을 위한 템플릿: <skill>/assets/img-placeholder.svg.

백엔드, 데이터베이스 또는 타사 API가 없는 한 전체 스택을 구축하십시오. 타사 엔드포인트의 경우, 응답을 로컬에 저장하고 이것이 더미 데이터라고 표시하지만 실제 모양으로 표시하십시오.

HTML 파일에 <link rel="stylesheet" href=".taste-skill/tasteskill.css">를 포함하십시오. 이 파일은 검사기에 필요하며 존재하지 않으면 404가 발생합니다. 인라인 스타일 또는 다른 외부 CSS 파일을 사용하지 마십시오. <meta name="tasteskill:direction" content="...">도 포함하십시오. 검사기는 <meta name="tasteskill:measure" content="page">에서 마지막 검사가 실행되었음을 읽습니다.