jenreh/hallmark

hallmark은(는) 무엇을 하나요?

AI 코딩 어시스턴트가 생성하는 UI가 단순히 생성된 것이 아니라 정성껏 만들어진 것처럼 보이게 만듭니다: 모든 모델이 훈련된 기본값에 대한 단단한 바닥(floor)이며, 연속된 빌드가 서로 수렴하지 않도록 방향성을 부여하고, 하나의 화면에 하나의 아이디어를 담아냅니다. 바닥 위의 페이지는 여러분의 것입니다: 여러분은 능숙한 디자이너입니다.

Together AI의 지원을 받습니다.

바닥 (The Floor)

모든 결과물을 모든 환경에 결속시키며, 다른 어떤 것도 읽히지 않더라도 어떤 것도 면제될 수 없습니다.

1. 모든 색상과 모든 글꼴은 :root에서 선언된 토큰(또는 선언된 테마 블록)을 통해 사용됩니다. 토큰 블록 이후에는 리터럴 색상이나 font-family가 없어야 합니다. (48)
2. 절대 transition: all을 사용하지 마세요. width, height, top 또는 left에 애니메이션을 적용하지 마세요. (10a)
3. 로만체 제목 안에는 절대 하나의 이탤릭체 단어를 사용하지 마세요. (38i)
4. html과 body 모두에 overflow-x: clip을 적용하세요. hidden이나 100vw는 절대 사용하지 마세요. (34)
5. 이미지를 포함하는 그리드 트랙은 minmax(0, 1fr)을 사용하고, 디스플레이 헤더는 overflow-wrap: break-word; min-width: 0을 적용하세요. (50)
6. 모든 상호작용 요소는 즉시 나타나는 :focus-visible을 가져야 합니다. (26a, 15)
7. 모든 애니메이션은 prefers-reduced-motion: reduce 대체 스타일을 가져야 하며, 스크립트가 꺼져 있어도 콘텐츠가 보여야 합니다. (27, 62)
8. 절대 지표, 사용 후기, 로고 벽 또는 사례 연구 수치를 만들어 내지 마세요. (46a)
9. 절대 눈썹(eyebrow)을 사용하지 말고, 절대 트래킹된 대문자나 작은 대문자로 된 레이블을 사용하지 마세요: 레이블, 캡션, 테이블 헤드, 태그 및 내비게이션 링크는 본문 글꼴(또는 테마의 레이블 글꼴)을 사용하며, 한 단계 작게, 문장 또는 소문자로, 트래킹 없이 작성합니다. (54, 67)
10. 절대 가운데 점으로 연결된 메타 문자열, 링크 텍스트에 붙은 화살표, 또는 장식용 상태 점을 사용하지 마세요. (63)
11. 절대 보라색에서 파란색으로의 그라데이션, 카드 안의 카드, 아이콘으로 사용된 이모지, 또는 손으로 그린 브라우저나 OS 창을 사용하지 마세요. (2a, 4, 30a, 47a)
12. 히어로의 헤드라인, 한 문장, 그리고 주요 행동은 1280 x 800 해상도에서 스크롤 없이 모두 보여야 합니다. (44b)
13. 한 화면에 약 80단어; 히어로의 텍스트는 헤드라인, 한 문장 및 그 행동들입니다. (58)
14. 컨테이너는 최대 너비가 제한되고 중앙에 정렬됩니다: 1920에서는 거터가 커지지만, 측정(measure)과 그리드는 커지지 않습니다. (44d)
15. CSS 소스의 첫 번째 비어 있지 않은 줄은 Hallmark 스탬프, 그다음 비평(critique) 줄, 그다음 면제(waiver) 사항입니다. (20)
16. Node를 사용할 수 있으면, 결과물을 넘겨주기 전에 node <skill-dir>/scripts/sloplint.mjs <output> --render를 실행하세요. 모든 FAIL을 수정하고; 모든 REFLEX를 수정하거나 면제하세요.

바닥 위에서, Reflex 게이트는 모델이 빠지기 쉬운 기본값이며, 실제 이유를 기록하여 면제할 수 있고, Finish 검사는 제작 세부 사항으로, 답변되며 결코 차단되지 않습니다 (references/gates.md § 1 및 § 2 참조).

흐름 (Flow)

0. 사전 점검: 아무것도 묻기 전에 프로젝트를 읽으세요.
1. 한 번 묻기: 재료, 대상, 용도, 톤.
2. 형태 잡기(Shape): 페이지를 디자인한 다음, 이름을 붙이세요.
3. 방향 설정(Direction): 테마를 딜(deal)하거나, 맞춤 제작을 요청받으면 자유롭게 디자인하세요.
4. 레이아웃, 이미지, 제작 기술, 장르 및 테마 파일과 gates.md § 1부터 § 4까지를 불러오세요.
5. 선택(Picks) 블록, 한 번만.
6. 빌드: 히어로를 먼저, 그다음 페이지; 스탬프, tokens.css, 로그.
7. 정리(Sweep): 깨끗해질 때까지 sloplint --render 실행, 평가된 게이트, 마무리 검토, 재료 요청.

동사(Verbs), 사용자가 Hallmark를 언급할 때만: redesign <target> (콘텐츠와 연결을 유지하며 완전히 재디자인) 및 audit <target> (보고서); 먼저 references/redesign.md를 읽으세요. 기존 디자인에 대한 다른 모든 변경은 Hallmark 실행이 아닙니다: 요청받은 대로 프로젝트 자체 시스템 내에서 수행하세요.

Codex CLI와 OpenCode는 먼저 references/flow.md § Harnesses를 읽고; 다른 환경에서는 이 파일을 있는 그대로 실행합니다.

0. 사전 점검

신호(Signals), 순서대로: 루트의 design.md 또는 DESIGN.md (잠긴 시스템: 아래 모든 것을 재정의하며, 페이지가 이를 공유함); .hallmark/brand-spec.md 또는 실제 브랜드를 명명하는 프롬프트 ( references/brand-truth.md 실행; 실제 브랜드를 기억에서 테마화하지 마세요); 프로젝트의 글꼴, 팔레트, 간격, 모션 라이브러리 및 프레임워크 (package.json, Tailwind 설정, :root, 토큰, 글꼴 링크); 제품 자체: URL, 실행 중인 개발 서버, 하나의 명령어로 시작하는 프로젝트 또는 머신의 앱 (빌드가 scripts/capture.mjs로 캡처함) (imagery.md § 4); Inspo MCP 서버 (mcp__inspo__* 도구: 신호 8, flow.md § Signal 8; /hallmark 프롬프트, Hallmark 명명 또는 맞춤 요청이 이를 이김); TOGETHER_API_KEY 설정 (신호 9, comp 단계).

하나의 블록(파일:줄 인용, 보존되는 것, 도입되는 것)을 출력하고, .hallmark/preflight.json (flow.md § Pre-flight)에 캐시하세요.

1. 한 번 묻기

다섯 단어 프롬프트에도 단 하나의 메시지:

만들기 전에, 네 가지를 묻겠습니다. 1. 재료(Material), 가장 중요한 것: 페이지가 무엇을 보여줄 수 있습니까? 스크린샷이나 화면 녹화 (또는 앱, URL 또는 폴더를 가리키면 제가 실행하고 가져오겠습니다), 당신의 사진, 실제 숫자 (고객, 가동 시간, 가격), 누가 말했는지 이름이 포함된 인용문, 사용해도 되는 로고. 그것들을 붙여넣거나 경로를 알려주세요; 사진이 없으면 Hallmark 사진 라이브러리의 대체 이미지를 배치하고 나중에 당신의 것으로 교체하며, 숫자, 인용문 또는 로고를 절대 만들어 내지 않습니다. 2. 대상(Audience): 누가 이것을 사용하고 그들은 무엇에 관심이 있습니까? 3. 용도(Use): 페이지가 유도해야 하는 하나의 행동. 4. 톤(Tone): 극단을 하나 고르세요 (에디토리얼, 브루탈리스트, 소프트, 유틸리테리안, 럭셔리, 플레이풀, 테크니컬, 오스테어); "깔끔하고 현대적인"은 톤이 아닙니다. 그리고 4~8단어로 된 분위기(vibe)와 원하는 앵커 색상이 있다면 추가하세요. 또는 go ahead라고 말하면 제가 추론하고 무엇을 골랐는지 알려드리겠습니다.

건너뛴 필드는 옵트아웃(opt-out)입니다: 추론하고, 추론 내용을 답변 상단에 한 줄로 명시하고, 스탬프를 찍으세요; 후속 질문은 없습니다. 사실(Facts)은 절대 추론되지 않습니다: 주어지지 않은 숫자, 인용문 또는 로고는 없습니다; 주어지지 않은 사진은 슬롯의 대체 이미지입니다. 프롬프트가 네 가지 모두에 답하거나, 아무도 답할 수 없을 때 (헤드리스 실행, 배치 실행) 묻지 마세요.

장르(Genre), 자동으로: AI 도구, 생성형, 음악, 비디오, 음성, 다크, 분위기 있는 → atmospheric; SaaS, 엔터프라이즈, API, 플랫폼, 개발자 도구, 인프라, B2B → modern-minimal; playful, fun, friendly, soft, kids, games, community → playful; 그 외는 editorial, 대부분의 소비자 및 가족 프롬프트가 여기에 해당합니다. 테마가 딜(deal)되면 해당 장르가 우선합니다 (장르 파일, 스탬프, --genre). 두 개의 비기본 장르가 발동되면 메시지에 하나를 선택하라는 내용을 추가하거나, go ahead 시 하나를 골라 말하세요.

범위(Scope). 하나의 요소(버튼, 입력, 카드, 모달, 내비게이션, 푸터, 탭 스트립, 칩)를 명명하거나 "그냥 X"라고 말하는 프롬프트는 컴포넌트입니다 (flow.md § Component scope). 누군가 작업하는 화면(대시보드, 관리자, 설정, 도구)은 앱 화면입니다 (flow.md § App screens).

2. 형태 잡기 (Shape)

재료 우선. 인벤토리, 한 줄: 실제(real) (프롬프트와 프로젝트가 제공하는 모든 구체적인 것: 이름, 주장, 숫자, 장소, 날짜, 이미지), 사진(pictures) (페이지가 보여주는 것과 각각의 출처: 사용자의 것, 실제 제품 스크린샷, 구축된 제품, 라이브러리), 없음(absent) (가지지 않을 모든 증거: 아무도 주지 않은 로고, 인용문, 지표). 형태는 이를 따릅니다: 사진이 있는 페이지는 사진으로 시작하고 (imagery.md § 1); 단어에 관한 페이지는 서체와 사실을 담습니다 (긴 문서, 편지, 색인 우선, 선언문).

작업(The job). 방문자가 하러 오는 것을 명명하고 (구독, 예약, 방문, 참석, 구매, 시도, 가입, 고용, 참여, 듣기), 그 작업을 references/anatomy.md에서 읽으세요: 해당 카테고리의 실제 사이트들이 행동을 어디에 배치하는지, 어떤 섹션을 중심으로 구축되는지 (메뉴, 라인업, 이슈, 기록), 그리고 어떻게 끝나는지. 페이지는 이 해부학(anatomy)을 기반으로 구축되며, 그림, 단계 및 이메일 밴드의 기본 실행이 아닙니다 (85).

그런 다음 페이지를 디자인하세요: 그 형태, 어떻게 열리는지, 각 섹션의 콘텐츠와 구성, 내비게이션, 푸터, 히어로를 운반하는 것. 시작점: references/macrostructures.md의 21가지 형태 (선택한 파일만 불러오세요); layout.md의 구성, 내비게이션 및 푸터.

드로우(The draw). 테마 빌드에서, 3단계가 테마를 선택했으면 node <skill-dir>/scripts/theme.mjs draw --material photo|product|words --job <job> --theme <slug> [--log .hallmark/log.json]을 실행하세요. 로그와 테마의 그림을 지우고, 형태, 히어로 포즈, 내비게이션, 푸터, 첫 번째 섹션, 행동이 위치하는 곳, 생략할 두 가지 구성을 딜합니다. 재료가 선택을 거부하지 않으면 이를 받아들이고, 선택 블록에서 교체를 명명하세요: 하나의 테마에서 하나의 프롬프트가 두 번 구축되어 두 페이지를 만듭니다. 거울 테스트(Mirror test): 같은 카테고리의 이웃 프롬프트가 이 정확한 조합을 얻을 수 있습니까? 그렇다면, 하나의 결정을 변경하고 어느 것인지 말하세요.

시그니처(Signature). 방문자가 기억할 한 가지: 프롬프트의 가장 강력한 실제 것을 최상으로 보여주는 것 (그 장소의 사진, 하나의 작업을 수행하는 제품, 제안이기 때문에 거대하게 설정된 가격, 시도해볼 수 있는 컨트롤). 테마의 재료로 만들고 (맞춤 실행에서는 고유한 모양으로), 첫 번째 화면에 보여주고, 선택 블록과 스탬프에서 이름을 지정하세요. 표시(mark)로 그려진 숫자는 장치(device)이지 시그니처가 아닙니다 (82).

이 모든 것을 보류하세요; 5단계에서 한 번만 말합니다.

3. 방향 설정 (Direction)

첫 번째 일치 항목이 우선합니다.

1. 사용자가 테마를 명명함 → 빌드하세요 (스탬프 theme: <name> (by request)).
2. 사용자가 맞춤 제작을 요청함 ("custom", "derive it", "bespoke", "no theme", "a world of its own") → references/direction.md: 디자인은 당신의 것입니다. 드로우, 형태, layout.md, 장르 파일 및 6단계의 구성 및 접힘 규칙을 대체합니다; 바닥, 게이트 및 정리 단계는 유효합니다. 침묵은 절대 이 경로를 선택하지 않습니다.
3. 그 외의 모든 것은 테마를 딜합니다:

node <skill-dir>/scripts/theme.mjs deal --genre <genre> --prompt "<the prompt>" [--log .hallmark/log.json]

프롬프트에 맞고 로그를 지우는 세 가지 테마를 딜합니다. 세 그림을 보고, 재료가 프롬프트 (모션, 사진, 코드)를 담을 수 있는 테마를 선택하고, 왜 선택했는지 말하고, references/themes/<slug>.md만 불러오세요. 요청받은 경우에만 다시 딜하세요 (--reroll 1). Node가 없으면: 수동으로 references/themes/index.json에서 선택하고 스탬프 deal: manual을 찍으세요.

테마는 계획이 아닌 재료입니다: 페이지가 포함하는 내용이나 순서를 절대 설정하지 않습니다. 테마가 형태, 장르 또는 제작 파일과 재료, 컨트롤 또는 모션에 대해 의견이 다르면 테마가 우선하며; 바닥과 사용자 자신의 말이 둘 다를 이깁니다.

4. 불러오기 (Load)

정확히 이것들, 페이지 빌드의 경우: references/layout.md · references/anatomy.md, 작업 부분 · references/imagery.md · references/craft.md · references/genres/<genre>.md · references/themes/<slug>.md 및 그 그림, 이미 딜에서 보았음 (명명된 테마: 지금 <slug>.jpg를 보세요). 테마에서 팔레트 균형, 서체 음성, 표면 및 그 범위 (사진 없이 만드는 섹션)를 가져오고, 레이아웃은 가져오지 마세요 · references/gates.md § 1부터 § 4까지. 맞춤 실행은 레이아웃, 장르 및 테마 파일 대신 direction.md를 불러옵니다.

필요할 때만, references/에서: 하나의 거시구조 파일 · 상태 저장 UI를 위한 microinteractions.md · 폼을 위한 interaction-and-states.md · 특이한 레이아웃을 위한 responsive.md · 테마가 텍스처를 명명할 때 texture.md · 스크롤 스토리를 위한 scroll-choreography.md · 두 모드를 위한 dark-mode.md · 차트를 위한 data-viz.md · 맞춤 실행에서의 fonts.md · 신호 9 (컴프, 생성된 스틸)에 대한 comp.md · 시스템을 잠그기 위한 design-md.md.

gates.md § 5는 7단계를 기다리고, § 6는 검토를 기다립니다; 더 많이 불러오는 것은 가장 큰 피할 수 있는 비용입니다.

5. 선택(Picks) 블록

실행의 결정에 대한 유일한 낭독이며, 사용자 리디렉션 창입니다:

**Hallmark · v2.0.0**

- **형태(Shape)** · Workbench, draw 7f3a2c에서 · 장르 modern-minimal · 작업: 가입, 히어로와 가격 옆의 행동
- **테마(Theme)** · Coral, 2/3로 딜됨 (따뜻한 회색, 하나의 코럴 신호, General Sans, 소프트 필) · 종이 밴드에서 Cobalt를 지움
- **크롬(Chrome)** · 내비게이션: 가장자리 정렬, 워드마크와 하나의 행동 · 푸터: 마스트, 링크 위의 워드마크
- **히어로(Hero)** · 무대: 열 1~5의 헤드, 560px에서 열 6~12의 슬롯, 중앙 정렬
- **시그니처(Signature)** · 연체 청구서를 추적하는 인보이스 목록, 히어로에서 라이브로 구축됨
- **섹션(Sections)** · 히어로 (인보이스 목록) · 고정 (세 패널로 추적된 하나의 연체) · 스위처 (클라이언트 보기와 당신의 보기) · 테이블 (가격) · 푸터
- **재료(Material)** · 실제: 2분 설정, CSV 가져오기, 리스본 · 사진: 히어로에 구축된 인보이스 목록, 리스본 스튜디오의 라이브러리 사진 (음영 처리됨) · 없음: 로고, 인용문, 지표
- **정리(Sweep)** · 빌드 후 실행

맞춤 실행의 행은 direction.md에 있습니다. 그런 다음 조용한 한 줄, 컴포넌트 범위 또는 design.md가 존재할 때 생략: 시스템을 이식 가능하게 하시겠습니까? design.md를 위해 lock the system이라고 말하세요. 신호 9에서, comp.md가 여기서 실행됩니다.

6. 빌드 (Build)

• 스캐폴드(Scaffold)부터 시작하세요. node <skill-dir>/scripts/theme.mjs scaffold <slug> (딜의 --dealt 포함; 맞춤 실행에서는 --custom)는 프로젝트의 스타일시트 옆에 tokens.css (테마의 토큰 및 공유 스케일)와 base.css (바닥이 이미 결정한 것)를 쓰고, 스탬프 스켈레톤, 두 개의 임포트 및 슬롯 스크립트를 출력합니다. 페이지만 작성하세요.
• 한 번 references/patterns.md를 읽으세요: 여덟 가지 상태의 컨트롤, 슬롯, 누락된 사실, 아무데도 게시하지 않는 폼, 하나의 공개(reveal), 비교하는 피규어. 그 형태를 가져오고, 그 카피는 절대 가져오지 마세요.
• 히어로 먼저. 내비게이션과 히어로를 작성하고, 그 아래는 아무것도 작성하지 말고, node <skill-dir>/scripts/sloplint.mjs <file> --render --stage hero를 실행한 다음, 새로운 컨텍스트에서 히어로 검토를 수행하세요 (gates.md § 6). 히어로가 배송되면 섹션을 구축하세요; 사진 크레딧 및 페이지 전체 검사는 페이지를 기다립니다.
• 화면당 하나의 아이디어, 크게 설정하세요. 히어로: 7단어 이하의 헤드라인 (50자), 12단어 이하의 한 문장, 하나 또는 두 개의 행동. 6~9개의 섹션, 히어로와 푸터 포함 (얇은 프롬프트에서는 5개), 최대 450개의 보이는 단어, 각각은 질량이 있는 구성 내 해당 카테고리 자체 콘텐츠의 한 조각입니다 (layout.md § 4 및 § 5). 히어로는 첫 번째 화면이며 오직 첫 번째 화면일 뿐이고, 그 포즈는 작업(job)에서 가져옵니다 (layout.md § Posture).
• 시그니처를 히어로에 배치하세요. (2단계에서 명명된 것).
• 이미지는 imagery.md § 2 (슬롯 할당), § 3 (선택의 기준) 및 § 4 (실행)을 따릅니다. scripts/capture.mjs를 실행할 수 있는 경우 실행하고 결과를 references/captures/ 아래에 flow.md § Imagery capture에 따라 저장한 다음 <img> 태그에서 참조하세요.
• 페이지를 완성할 때, 스탬프를 찍으세요: <!-- hallmark v2.0.0 · theme <slug> · sweep pending -->. 첫 번째 줄은 스탬프, 두 번째 줄은 비평, 그다음 면제 사항입니다. 로그: .hallmark/log.json에 각 단계의 결정을 기록하고, 실행이 끝난 후 재료를 요청하세요.
• 신호 9 (컴프): comp.md를 불러오고, 빌드 후 스틸을 생성하려면 node <skill-dir>/scripts/comp.mjs <selector>를 실행하세요. 다른 모든 신호는 flow.md § Signals에 따라 처리됩니다.

7. 정리 (Sweep)

0이 될 때까지 반복: node <skill-dir>/scripts/sloplint.mjs <file> --render를 실행하고, 노드가 없으면 직접 검사하세요 (gates.md § 5: 스캔을 위한 체크리스트). FAIL 오류를 수정하고, REFLEX 경고를 수정하거나 면제하세요 (이유 포함, 파일 상단의 면제 블록). 출력물 스캔에 대해 gates.md로 판단하세요. 마무리(Finish) 검토 (gates.md § 6): 각 섹션에 대해 시각적 완성도를 검사하고, 예외를 면제하고, 재료를 확인하세요. 재료 요청 (컴포넌트 범위 또는 design.md가 존재할 때 생략): 프로젝트에 적절한 재료를 요청하는 이슈 또는 작업 항목을 제출하세요.

참고 사항

• 모든 경로는 <skill-dir>(이 스킬의 디렉토리 위치)에 상대적입니다.
• 게이트 및 마무리 검사에 대한 전체 설명은 references/gates.md를 참조하세요.
• 흐름 단계, 신호 처리 및 하네스에 대한 자세한 내용은 references/flow.md를 참조하세요.