なぜAIは同じようなUIを作るのか？コード0行のデザイン制御スキル「Hallmark」
AI生成UIの「指紋」を消し去る、コード0行のデザイン制御スキル「Hallmark」とは？
「AIコーディングアシスタント（Claude CodeやCursorなど）を使ってランディングページ（LP）やアプリの画面を作ってみたけれど、しっかり動くのになんだかダサい……」
「紫からピンクへのグラデーション、きれいに3列に並んだカード、白背景にすっきりしたInterフォント……どこかで見たことがあるようなデザインばかり出来上がる」
AIを使ってUIデザインを生成したことがある開発者やデザイナーなら、一度はこのような「マンネリ感」を抱いたことがあるのではないでしょうか。
実はこれ、主観的な印象ではなく、AIが生成するUIに特有の「指紋（AI-slop）」と呼ばれる典型的な症状なのです。
このAI-slop（AI生成の雑で画一的なデザインパターン）を根本から防ぎ、AIに「プロ仕様のユニークなデザイン」を強制的に出力させるためのオープンソースの仕組みが、いま世界中で大きな話題を呼んでいます。
それが、Together AIのチームおよび著名なAIデベロッパーのNutlope（Hassan El Mghari）氏によって開発された、AI向けデザイン制御スキル「Hallmark」です。本記事では、この注目のツールの背景から画期的な仕組みまでを徹底解説します。
1. なぜAIは「同じ顔のUI」ばかり作るのか？
AIでUIを作ると、何も指定しない限り、なぜか毎回似たようなデザインに収束していきます。これには、大規模言語モデル（LLM）の構造上の特性が関係しています。
LLMは「統計的な最頻値」に戻ろうとする
LLMは、膨大な学習データの中から「最も確率的に発生しやすいパターン」を正しい選択肢（安全な選択）として出力します。
インターネット上には、テンプレート化された無難なデザイン（紫グラデのヒーローエリア、3列の機能紹介、Interフォントなど）が大量に存在するため、AIにとっては「よく見るパターン＝最頻値」になります。その結果、特別な指示を与えない限り、統計的な平均値である「いつものダサいUI」に戻ってしまいます。このような陳腐で量産型のAIデザインは、海外では「AI-slop（AIの雑な残飯）」と揶揄されています。
プロンプトの限界：「オシャレにして」が効かない理由
「ダサくしないで」「もっとオシャレにして」というプロンプトは効果がありません。
AIにとって「オシャレ」や「ダサい」という形容詞の定義は極めて曖昧です。具体的なデザインの基準がないため、指示を受け取ったAIは結局「平均値（最頻パターン）」に収束するしかありません。
AIにクオリティの高い、かつ被らないデザインを出力させるには、曖昧な言葉ではなく、「何がダメで、何を使うべきか」を物理的かつ具体的にルール化して縛る必要があるのです。
2. MarkdownだけでAIを制御する「Hallmark」
この問題を解決するために開発され、リリースから3ヶ月を待たずにGitHubで1.2万以上のスターを獲得するほど爆発的な支持を集めているのが「Hallmark」です。
驚くべきことに、Hallmarkはnpmパッケージとして配布されていますが、動くプログラムコード（JavaScript等）は1行も含まれていません（実行コード0行）。
中身はすべて「AIのためのMarkdown」
Hallmarkの実体は、558行に及ぶプロンプトファイル（SKILL.md）と、1万行を超えるデザインルール集（references/ フォルダ）です。
AIコーディングアシスタントがこのMarkdownファイルを読み込むことで、AI自身の「デザイン知識」がアップデートされ、出力するコードの品質とバリエーションが劇的に変化します。
これは「Skills for AI coding assistants」と呼ばれる、AIアシスタントに特定の知識や役割をインストールする新しいエコシステムを象徴するツールです。プログラムを実行して出力を加工するのではなく、「AIの判断基準そのものを設計して配布する」という新しいアプローチをとっています。
3. 「AIっぽさ」を物理的に排除する3つの制御システム
Hallmarkがどのようにして「AIらしさ（AI-slop）」を検出・排除し、プロ品質のUIを出力させているのか、その仕組みは大きく3つのシステムに分かれています。
① 420通りのビジュアル多様化ルール
Hallmarkは、AIが特定のデザインパターンに固執するのを防ぐため、デザインの掛け算を行います。具体的には、20種類のビジュアルテーマと、**21種類のマクロ構造（レイアウト骨格）**をカタログとして登録しています。
ビジュアルテーマの具体例
Specimen: 科学の標本や図鑑を想起させる、無機質で機能的な美しさを持つデザイン。
Brutal: 枠線や極太のタイポグラフィ、あえて粗削りな影を配置した、個性的でアバンギャルドなスタイル。
Newsprint: 新聞紙のような多段組レイアウトと落ち着いたモノクロトーンの組み合わせ。
Terminal: 黒背景に緑の等幅フォントを配した、コマンドライン画面のようなエンジニア向けデザイン。
Garden: 深いフォレストグリーンやクレイ（赤粘土）カラーを使い、自然派の温かみを表現したオーガニックデザイン。
Riso: リソグラフ印刷（版画）のようなインクの掠れやズレ、ざらざらした質感をデジタルで表現したレトロなデザイン。
マクロ構造（レイアウト）の具体例
Bento Grid: 弁当箱の仕切りのように、四角いカード（タイル）で画面を美しく分割整理する今風のグリッド構造。
Marquee Hero: 画面最上部にテキストが流れるように動くアニメーション（電光掲示板風）を取り入れた、ダイナミックなヘッダー。
Manifesto: 中央に巨大な思想主張（メッセージ）を堂々と配置し、余計な装飾を削ぎ落としたメッセージ重視型レイアウト。
Long Document: 学術的な論文や読み物のように、縦にストレスなくテキストを流し読みさせる読書型レイアウト。
Stat-Led: 数字や統計データ、グラフなどの「実績実績」を一番目立たせる構成。
これらをランダムに掛け合わせることで、合計420通りの個性的なデザインパターンが自動生成されます。
さらに、同じデザインが連続して出力されるのを防ぐため、生成履歴をプロジェクト内の .hallmark/log.json に保存します。前回と同じマクロ構造は物理的に選択できない仕組みになっており、出力されるCSSの先頭には、適用されたテーマ名などを記載した「CSSスタンプ（例: /* Hallmark · macrostructure: Bento Grid · theme: Riso */）」が刻印され、二重の履歴管理を行います。
② 58項目の厳格なチェックリスト「slop-test」
デザインが決まり、コードが出力される直前に、AIは58項目に及ぶチェックリスト（slop-test）による厳しい監査をクリアしなければなりません。1つでもアンチパターン（AI-slop）に引っかかった場合、そのコードは破棄され、修正パスに差し戻されます。
このテストは、スマホの代表的な画面幅である320px（小画面）、375px（標準）、414px（大画面）、そしてタブレット（768px）の計4幅の解像度において個別に実行されます。
チェック項目（slop-test）の代表例
Gate 38a (見出し内の「イタリック強調」禁止): AI生成UIに最も多く見られる「Built to think」や「Simply better」のように、見出しの1単語だけを斜体（イタリック）にする手法です。これが「AI生成の指紋」として最も判別しやすい要素であるため、Hallmarkはこれを一切許しません。
Gate 49 (CTAボタンのテキスト改行禁止): 「無料で試してみる」といったボタンの中の文字が、画面幅が狭くなった際に「無料で試して\nみる」のように2行に折り返されるのを禁止します。折り返されると途端にスタイリングミス（崩れ）に見え、サイトの信頼性を損ねるためです。
Gate 40 & 41 (コントラストの自動計算): WCAG 2.1や、より人間に近い視覚評価ができるAPCA基準を採用。暗い背景に対する文字色のコントラスト値を自動計算し、視認性の悪い「ダークグレー背景にライトグレー文字」のような配色を即座にエラー判定し、再作成させます。
③ 6軸によるAIの自己採点（self-critique）
すべてのテストゲートを通過した後、AIは出力するUIに対して、自ら6つの評価軸で1〜5点（5点満点）の自己採点を行います。
Philosophy: 生成されたUIが、選んだテーマ（例: Garden）の持つ哲学やトーンに忠実であるか。
Hierarchy: 見出し、段落、ボタンなどの視覚的な優先順位が整理されているか。
Execution: CSSの実装がクリーンで、無駄な記述やハックコードが含まれていないか。
Specificity: 汎用テンプレートの使い回しではなく、そのブランドに特化したユニークさ（特異性）があるか。
Restraint: 余計なグラデーションや飾りを削ぎ落とした「引き算の美学（抑制）」があるか。
Variety: 画面の上から下まで単調なレイアウトの繰り返しになっていないか。
この自己採点において、3点未満の軸が1つでも存在した場合、AIはそのデザインコードを自らボツにし、再び最初からやり直します。この厳格な品質保証ループにより、プロレベルのクオリティが担保されます。
4. 目的に合わせて使い分ける「4つのモード」
Hallmarkには、AIにデザインを指示する際、目的に応じて使い分けられる4つの「動詞（コマンドモード）」が用意されています。
Default (新規構築)
役割: ゼロから完全にユニークなUIを作るモード。
動作: AIが履歴（log.json）を参照して前回使っていないテーマとマクロ構造を選び出します。58項目のslop-testと自己採点を自動で実行し、完全にチェックを通過したクリーンなHTML/CSSコードを新規生成します。
Audit (監査)
役割: 既存のコードを編集せず、デザインの品質を「減点方式」で客観的に評価するモード。
動作: すでに作成されたUIのコードを読み込み、58のテストゲートに基づいてアンチパターンの数を計測。結果は「58ゲート中何個に違反したか」のスコアと、詳細なパンチリスト（改善箇所リスト、例:「ボタンの文字が折り返されています」「見出しの強調に禁止されているイタリックが使われています」など）として出力されます。これにより、手動でリファクタリングする際の間違い探しが一瞬で完了します。
Redesign (再設計)
役割: 文章や機能はそのままに、見た目の「AIの指紋」だけを排除して別デザインにリニューアルするモード。
動作: 提供された既存のHTML/CSSコードから、テキスト、ブランド構成、情報の掲載順序（情報設計）は一切変えずにキープします。その上で、AIっぽさの原因となっている紫グラデーションや平凡な余白設定などの「指紋」だけを抽出し、Hallmarkの全く新しいビジュアルテーマ（例: RisoやNewsprint）にスキンを着せ替えます。
Study (学習)
役割: 優れたUIデザインの「DNA（本質）」を抽出し、学習するモード。
動作: 参考にしたいWebサイトのURLやスクリーンショットを入力すると、AIが「カラーパレットの組み合わせ方」「余白の黄金比」「特徴的なフォントのペアリング」「マクロ構造」といったエッセンスのみを抽出・言語化します。他サイトのピクセル単位での完全な丸パクリ（デッドコピー）は著作権保護とオリジナリティの観点から明確に拒否され、あくまで「優れたデザインの法則性」のみを抽出し、自プロジェクトに適合させる形で翻訳して適用します。
特に既存のWebサイトがある場合、まずは「Audit」をかけて自サイトの「AIっぽさ（AI-slop度）」を測定してみるのが非常に効果的です。
5. ユースケースに応じた多彩な仕上がり
Hallmarkを適用すると、同じAIアシスタントでも、作るプロダクトの性質やブランドに合わせて全く異なる表情のUIをデザインできるようになります。
開発者向けサービス（例: APIツール）
テーマに「Cobalt」などを選択。フォントには力強い「grotesk（グロテスク）」系のサンセリフ書体を使い、実際のターミナルコマンドやcurlのコードを主役に据えた、エンジニアに刺さる硬派なデザインを出力します。
クリエイティブ系（例: 音楽EPサイト）
テーマに「Carnival」などを選択。極太のコンデンス（幅広・長体）フォントを縦に大胆に積み上げ、背景の余白を活かした、タイポグラフィ自体がビジュアルの主役となるポスター風レイアウトを生成します。
このように、用途に応じて最適なテーマと構造が選ばれるため、「何を作っても同じようなLPになる」というAI生成のマンネリが完全に解消されます。
6. Hallmark導入のメリットと知っておくべき注意点
Hallmarkは非常に強力ですが、導入前にいくつかの制約を理解しておく必要があります。
メリット
Safety rail（安全レール）の搭載: 既存プロジェクトで稼働させる際、AIが勝手に既存のファイルを削除・上書きすることを防ぎます。削除を行う前には、必ず開発者に対して明示的な確認を求めます。
MITライセンス: オープンソースとして提供されており、特定のプラットフォームへのロックインなく自由に利用・カスタマイズできます。
注意点・トレードオフ
生成時間の増加: モバイル4幅のテスト、58ゲートの判定、そして自己採点によるループが発生するため、単純にUIコードを出力するよりも生成完了までの時間が伸びます。
トークン（コンテキスト）消費量の増加: 1万行を超える膨大なルール集をAIに読み込ませるため、AIアシスタントとのやり取りにおいてコンテキストウィンドウを大きく消費し、トークン料金（または制限枠）に影響を与える可能性があります。
導入方法
プロジェクトにHallmarkを導入するには、対応した環境のターミナルで以下のコマンドを実行します。
npx skills add nutlope/hallmarkこれにより、各エディタに対応したフォルダに自動的に配置されます。
Claude Code: ~/.claude/skills/hallmark/
Cursor: .cursor/rules/hallmark.mdc
Codex: ~/.codex/skills/hallmark/
まとめ：AIの「振る舞い」を設計する時代へ
Hallmarkの登場は、単に「AIで綺麗なUIが作れるようになった」という話に留まりません。
実行コードが0行で、Markdownだけで構成されたこのパッケージは、「AIに読ませるルールや知識（プロンプトやMarkdown）を、ライブラリのようにパッケージ化して配布・共有する」という、新しい開発文化（AI Skills）の始まりを示しています。
AIに指示を出すときに「いい感じにして」と願うのではなく、「何が良くて、何がアンチパターンなのか」のルールセットをAIにインストールする。このアプローチこそが、AIを本当の意味で「プロフェッショナルの相棒」にするための鍵となるでしょう。
もし、ご自身のAI開発で「出来上がったUIがなんだかダサい」と感じたら、まずはHallmarkの Audit（監査） モードを実行して、デザインの現実をチェックしてみてはいかがでしょうか。
