랜딩 페이지 다듬기 1단계: 구성과 비주얼 정하기

Signature — OpenCode를 위한 형태 및 정체성 파이프라인

Top 50 Websites for Design Inspiration (2026년 10월 22일 기준, 50개 사이트를 브라우저에서 직접 열어 확인)과 Nutlope의 Hallmark 핵심 프로세스에서 파생되었습니다. 모든 형태와 정체성은 실제 말뭉치 증거에 기반합니다 — 라이브러리는 관찰 결과이지, 취향에 대한 전통적인 지식이 아닙니다.

업무 분담 (경계 유지)

• frontend-design은 제작을 담당합니다: 아트 디렉션, 타이포그래피 판단, 색상 판단, 모션 철학, 카피라이팅, 자기 비평 루프. 이 스킬이 로드되면, 이 규칙을 따르십시오 — 여기에 규칙을 다시 설명하지 마십시오.
• Signature는 프로세스와 라이브러리를 담당합니다: 이 빌드가 어떤 형태 인지, 어떤 정체성 을 가지는지, 중복 방지 원장, 그리고 기계적(grep-및-계산) 게이트 목록.

동사

Build (기본값)

1. 브리핑을 다음으로 분할합니다: 도메인, 대상, 그리고 에너지 단어("영화적", "밀도 높은", "개인적", "장엄한").
2. references/structures.md 에서 형태를 선택합니다. 한 줄로 말합니다: Shape: <이름> (차선책: <이름>). 브리핑이 모호하면 도메인 트리오를 제시하십시오 — 절대 조용히 기본값으로 넘어가지 마십시오.
3. 말뭉치에 대해 확인합니다: Playwright MCP(탐색 + 스크린샷 도구) 또는 webfetch를 사용하여 형태/정체성 행에서 1-2개의 증거 URL을 엽니다. 깨진 링크는 다음 행으로 승격됩니다. 팔레트 앵커는 실제 페이지를 볼 때까지 시드로 사용됩니다.
4. 형태의 분위기를 공유하는 references/identities.md 에서 정체성을 선택한 다음, 실제로 본 내용에 대해 토큰 시드를 수정합니다.
5. 먼저 토큰을 작성합니다: 컴포넌트 CSS 전에 하나의 시맨틱 :root 블록 + 스탬프(아래 참조).
6. 빌드합니다. 하나의 기억에 남는 요소가 페이지를 이끕니다; 나머지는 조용히 유지됩니다(frontend-design의 절제 규칙 — 적용하고, 재유도하지 마십시오).
7. 모든 게이트를 실행하고 모든 실패를 수정합니다. 그런 다음 취향 검사를 수행합니다 — frontend-design이 로드된 경우 이를 통해, 그렇지 않으면 AI 특성의 보정 목록을 기준으로.

audit <target>

코드/사이트를 읽고 게이트만 실행합니다. 각 실패는 하나의 글머리 기호입니다: file:line — 게이트 번호 — 한 줄 수정. 기계적 발견만 허용됩니다; 취향 문제인 경우, 새로운 규칙을 만들지 말고 관련 frontend-design 원칙을 한 줄로 언급하십시오. 스탬프가 있는 경우, 이전 빌드의 형태를 반복하는지 보고하십시오.

redesign <target>

정보 아키텍처, 카피, 브랜드 자산을 유지합니다. 스탬프를 grep합니다: 새 형태는 마지막으로 스탬프된 형태와 달라야 합니다. 정체성은 변경될 수 있습니다; 브랜드 음성이나 팔레트를 변경하려면 먼저 물어봐야 합니다.

study <url | screenshot>

소스를 엽니다. 다음을 추출합니다: 섹션 순서 → 가장 가까운 형태; 팔레트 앵커(실제 색상 샘플); 타입 역할과 관찰된 폰트 → 가장 가까운 정체성. 한 줄을 출력합니다: study: source=<url> shape≈<형태> identity≈<정체성> anchors=<16진수>. 라이브러리에 맞는 것이 없으면 새 정체성 행을 추가합니다(identities.md 하단 형식) — 그러나 study 결과를 라이브러리 선택으로 조용히 대체하지 마십시오: 사용자가 연구된 DNA를 그대로 원하면 스탬프는 identity=studied:<source>가 되고 study 값이 토큰이 됩니다.

원장은 코드입니다

• 메인 스타일시트 상단에 스탬프를 찍습니다(HTML 전용 빌드의 경우 index.html head에도 반영): /* signature: shape=<형태> identity=<정체성> refs=<실제로 열린 URL> */
• 선택하기 전에 프로젝트의 기존 스탬프를 grep합니다. 연속된 두 빌드가 형태를 공유하지 않아야 합니다; 정체성도 재사용하지 않는 것이 좋습니다.
• 별도의 원장 파일은 없습니다. CSS가 원장입니다.

계약

• 디자인 토큰은 한 곳에 있습니다(:root 사용자 정의 속성 또는 프로젝트의 tokens.css/Tailwind @theme). 이름은 시맨틱 역할(--color-ink)이고, 값이 아닙니다.
• 프로젝트 자체 토큰 이름을 가리는 대신 재사용하십시오; Tailwind 테마를 확장하고, 인라인 임의 값을 사용하지 마십시오.
• 기존 전역 스타일시트는 추가 전용입니다: 모든 @tailwind/@import "tailwindcss" 지시문을 정확히 제자리에 유지하고, 기존 규칙 아래에 토큰을 추가하며, 새 @import는 맨 위에 넣으십시오. 프레임워크 지시문을 조용히 제거하지 마십시오 — 전체 앱의 스타일이 해제됩니다. 명시적 요청이 있을 때만 전체 재작성하십시오.
• 프레임워크의 파일 규칙을 따르십시오. 프로젝트에 이미 있는 라우팅/레이아웃 패턴을 재발명하지 마십시오.
• 범위: 이것은 취향 프로세스입니다. 발명된 카피는 없음(사용자가 단어를 제공하지 않았으면 물어보십시오); 비즈니스 로직 없음; 빈 상태에서 브랜드 정체성을 선택하지 마십시오 — 주어진 것을 따르십시오.

게이트 (기계적 — 모든 답변은 "아니요"여야 합니다; 각 실패 = 핸드오프 전 하나의 수정)

토큰 규율

1. 구성 요소에 명명된 토큰으로 해결되지 않는 #hex, oklch(), rgb() 또는 font-family가 있는 경우 실패합니다. 이를 올리거나 교체하십시오.
2. 패딩/갭/마진이 프로젝트의 간격 척도(명명된 토큰이 없는 4px의 배수)를 벗어난 경우 실패합니다. 임의의 17px는 신호입니다.
3. 스탬프 주석이 없거나 실제로 열리지 않은 URL을 명명하는 경우 실패합니다.

레이아웃 생존 4. 320–1920px의 모든 뷰포트 너비에서 페이지가 수평 스크롤되는 경우 실패합니다. html과 body 둘 다에 overflow-x: clip(hidden 아님 — clip은 sticky/fixed를 보존합니다). 5. 이미지를 포함하는 1fr 그리드/행 트랙이 minmax(0, 1fr)가 아닌 경우 실패합니다. 6. 디스플레이 크기 텍스트에 overflow-wrap: anywhere(및 컨테이너에 min-width: 0)가 없는 경우 실패합니다 — 긴 합성어가 휴대폰에서 넘칠 수 있습니다. 7. 클릭 가능한 텍스트(버튼, 탐색, 탭, CTA 레이블)가 320/375/768/1280px에서 2줄로 줄 바꿈될 수 있는 경우 실패합니다.

코드 사실 8. transition: all에서 실패합니다 — 속성을 명명하십시오. 9. 하나의 요소가 둘 이상의 호버 효과를 가지는 경우 실패합니다(이동 + 크기 조정 + 그림자 + 색상 조합). 10. 입력이 상태 간에 border-width를 변경하는 경우 실패합니다; 상태 변경은 색상/윤곽선/그림자로 이동합니다. 포커스 링은 outline이고, 테두리가 아닙니다. 비활성화에는 ≥2가 필요합니다: 불투명도, cursor: not-allowed, disabled/aria-disabled. 11. 장식적 요소 <svg>/<canvas>에 aria-hidden="true"나 접근 가능한 이름이 모두 없는 경우 실패합니다.

모션 및 성능 12. 애니메이션/키프레임에 prefers-reduced-motion: reduce 대체 값이 없는 경우 실패합니다. 13. 일시 중지-호버-및-포커스 없이 자동 회전 콘텐츠에서 실패합니다 (WCAG 2.2.2). 14. LCP 히어로 에셋이 loading="lazy"이거나, 히어로 비디오에 poster/fetchpriority="high"가 없는 경우 실패합니다.

대비 및 정직함 15. 색상/배경 쌍이 WCAG 4.5:1(본문 텍스트) 또는 3:1(큰 텍스트, 아이콘, 포커스 링)을 충족하지 못하는 경우 실패합니다. 두 가지 핫스팟: 부모가 표면을 전환하는 동안 색상을 상속받는 텍스트; 텍스트와 명도 5% 이내의 버튼 채우기. 16. 조작된 사실(사용자가 제공하지 않은 측정항목, 백분율, 인용문, 이름, 가격, 통계 슬롯 채우기)에서 실패합니다. 자리 표시자 슬롯은 "확인"이라고 말하고, 절대 발명하지 마십시오. 17. 이모지를 기능/단계/가격 아이콘으로 사용하는 경우 실패합니다; 페이지당 최대 하나의 아이콘 라이브러리. 18. 다시 그린 크롬(가짜 브라우저 막대, 가짜 전화 노치, 가짜 터미널/IDE 창 프레임)에서 실패합니다. 실제 스크린샷 또는 아무것도 사용하지 마십시오.

라이브러리 규율 19. 로드된 폰트가 알려진 무료/라이선스 웹폰트가 아닌 경우 실패합니다. 말뭉치의 파운드리 서체(Commercial Type, Klim, Grilli Type, type.today, Pangram Pangram 트라이얼)는 디스플레이 참조용입니다 — 라이선스를 확인하고, 지불하기 전에 물어보십시오. Google Fonts와 오픈 가변 폰트는 통과합니다. 20. 이 빌드의 형태가 프로젝트의 가장 최근 스탬프와 일치하는 경우 실패합니다(먼저 grep, 원장 규칙에 따라).

참조 — 필요할 때 읽고, 한 번에 모두 읽지 마십시오

• references/structures.md — 스켈레톤, 증거, 도메인 트리오 테이블이 있는 10가지 페이지 형태. 형태를 선택할 때 읽습니다(build/redesign/audit).
• references/identities.md — 20가지 정체성: 팔레트 시드, 폰트 쌍, 말뭉치 증거. 정체성을 선택할 때 읽습니다(build/redesign/study).

작업 예제 (말뭉치 자체 지침에서)

브리핑: "Meet India Journeys — 강과 유산이 있는 케랄라 여행을 위한 여행사 사이트입니다." 도메인 단어 "travel" → 트리오는 Scroll Story · Case Catalog · Luxury Ledger입니다. Scroll Story를 선택합니다(차선책: Case Catalog) — 주제가 한 번에 하나씩 표시되는 장소이기 때문입니다. apple.com과 simplychocolate.dk를 라이브로 열어 챕터 페이싱, 히어로 미디어, 전체 너비 처리를 연구합니다. 정체성: Forest Confection(짙은 녹색 + 코코아, 압축 디스플레이)이 강과 유산에 적합합니다; 토큰을 수정하기 전에 라이브 참조를 샘플링합니다. 스탬프: /* signature: shape=Scroll Story identity=Forest Confection refs=apple.com,simplychocolate.dk */