Hallmark
Nutlope/hallmark — AI が吐きがちな UI スロップを拒否するデザインスキル
Nutlope/hallmark は Claude Code / Cursor / Codex 向けのデザインスキル。色を変えただけのテンプレではなく、構造の多様性を強制する。マクロ構造を先に選び、テーマを被せ、58 ゲートのスロップテストと pre-emit 自己批判を通してから返す。
4
動詞
20
カタログテーマ
21
マクロ構造
58
スロップゲート
差別化: 見た目の差し替えではなく、hero → 3 features → CTA → footer という同一リズムを拒否する。2 つのブリーフで 2 つのサイトに見えることが目標（README /
SKILL.md）。
呼び出し面
デフォルトは新規 UI 構築。明示動詞は audit / redesign / study。画像や URL だけ渡された場合は study か参照ビルドかを一度確認する。
(default) Design
新規 UI。マクロ構造 → テーマ → ルールセット → スロップテスト。コンポーネント単体なら Component-scope に分岐。
hallmark audit <target>
既存コードを anti-pattern に照らして採点。パンチリストのみ。編集しない。
hallmark redesign <target>
コピー・IA・ブランドは残し、視覚構造を作り直す。既存ルートやコンポーネント所有権はデフォルトで保持。
hallmark study <screenshot|URL>
憧れデザインの DNA（マクロ構造・書体ペア・色アンカー）を抽出。ピクセルコピーと有料テンプレ URL は拒否。
実装セーフティレール
- 本番ファイルやルートツリーの削除は、明示確認がない限り禁止。
- 既存プロジェクトでは名前付きファイルの in-place 編集か、既存ルートへの加算を既定にする。
- PDF / README / ブリーフは参照資料。ユーザーが verbatim 指定しない限り本文へ丸写ししない。
- 編集前に作成・変更・削除予定ファイルを列挙する。削除は確認必須。
既定パイプライン
ページ向けデフォルトは次の順序。コンポーネント単体ブリーフはマクロ構造・ナビ・フッター・hero enrichment・project memory をスキップする。
0 Pre-flight→
1 Context gate→
2 Macro + nav/ft→
2.5 Memory→
2.6 Theme→
3 Rules→
4 Enrich?→
5 Preview→
6 Build→
7 Slop test
flowchart TD PF[0 Pre-flight scan] --> CG[1 Audience / Use / Tone] CG --> GEN[Genre: editorial / modern-minimal / atmospheric / playful] GEN --> MAC[2 Pick macrostructure + nav + footer] MAC --> MEM[2.5 Read .hallmark/log.json] MEM --> TH[2.6 Theme: catalog / custom / studied-DNA] TH --> RULES[3 Load visual ruleset JiT] RULES --> ENR[4 Hero enrichment decision] ENR --> PREV[5 Preview block] PREV --> BUILD[6 Build + stamp + tokens.css] BUILD --> SLOP[7 Slop test 58 gates] SLOP -->|fail| BUILD SLOP -->|pass| OUT[Hand off]
ステップ要約
| Step | やること | 読み込むもの（例） |
|---|---|---|
0 | 既存トークン・フォント・モーション・FW をスキャン。あれば design.md が最優先。 | プロジェクト内 CSS / package.json |
1 | Audience / Use case / Tone を必ず一度聞く。スキップ時は推論を明示開示。 | genres/*.md |
2 | 21 マクロ構造から 1 つ。ナビ N1a–N13・フッター Ft1–Ft8 も同時に選ぶ。 | macrostructures.md → 1 ファイルだけ |
2.5 | 直近ログと連続 macro / theme の重複を避ける。 | .hallmark/log.json |
2.6 | カタログ 20 テーマが既定。カスタムは意図シグナル時のみ。 | custom-theme.md（条件付き） |
5–7 | プレビュー → ビルド（スタンプ必須）→ 58 ゲート。失敗したら戻す。 | slop-test.md（Step 7 のみ） |
JiT 読み込み: 全 references を先読みしない。インデックスから名前を選び、選んだ 1 ファイルだけを読む。cookbook のフルロードはトークン浪費として明示禁止。
ジャンル 4 種
| ジャンル | シグナル例 | テーマクラスタ（概要） |
|---|---|---|
| editorial（既定） | シグナルなし / 編集・クラフト | Specimen, Atelier, Brutal, Newsprint, Studio, Manifesto, Almanac, Garden, Riso, Sport, Editorial, Carnival など |
| modern-minimal | SaaS / API / infra / B2B | Coral, Cobalt |
| atmospheric | AI tool / generative / dark | Bloom, Midnight, Terminal, Aurora, Lumen |
| playful | consumer / onboarding / community | Hum |
マクロ構造（21）
ページ形状の名前付きセット。見出し配置・本文構成・区切り・ボタン声・画像扱い・reveal をまとめて選ぶ。Specimen は編集／ファウンダリ明示時のみ。連続実行で同じマクロは禁止。
| # | 名前 | 要約 |
|---|---|---|
| 01–05 | Bento / Long Document / Marquee Hero / Stat-Led / Workbench | グリッド・文書・全面ヒーロー・巨大数字・画面ツアー |
| 06–10 | Conversational FAQ / Manifesto / Photographic / Quote-Led / Specimen | Q&A・宣言・写真主導・引用・編集標本 |
| 11–15 | Catalogue / Letter / Index-First / Narrative Workflow / Split Studio | 一覧・手紙・リンク索引・段階物語・二分割 |
| 16–21 | Feature Stack / Type Specimen / Portfolio / Map / Ecosystem / Playground | スティッキー機能・書体標本・作品・地図・発見面・コンポーネント演示 |
テーマ多様化の 3 軸
連続出力は次のうち少なくとも 1 軸が前と異なる必要がある。
- Paper band — dark / mid / light（
--color-paperの明度） - Display style — high-contrast-serif / grotesk-sans / mono / display-heavy など
- Accent hue — warm / cool / neutral / chromatic-other
Custom 分岐は、ブランド色指定・多属性の雰囲気・明示の custom 要求があるときだけ表面化する。無言ならカタログ。
全動詞共通の 6 規律
- Pre-emit self-critique — Philosophy / Hierarchy / Execution / Specificity / Restraint / Variety を 1–5。いずれか < 3 なら改訂。
- Honest copy — ユーザー未提供の指標・証言・ロゴ数を捏造しない（gate 46）。
- Locked tokens — テーマ決定後は
var(--color-*)/var(--font-*)のみ。インライン色・直書き font-family 禁止（gate 48）。 - Re-drawn chrome 禁止 — 偽ブラウザバー・偽 IDE 枠を手描きしない（gate 47）。
- Mobile — 320 / 375 / 414 / 768 で検証。横スクロール禁止、
overflow-x: clip（hidden ではない）。 - Typography purity — 見出しに italic を使わない（gate 38a）。強調はウェイト・アクセント・下線。
スロップテストの束
references/slop-test.md は Step 7 専用。ゲートは視覚・構造・マイクロインタラクション・多様化・実装・hero enrichment・レスポンシブ・a11y などに分かれる。ジャンルで緩むゲートもある（例: atmospheric の radial bloom、modern-minimal のゼロクロマニュートラル）。
スタンプ: CSS 先頭に
/* Hallmark · macrostructure: … · theme: … */。続いて .hallmark/log.json に追記（最大 20 件）。次回の多様化がこれを読む。
Component-scope
ボタン・入力・カードなど単一 UI のとき。マクロ / ナビ / フッター / enrichment / log 追記をスキップ。代わりに 8 状態（default · hover · focus · active · disabled · loading · error · success）必須と、プレビュー用ラッパーを出す。
skills CLI
npx skills add nutlope/hallmarkまたは SKILL.md と references/ を手動配置:
- Claude Code:
~/.claude/skills/hallmark/ - Cursor:
.cursor/rules/hallmark.mdc（frontmatter なしの本文） - Codex:
~/.codex/skills/hallmark/（個人）または.codex/skills/hallmark/（プロジェクト）
リポジトリ構成
nutlope/hallmark/
├── README.md
├── ROADMAP.md
├── package.json
├── docs/ # recipes / study-examples / talk-slides
├── site/ # デモサイト・examples・_tests
└── skills/hallmark/
├── SKILL.md # エントリ（v1.1.0）
└── references/ # themes / genres / macros / verbs / gates …デモ: usehallmark.com。ローカルは npm run serve（site/ を 4173）。
公式・関連
- GitHub: Nutlope/hallmark — 本体（MIT）
- Live demo — テーマ例とデモページ
- entry
skills/hallmark/SKILL.md - human
docs/recipes.md/docs/study-examples.md（エージェントは自動ロードしない） - Powered by Together AI