Hallmarkに『よくあるAI生成UI』を監査させたら、9個のゲートに即座に落ちた

Posted at 2026-07-24

はじめに

Claude CodeやCursorに「ランディングページを作って」と頼むと、なぜか毎回同じ顔をしたページが出てくる。中央揃えのヒーロー、紫から青へのグラデーション見出し、アイコン付きの3カラム特徴カード、そして最後に4カラムのフッター。デザインの良し悪し以前に「これはAIが作った」と一目で分かる構造的な癖がある。

問題は、この「AIっぽさ」を自分のプロジェクトで潰そうとしたとき、判断基準が「なんとなく違和感がある」という主観に留まりがちなことです。どこがどう典型的なのかを具体的に指させないと、レビューのたびに同じ議論を繰り返すことになります。

この「なんとなく」を機械的なチェックリストに変換したと謳うのが、Claude Code・Cursor・Codex向けの設計スキル Hallmark です。GitHub API で確認したところ本記事執筆時点のスター数は16,345¹。実際にインストールし、自作のいかにも量産型なHTMLを食わせて、何個のチェックに引っかかるか検証しました。

この記事で分かること

Hallmarkを実際にインストールする手順と、インストーラーが実行環境をどう検出するか
中身の設計（6,188行・24ファイルの構成、4つの動作モード、6つの共通ルール）
「スロップテスト」のゲート数を巡る二次情報とのズレ
自作の典型的なAI生成UIを実際に監査させた結果

TL;DR

npx skills add nutlope/hallmark でClaude Code・Cursor・Codexなど15種類以上のエージェントに導入できる
本体は「スロップテスト」という 58個 のチェック項目（+ 事前自己採点）で構成される。紹介記事によって「57個」「65個」と数字が揺れているが、実際にインストールしたv1.1.0のファイル冒頭には 58 gates と明記されている
意図的に典型パターンを詰め込んだ自作HTMLを監査基準に照らしたところ、9項目が即座に該当した
ルールは「フォント3種類まで」「ホバーは1要素につき1効果まで」のように数値・条件で書かれており、レビュー基準を属人化させない設計になっている

Hallmarkとは何か

Hallmarkは、AIコーディングエージェントが生成するUIから「量産感」を取り除くための設計スキルです。README には Claude Code・Cursor・Codexの3エージェントが明記されていますが、実際のインストーラーはAmp・Antigravity・Clineなど15種類以上のエージェントに対応していました（詳細は次章）。MITライセンスで公開されており、GitHub APIで取得したリポジトリ情報は以下の通りです¹。

項目	値
スター数	16,345
作成日	2026-04-27
最終push	2026-06-26
ライセンス	MIT
パッケージバージョン	1.1.0

「デザインスキル」という言葉が示す通り、Hallmark自体は実行可能なプログラムではありません。中身は SKILL.md と参照用Markdown群で、これをエージェントに読み込ませることで振る舞いを変える仕組みです。つまり検証するには、実際にコーディングエージェントの手元にインストールしてファイルを読むしかありません。

実際にインストールしてみる

クラウド実行環境（このセッション自体もClaude Codeのクラウドセッションです）で、READMEに記載のコマンドをそのまま実行しました。

npx --yes skills add nutlope/hallmark

出力の一部です。

•   claude-code_2-1-218_agent  Agent detected — installing non-interactively
o  Source: https://github.com/nutlope/hallmark.git
o  Repository cloned
o  Found 1 skill
•  Skill: hallmark
|  Anti-AI-slop design skill for greenfield pages, audits, redesigns...
o  75 agents
o  Installation Summary --------------------------------------------------+
|  ./.agents/skills/hallmark                                              |
|    universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +12 more  |
|    symlink → Claude Code                                                |
o  Security Risk Assessments ------------------------------+
|            Gen               Socket            Snyk      |
|  hallmark  Safe              0 alerts          Low Risk  |

面白いのはインストーラー（skills コマンド自体はHallmarkとは別のnpmパッケージ）の挙動です。実行環境を claude-code_2-1-218_agent という文字列で自動検出し、対話プロンプトなしでインストールを進めていました。加えて、Hallmark自体をGen・Socket・Snykの3種類のセキュリティスキャナーに通した結果も一緒に出力されており、skills 側が「スキルのサプライチェーンリスク」を意識した設計になっていることが伝わってきます。

インストール後、.agents/skills/hallmark 配下にファイルが展開され、symlink → Claude Code とある通りClaude Codeからは追加設定なしで参照できる状態になりました。

中身を覗く — 6,188行・24ファイルの設計

find .agents/skills/hallmark -type f | wc -l   # 25（SKILL.md + references 24本）
wc -l .agents/skills/hallmark/SKILL.md .agents/skills/hallmark/references/*.md | tail -1
# 6188 total
du -sh .agents/skills/hallmark
# 960K

SKILL.md 自体はエントリーポイントで、4つの動作モードを定義しています。

呼び出し	動作
（デフォルト）	新規UIを設計フローに従って構築する
`hallmark audit <target>`	対象を読み、アンチパターンリストに照らしてスコアリングし、修正リストを返す（編集はしない）
`hallmark redesign <target>`	既存の実装境界内で視覚構造だけを作り直す
`hallmark study <URL\|screenshot>`	参考にしたいデザインのURLやスクリーンショットから「DNA」を抽出する

さらに、どのモードでも共通して適用される「6つの規律」が定義されています。

事前自己採点: 出力前にPhilosophy・Hierarchy・Execution・Specificity・Restraint・Varietyの6軸で1〜5点を自己採点し、3点未満があれば再修正する
正直なコピー: ユーザーが与えていない数値（「+47%のコンバージョン改善」等）や実在しない導入企業ロゴを捏造しない
トークンのロック: 色・フォントは名前付きトークンからしか参照できず、途中でインラインの16進数カラーを書き足すことを禁じる
偽チュームの禁止: 実在しないブラウザバーやスマホフレームを描画しない
モバイル対応の必須検証: 320/375/414/768pxの4幅すべてで表示崩れを検証する
見出しのイタリック禁止: 見出しにイタリック体を使わない（AI生成UIの典型的な「くせ」の一つとされている）

ゲート数、実は58個だった

各種紹介記事を横断的に見ると、Hallmarkの検査項目数は「65個」「57個」など出典によって表記が揺れていました。実際にインストールしたバージョン1.1.0の references/slop-test.md の1行目を確認したところ、以下のように明記されています。

# Slop test — 58 gates + pre-emit self-critique

ゲートには枝番（38a のような）も存在し、単純な連番カウントでは正確な数字を掴みにくい構成です。二次情報を鵜呑みにせず、現物に当たらないと正確な数字は分からない典型例でした。

ゲートの中身は、以下のように「なぜダメか」まで含めて具体的に書かれています（slop-test.md からの抜粋）。

Does the page reuse a structure it shouldn't — either the generic AI template (Hero → 3 features → CTA → footer), or the same structural fingerprint / macrostructure as a previous Hallmark output in this project?

Nav fingerprint. Is the page's <nav> the AI default — wordmark-left + 4–5 inline text links centred-or-right + button-right at full viewport width + 1 px hairline border-bottom + white background?

自作の「よくあるAI生成UI」を監査させてみる

Hallmarkが実際にどこまで機能するかを確かめるため、意図的に典型的なパターンを詰め込んだHTMLを自分で書きました。

<section class="hero">
  <p>🚀 Introducing</p>
  <h1>Unleash Your Workflow</h1>
  <p>The seamless way to supercharge your team.</p>
  <button>Get Started</button>
</section>
<section class="features">
  <div class="card"><div class="icon">⚡</div><h3>Fast</h3><p>Blazing fast performance.</p></div>
  <div class="card"><div class="icon">🔒</div><h3>Secure</h3><p>Enterprise-grade security.</p></div>
  <div class="card"><div class="icon">🎯</div><h3>Accurate</h3><p>Pinpoint precision.</p></div>
</section>
<blockquote>"This tool 10x'd our productivity." — Jane Doe, Acme Inc.</blockquote>

body { font-family: Inter, sans-serif; }
.hero { min-height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.hero h1 { background: linear-gradient(90deg,#7c3aed,#3b82f6); -webkit-background-clip:text; color:transparent; }
.features { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; }
button { transition: all .2s; }
button:hover { transform: scale(1.05); }

slop-test.md のゲートを1つずつ照らし合わせた結果、以下の9項目が該当しました。

ゲート番号	内容	該当箇所
1	表示フォントがInter/Roboto/Open Sans等のデフォルト	`font-family: Inter`
2	紫→青のグラデーション見出し	`linear-gradient(90deg,#7c3aed,#3b82f6)` + `background-clip:text`
3	アイコン上・見出し下の3カラム等幅カード	`.features` の3カード構成
6	ヒーローが `min-height:100vh` かつ全要素中央揃え	`.hero` の `justify-content:center; align-items:center`
10	`transition: all`	`button { transition: all .2s; }`
11	複数要素に均一な `hover:scale` 効果	`button:hover { transform: scale(1.05); }`
19	プレースホルダー名・定番の社名	`Jane Doe, Acme Inc.`
30	絵文字グリフをアイコンとして使用	`🚀` `⚡` `🔒` `🎯`

わずか30行程度のHTML/CSSに対して、58ゲート中9個（約16%）が即座に反応しました。この9個は、ChatGPTやClaudeに「シンプルなSaaSのランディングページを作って」と頼んだときによく出てくるパターンそのものです。ゲートの説明文自体が「これはAIのデフォルトの癖である」と明言しているものが多く、実物のパターン認識から逆算してルール化されていることがうかがえました。

著者視点の発見ポイント

今回もっとも意外だったのは、Hallmark本体の中身よりも、それをインストールする skills コマンド側の挙動でした。実行環境を claude-code_2-1-218_agent という具体的な文字列で検出し、Gen・Socket・Snykという3つの異なるセキュリティスキャナーの結果を毎回のインストール時に提示する。スキル自体をどう配布・検証するかというエコシステム側の整備が、スキルの中身と同じくらい作り込まれている点は、自分たちのプロジェクトでSkillやMCPサーバーを配布する際にも参考になります。

もう一つは、ゲート数のような単純な事実確認でさえ、二次情報の間でブレていたことです。「65個」「57個」という数字がそれぞれ別の紹介記事に書かれている一方、リポジトリの現物には 58 gates と明記されていました。孫引きの数字をそのまま自分の記事に転記せず、一次ソースに当たる手間を惜しまない必要性を改めて感じました。

自分のプロジェクトに活かすなら

Hallmarkのアプローチは、デザイン以外のレビュー基準にも応用できます。「べからず集」を作文で終わらせず、以下の3点をセットにすることがポイントです。

条件を数値化する: 「アクセントカラーは控えめに」ではなく「アクセントカラーが画面の5%を超えたら失格」のように、判定可能な閾値まで落とし込む
理由を併記する: ゲート8のように「なぜこれがAIっぽく見えるのか」を一言添えることで、ルールが形骸化しにくくなる
自己採点のステップを挟む: 出力前に6軸のスコアを強制することで、ルールを読んだだけで満足するのを防ぐ

自分のCLAUDE.mdやレビュー用Skillに「べからず」を書くとき、Hallmarkの slop-test.md は良い実例になります。

まとめ

Hallmarkは npx skills add nutlope/hallmark でClaude Code含む15種類以上のエージェントに導入できるMITライセンスのデザインスキル
中身は58個の数値化されたチェックゲートと、6つの横断的な規律で構成される
二次情報のゲート数表記（57/65）は不正確で、実物は58個だった
意図的に典型パターンを詰め込んだ自作HTMLは、9個のゲートに即座に該当した

「AIっぽさ」という主観的な違和感を、閾値付きの条件文にまで分解できるかどうかが、レビュー基準として機能するかの分かれ目だと感じました。

参考リンク

Nutlope/hallmark（GitHub） — 本体リポジトリ、skills/hallmark/SKILL.md と references/ 配下を参照

GitHub API（https://api.github.com/repos/Nutlope/hallmark）を2026-07-24にWebFetchで取得。スター数は変動するため執筆時点のスナップショット。 ↩ ↩²

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up