hallmark とは Claude CodeのAIっぽいUIを消すskill

Claude Codeでランディングページを組ませると、紫グラデーションの背景、3枚並んだカード、大げさな数字バッジ。

毎回これが出てくる、あの現象です。

あれ、モデルのセンスが悪いのではなく、学習データの既定値が揃いすぎているせいなんです。

その「AIっぽい既定値」を意匠のレベルで剥がしにいくのが、GitHubで週+9,173スターを集めた hallmark という Claude Code 向け skill です。

hallmark とは Claude Code向けの脱AI slopデザインskill

hallmark は Together AI が公開した Claude Code 向けの skill です。

作者は Nutlope さん（本名 Hassan El Mghari）、複数の話題 OSS を出している人です。

ライセンスは MIT。

GitHub Trending の weekly では、2026-07-20 時点で累計約 14,245 スター、直近1週だけで +9,173 スターを積み上げています。

やっていることは1行で言い切れます。

AI が生成する UI の「見たことある感」を、構造の段階で拒否する skill です。

全体が「anti-slop」という1点に振り切れていて、装飾ではなく設計側から AI っぽさを潰しにいく作りです。

その「潰し方」には、はっきりした理由があります。

GitHub - Nutlope/hallmark: Anti-AI-slop design skill for Claude Code, Cursor, and Codex.

Anti-AI-slop design skill for Claude Code, Cursor, and Codex. - Nutlope/hallmark

github.com

なぜAI生成UIは「それっぽいだけ」になるのか

言語モデルは学習データの中で頻度が高いパターンに寄ります。

UI 生成でも同じ現象が起きて、既定値として「紫グラデーション背景、3枚の等幅カード、+47% conversion 型の煽り数字、丸っこいピル型ボタン」が量産されます。

この「AI が吐いた残骸のような UI」を、コミュニティは AI slop と呼び始めました。

原因は分布の収束（distributional convergence）で、モデルが賢くなるほど「みんな使っていそうな型」に落ちていく皮肉な現象です。

hallmark の SKILL.md にはこの現象が "structural sameness is the AI fingerprint" と書かれています。

構造そのものが AI の指紋になっているから、色を変えてもフォントを変えても AI っぽさは消えない、が hallmark の立脚点です。

ここが分かれ目です。

表層をいじるか、構造そのものを疑うかで、できあがるものの設計思想がまるで変わってきます。

hallmark が選ぶのは迷わず後者です。

中身を見ていくと、思っていたより作り込まれています。

hallmarkの中身 20テーマと57のslop-testゲート

hallmark には 20 の名前つき theme が組み込まれています。

theme は配色・フォント・余白・モーションといった「装い」を決めるレイヤーで、macrostructure（Bento Grid / Marquee Hero / Long Document 等、ページの骨格を決める全 21 種類の「型」）とは別軸で設計されています。

服のシルエットと生地・色が別物なのと同じ関係です。

生成時はまず macrostructure を1つ選び、そのあとに theme を選ぶ2段階になっていて、同じ theme でも骨格が違えば見た目が被らないようになっています。

macrostructure と theme を決めた後、出力される直前に 57 個の slop-test ゲートを通過させます。

これは「紫グラデを避ける」「ピル型ボタンを量産しない」「捏造 metric を書かない」といった具体的なアンチパターン検出器の集合で、1つでも引っかかると出力が差し戻されます。

加えて出力前に自己採点を回す pre-emit self-critique の仕組みもあって、2段構えで既定値を止めにいきます。

4つの動詞 build audit redesign study

hallmark は動詞が4つあって、目的別に使い分けます。

audit は編集を行わないので、既存プロジェクトに気軽に当てられます。

study は portable な design.md を吐き出せるので、他 skill やチームメンバーへ共有もしやすい設計です。

6つの規律と6軸の構造フィンガープリント

さらに内部には6つの規律（Discipline）があります。

1. Pre-emit self-critique（Philosophy / Hierarchy / Execution / Specificity / Restraint / Variety の6軸で1〜5点を自己採点し、3未満は revise）
2. Honest copy（「+47% conversion」「trusted by 50,000+ teams」のような捏造 metric を書かない）
3. Locked tokens（生成の途中で inline OKLCH や hex を書かず、必ず名前付きトークン参照にする）
4. No re-drawn chrome（偽のブラウザバー、偽のフォンフレーム、偽のコード枠を書かない）
5. Mobile responsiveness（320 / 375 / 414 / 768 px の4サイズで検証、横スクロールと2行クリック不可を禁止）
6. Typography purity（見出しは常に roman、italic 見出しは禁止）

構造フィンガープリントは6軸で決まります。

Section heading / Body composition / Divider / Button voice / Image treatment / Reveal pattern の各選択肢を掛け合わせると、8×7×5×5×5×6 で 42,000 通りの組み合わせが生まれる計算です。

同じ theme を選んでも、骨格の分岐のおかげで何十本重ねてもまず被りません。

単一UI要素だけを頼むと macrostructure はスキップされ、代わりに 8 states（default / hover / focus / active / disabled / loading / error / success）を全部書ききる設計に切り替わります。

ここまでくると、あとは実際に動かして確かめるだけです。

インストールと最初の一手 Claude Code Cursor Codex

インストールは1行で終わります。

npx skills add nutlope/hallmark

配置先は環境で分かれていて、Claude Code なら ~/.claude/skills/hallmark/、Cursor なら .cursor/rules/hallmark.mdc、Codex なら ~/.codex/skills/hallmark/ に入ります。

初回起動時に hallmark は pre-flight scan を走らせ、既存プロジェクトから6つのシグナルを読みます。

font stack、palette、motion、spacing、framework、そして root にある design.md です。

design.md があればそれが最優先の指示書になるので、既存のブランドガイドを design.md にまとめておくと生成物が寄ります。

最初の一手として推せるのは build ではなく audit です。

既存のランディングページや管理画面に hallmark audit を当てると、slop-test で何個ヒットしたか、どの規律に引っかかったかが punch list で返ってきます。

編集は入らないので、副作用が怖い案件でも試せます。

スコアを見てから必要なら redesign へ進む流れが軽いです。

気になるのは、似たような skill との違いです。

他のAI slop対策skillとの位置づけ frontend-design taste-skill astryx

Claude Code の skill エコシステムには、UI 品質を扱うものが hallmark 以外にもいくつか出てきています。

それぞれ守備範囲が違います。

Anthropic 公式の frontend-design は、プラットフォームベースで基礎的なフロントエンド美意識を扱う汎用 skill です。

土台としては強いですが、AI 特有の指紋を消すことに特化しているわけではありません。

taste-skill 系の周辺 skill も、切り口はデザイン品質向上寄りで、anti-slop という尖った目的では設計されていません。

以前私が別記事で扱った astryx は、既存のデザインシステムを AI 側にメタで持たせる別アプローチで、hallmark とは戦っている土俵が違います。

astryx がデザインシステムを AI に読ませる skill なら、hallmark はデザインシステムがない状態でも「AI っぽく見えない出力」を強制する skill、という棲み分けです。

一言でまとめると、hallmark は anti-slop に振り切った専門特化枠です。

frontend-design が土台なら hallmark は仕上げ。

両方入れても競合しないので、frontend-design を既に入れているプロジェクトでも上乗せで導入できます。

問題は、どこまで信頼して使えるかです。

hallmarkの使いどころと限界 週14000スターの伸びをどう見るか

hallmark が刺さるのは、UI の型が固まっていない場面です。

新規のランディングページ、まだデザインシステムが未整備の管理画面、既存 UI の棚卸し、憧れのデザインから DNA だけ抜きたい調査フェーズ。

この4つは build / audit / redesign / study にちょうど1対1で対応するので、動詞の選択に迷いません。

逆に向いていないのは、デザインシステムが既に厳密に規定されているプロジェクトや、ブランドブックの制約が強い受託案件です。

この場合、hallmark が持ち込む 20 テーマの catalog がむしろノイズになりやすいです。

ただし brief の中でブランドカラーや多属性の vibe を明示的に指定するか「custom で」と依頼すると、hallmark 側に Custom branch が発火して、即席の OKLCH palette と free-font pairing を作りにいく逃げ道もあります。

ブランドが強い案件はここに寄せて使うのが現実的です。

週+9,173 スターの急伸は、一過性のバズというより空白を埋めた結果だと見ています。

AI コーディング全体で「意匠を担当する skill」がずっと未成熟でした。

公式の frontend-design がそれっぽい土台を提供する一方、細部の「AI っぽさ」までは踏み込めていない。

そこに Component scope の 8 states 網羅や 42,000 通りの構造分岐といった実務で欲しい粒度で入ってきたのが、伸びの理由だと読んでいます。

Claude Code の生成品質は、モデル本体の性能よりも skill 側の型で決まる時代に入っています。

hallmark を入れておけば、毎回ゼロから「紫グラデにするな」「+47% conversion なんて書くな」と指示する手間が丸ごと消えます。

audit は既存コードを書き換えないので、試すコストはほぼゼロです。

まずは npx skills add nutlope/hallmark を叩いて、既存 LP に hallmark audit を当てて punch list を眺めるところから始めてみてください。

Hallmark — A design skill that refuses to look AI-generated

A design skill for AI coding assistants. Encodes the anti-slop consensus into one ruleset. Powered by Together AI.

www.usehallmark.com