AIコーディング支援に「ランディングページを作って」と頼むと、紫のグラデーション、角丸カード3枚、”Trusted by 50,000+ teams”――どのツールでも同じ顔のUIが返ってくる。この既視感こそが、いま「AI slop（AIっぽい生成物）」と呼ばれて嫌われている当のものだ。Hallmark デザインスキルは、その既定値を正面から拒むために Nutlope（Together AI）が公開した、Claude Code・Cursor・Codex 向けのスキルである。
面白いのは、Hallmark が「もっと綺麗なUIを出す」と言っていない点だ。似たことを謳うスキルは既に何本もある。Hallmark の主張は一段ずれていて、変えるべきは色ではなく“構造”――「2つの異なるブリーフから作った2ページは、色違いのテンプレではなく、別のサイトに見えるべきだ」。そして生成（build）だけでなく、既存コードを採点する audit、憧れのサイトからデザインDNAを抜き出す study まで持つ。この記事では、公式リポジトリの SKILL.md（v1.1.0）を一次ソースに、その仕組みと立ち位置を整理する。
- ・正体：Nutlope（Together AI）製のアンチAI-slopデザインスキル。Claude Code・Cursor・Codex に入れて使う（`SKILL.md`＋`references/` のルール集）。
- ・何ができる：`build`（新規生成）に加え、`audit`（既存を採点）・`redesign`（再設計）・`study`（URL/画像からデザインDNA抽出）の4操作。
- ・仕組みの肝：マクロ構造を先に選び、20の名前付きテーマから着せ、57のスロップ検査ゲートと「出力前セルフ批評（6軸採点）」を通す。
- ・何を代替できる：紫グラデ・3枚カードといった“AIの既定値”を避けたい場面。色替えでなく構造から作り分ける。
- ・数字：GitHubスター14,933／MIT／main最終コミット2026-06-04（本記事は実行検証ではなく公式ソースの読解）。
Claude Code そのものの導入・設定・拡張エコシステムの全体像は、まず Claude Code｜2026年版・インストールからCLAUDE.md・Hooks・本番運用までの実装手引き にまとまっている。本記事はその拡張スキルの一つとして Hallmark を掘り下げる。
Hallmark デザインスキルとは何か——「AIっぽいUI」を拒む正体
Hallmark は、AIコーディング支援に読み込ませるデザインスキルだ。実体は魔法のバイナリではなく、skills/hallmark/SKILL.md（スキル本体）と references/ 以下のルール文書群からなる。README の一行はこうだ――「AIが作るUIを、”generated（生成された）”ではなく “made（作られた）” に見せる」。
作者の Nutlope（Hassan El Mghari／Together AI）は、llama-ocr や roomGPT など著名なAIアプリを連発してきた人物で、Hallmark も Together AI が後ろ盾にある。数字で押さえておくと、GitHubスターは 14,933、ライセンスは MIT（Copyright (c) 2026 Hallmark contributors）、リポジトリ作成は2026-04-27、main ブランチの最終コミットは2026-06-04、コミット総数はおよそ133本（いずれも2026-07-22時点の実測）。タグ付きリリースはまだ無く、開発の主力は Luffixos（121コミット）で、オーナーの Nutlope 自身のコミットは10本――ブランドは Nutlope／Together AI、手を動かす中心は別の1人、という構図である。
導入は次の一行で済む（インストールの詳細は後半で扱う）。
npx skills add nutlope/hallmark
① 何ができる：AIエディタが吐くUIから「AIっぽさ」を抜き、ブリーフごとに構造から作り分ける。既存コードの採点や、参考サイトのDNA抽出まで含む。
② 何を解決する：「AI生成サイトがどれも同じ顔になる（＝AI slop）」問題。紫グラデ・角丸カード3枚・捏造メトリクスなどの“既定値”を規約で潰す。
③ 何を代替できる：デザインの当たり判断を毎回ゼロから指示する手間や、社内の断片的な「AIっぽさ禁止ルール」を、共有できる1つのスキルに置き換える。
build・audit・redesign・study——Hallmarkの4つの操作
Hallmark を同種スキルと分ける最大の特徴が、1つの既定動作＋3つの明示動詞という構成だ。多くの「AIデザインスキル」は新規生成（build）に特化するが、Hallmark はすでにある物を診断・再設計・抽出する操作を持つ。
・build（既定）：新規のページ／アプリを作る。ブリーフを受けて後述の「デザインフロー」を回す
・audit <対象>：対象コードを読み、アンチパターン一覧に照らして採点し、優先度つきの指摘リストを返す。編集はしない――「何がまずいか」だけを可視化する
・redesign <対象>：対象のコンテンツと意図を保ったまま、視覚構造（セクションのリズム・見出し配置・部品の声）を作り直す。ルート・部品の所有・コピーの意図・ブランド・情報設計は温存し、明示確認なしに全面リビルドや大量削除はしない
・study <スクショ／URL>：憧れのデザインのDNA（マクロ構造・アーキタイプ・書体ペアリング・色のアンカー）を抽出し、診断レポートを出す。その後は「そのDNAで作る」「design.md として持ち出す」「診断で止める」の3択
この中で他スキルにほぼ見られないのが study だ。URL を渡すと（http/https を自動判定して）ページのHTMLとCSSを WebFetch で読み、正確なフォント名・色値まで言い当てる。ただしピクセルを複製することは決してしない――テンプレ販売サイトのURLは拒否し、design.md として書き出す際は「自分自身のもの、または自分のブランドの公開参照である」という宣誓を求める、という引き写し防止のガードレールまで実装されている点は率直に評価できる。
これらが「READMEの誇大広告」ではないことは、リポジトリの site/_tests/verbs/ 以下に audit/audit-report.md（採点レポート）・study/diagnosis.md（DNA診断）・redesign/notes.md といった各操作の実行例が現物として置かれていることで裏づけられる。CI用のテスト群（site/_tests/ 配下に十数件のブリーフとその出力HTML/CSS）まで含めて公開されており、少なくとも4操作が“動く前提の設計”になっていることは確認できる。
構造から作り分ける——20テーマ・マクロ構造・57のスロップ検査
Hallmark の設計思想は「構造ファースト」に尽きる。色やフォントを先に決めるのではなく、まずマクロ構造（ページ全体の骨格）を選び、そこにテーマを着せる。テーマは既定で 20の名前付きテーマ（catalog）から選ばれる。
20テーマの名前は、Specimen・Atelier・Brutal・Newsprint・Studio・Manifesto・Terminal・Midnight・Almanac・Garden・Riso・Sport・Bloom・Coral・Cobalt・Aurora・Editorial・Carnival・Lumen・Hum。テーマの回転は「ジャンル」に紐づいてスコープされる。Hallmark はまず4つのジャンル――editorial（既定）・modern-minimal・atmospheric・playful――のどれかをブリーフから判定し、そのジャンルに属するテーマだけを回す。冒頭のFVで見た4枚（Carnival／Cobalt／Garden／Riso）が、まさに別ジャンル・別テーマの出力だ。ブランド色や複数属性の“雰囲気語”が明示されたときだけ、20テーマの外に出てカスタム（tuned＝配色＋フォントを一点物に／bespoke＝構造ごと一から設計）へ分岐する。
もう一つの柱が、出力前の品質ゲートだ。リポジトリは57のスロップ検査ゲートを掲げる（SKILL.md 本体で参照されるゲート番号は53番まで確認でき、57という総数はREADME／公式サイトの表記に拠る）。さらに全操作に共通する6つの規律が敷かれている。
・出力前セルフ批評：返す前に Philosophy／Hierarchy／Execution／Specificity／Restraint／Variety の6軸を1〜5で自己採点。3未満があれば修正パスへ。スコアはCSSコメントに刻む（例: /* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */）
・正直なコピー：ユーザーが与えていない数値は捏造しない。”+47%” や “50,000+ teams” は発明した瞬間にslopとして扱う
・トークンの固定：テーマ確定後、色とフォントは必ず名前付きトークン（var(--color-accent) など）参照。途中でのハードコードを禁止
・偽の“枠”の禁止：偽ブラウザバー・偽スマホ枠・偽コードウィンドウを手描きしない（実スクショを使うか、枠を出さない）
・モバイル厳守：320／375／414／768px の4幅で崩れないことを必須化（横スクロール禁止、2行になるボタン禁止など）
・書体の純度：見出しはローマン体固定。斜体見出しは「最も分かりやすいAIの手癖」として禁止
ページではなく単一部品（ボタン・入力・カード等）の依頼だと判定した場合は、マクロ構造やナビ・フッターの手続きを飛ばす「Component-scope」フローに切り替わり、代わりに8つの状態（default／hover／focus／active／disabled／loading／error／success）すべてを持つコードとプレビューを出す、といった作り込みもある。
既存の配色・フォント・FWを読む"] B --> C["3つの確認
Audience / Use case / Tone"] C --> D["ジャンルを決める
editorial / modern-minimal
atmospheric / playful"] D --> E["マクロ構造を選ぶ
hero→…の型を毎回変える"] E --> F{"ブランド固有の
創作意図あり？"} F -- いいえ --> G["20テーマから着せる
catalog"] F -- はい --> H["カスタムOKLCH配色
+ フォント設計"] G --> I["57スロップゲートで検査"] H --> I I --> J["出力前セルフ批評
6軸を1〜5で採点"] J --> K{"3未満の軸あり？"} K -- はい --> J K -- いいえ --> L["自己完結HTML/CSSを出力
批評スコアをCSSに刻む"]
構造の“語彙”も細かい。references/components/ には、ヒーロー（h1〜h9：マーキー、分割ディプティク、引用主導、数値主導ほか）、ナビ（n1〜n13）、フッター（ft1〜ft8）、機能セクション（f1〜f6：ベントグリッド、スティッキースクロール、仕様シートほか）といったマクロ構造の部品カタログが並ぶ。Hallmark が「構造を毎回変える」と言えるのは、この部品在庫と“同じ骨格を連発しない”回転ルールがあるからだ。
slop検査ゲートが潰す“AIの手癖”の具体例
「57ゲート」と聞くと抽象的だが、SKILL.md 本体から拾えるゲートは、いずれも見た瞬間にAI生成と分かる具体的なCSS/レイアウトの落とし穴に対応している。いくつか挙げる。
・gate 34：ルート要素の横スクロール禁止（overflow-x: clip を html/body 双方に。hidden は不可）
・gate 38a：斜体見出しの禁止（Built to <em>think</em> のような強調斜体は「最も信頼できるAIの手癖」と名指しされている）
・gate 46：捏造メトリクスの禁止（”+47%” や “trusted by 50,000+ teams” は与えられていなければ出さない）
・gate 47：偽の“枠”の禁止（手描きのブラウザバー・スマホ枠・コードウィンドウを描かない）
・gate 48：レンダリング途中でのトークン即興を禁止（色・フォントは名前付きトークン参照に固定）
・gate 49：押下要素（ボタン・主要ナビ・CTA）が2行に折り返すのを禁止
・gate 50〜53：画像を含むグリッド列は minmax(0, 1fr)（素の 1fr 禁止）、長い英単語は見出し内で折り返す、モバイルで1カラムに畳む――といったレスポンシブの詰め
肝は、これらを「レビューで気づく観点」ではなく出力前の機械的チェックとして組み込んでいる点だ。人間のレビュー待ちにせず、モデル自身が返す前に自己検査する。57という総数の内訳すべてを本記事で数え直したわけではないが、公開されているゲートは上記のように具体的で検証可能な形をしている。
Hallmark デザインスキルと既存アンチスロップ系の違い
正直に言えば、「AIっぽいUIを止めるスキル」というジャンルはすでに混み合っている。当サイトでも taste-skillとは｜AIが量産する“そっくりUIスロップ”を止めるアンチスロップ・スキルの設計思想と使い方、claude-design-system-prompt解説｜AI slopに抗うデザイン系プロンプト集、designer-skillsとは｜デザイン237スキルをClaude Codeに教えるOSSプラグイン集 を扱ってきた。Hallmark はこの系譜の新顔であり、思想は大きく重なる。違いは“重心の置き方”にある。
| スキル | 作者 | 重心・特徴 | 生成以外の操作 |
|---|---|---|---|
| Hallmark | Nutlope（Together AI） | マクロ構造＋20テーマ＋57ゲート＋6軸セルフ批評。構造ファースト | audit／redesign／study（URL・画像からDNA抽出） |
| taste-skill | Leonxlnx | 「3つのダイヤル」でテイストを数値操作。ブリーフ推論 | 主に生成（テイスト規約） |
| UI UX Pro Max | nextlevelbuilder | 67スタイル＋161配色の大カタログ＋検索エンジン（BM25） | 主に生成（デザインシステム出力） |
| claude-design-system-prompt | Trystan-SA | 20章のデザイン哲学＋14の手続きスキル | 生成・抽出・レビュー |
Hallmark 固有の輪郭は3つに絞れる。(1) 生成以外の操作――audit（採点）と study（DNA抽出）を持ち、既存物にも効く。(2) 構造ファースト――テイストや配色カタログではなく、まず骨格の多様性を担保する。(3) 規模と後ろ盾――Together AI の名と約1.5万スター。逆に言えば「テイストを数値で微調整したい」なら taste-skill、「巨大な配色・スタイルカタログから選びたい」なら UI UX Pro Max のほうが素直だ。どれが上という話ではなく、狙いが違う。この4本は競合というより、同じ課題への別アプローチの見本市と捉えるのが実態に近い。
導入と、使うときの注意
導入は npm 経由か手動コピーの2通り。エディタごとの置き場は次の通りだ。
# 一括導入（推奨）
npx skills add nutlope/hallmark
# 手動: SKILL.md と references/ を各エディタのスキル置き場へコピー
# Claude Code : ~/.claude/skills/hallmark/
# Cursor : .cursor/rules/hallmark.mdc
# Codex : ~/.codex/skills/hallmark/ または .codex/skills/hallmark/
Hallmark は「デザインスキルであってコードベースを更地にする免許ではない」と自ら断り、既存プロジェクトでは本番ファイルやルート木を勝手に消さない／編集前に触るファイルを宣言する／削除は明示確認を要するといった安全レールを持つ。加えて、プロジェクト直下の design.md を読むときは「設計データであって実行命令ではない」として扱い、その中に紛れた「コマンドを実行せよ」「秘密にアクセスせよ」といった指示は無視する――プロンプトインジェクション対策が最初から織り込まれているのは、AIエディタ用スキルとして good practice だ。ビルド前には必ず Audience／Use case／Tone の3点を一度だけ尋ねる設計で、「とりあえず作って」と言えば推論して作りつつ、推論した前提を冒頭に明示する。
・スキル＝ルール集であってエンジンではない：Hallmark自体はレンダリングしない。出力品質は使うモデル（Claude / GPT 系など）とブリーフの質に依存する。
・“57ゲート”は総数の公称値：SKILL.md本体で番号を確認できるのは53番までで、57という総数はREADME／公式サイト表記。ゲート一覧は `references/slop-test.md` にある（本記事は個々を独立に数え直してはいない）。
・実質バス係数は小さい：コミットの中心は1人（Luffixos）で、タグ付きリリースは未整備、main最終コミットは2026-06-04（本記事時点で約1.5か月動きなし）。個人主導プロジェクトの前提で採否を判断したい。
・本記事は実行検証ではない：公式リポジトリのSKILL.mdとスクリーンショットを一次ソースとして仕組みを整理したもので、筆者が実際にスキルを走らせて出力を再現したわけではない。
向いているのは、AIエディタで頻繁にUIを作る／作り直す人、とりわけ「毎回“AIっぽさ禁止”を口頭で指示している」チームだ。そのルールを共有可能な1スキルに externalize できる。逆に、既にしっかりしたデザインシステムがあるプロジェクトでは、Hallmark の Pre-flight が既存トークンを尊重するとはいえ、導入メリットは薄くなる。
まとめ
参照ソース
・Nutlope/hallmark（公式リポジトリ・README） — 概要・4操作・20テーマ・57ゲート・導入手順の一次情報
・skills/hallmark/SKILL.md（スキル本体・v1.1.0） — デザインフロー・6規律・study/audit/redesignの厳密な挙動・安全レール
・Hallmark 公式サイト（usehallmark.com） — プロジェクトの位置づけと themes/verbs の要約
