2026 年 7 月、Nutlope/hallmark というオープンソースプロジェクトが GitHub Trending で爆発的に人気を集めた。1 日で 3,181 スター増加、あっという間に 10,000+ stars を突破。これは新しい AI モデルでもプログラミングフレームワークでもない。AI-slop に対抗するデザイン Skill だ。

AI が生成するウェブページがどれも同じテンプレートみたいでうんざりしているなら、Hallmark はまさにあなたのためにある。

Hallmark とは？

Hallmark は Claude Code、Cursor、Codex などの AI プログラミングツール専用の「AI っぽさ排除」デザイン Skill。Together AI チームによって開発され、MIT ライセンスで公開されている。

なぜ AI 生成デザインはいつも同じになるのか？

すべての大規模言語モデルは同じインターネットデータで学習されており、デフォルトでは似たような「分布の中心」（on-distribution defaults）に収束する。その結果：

  • どの landing page も hero + 3 カラム features + CTA
  • カラーパレットはいつもグラデーション + 白カード
  • フォントはいつも Inter / sans-serif
  • レイアウトもほぼ同じ

この現象は "AI slop" と呼ばれる —— AI が生成するコンテンツがどれも同じ型から抜き出したように見えること。

Hallmark はどう解決するのか？

Hallmark のコアメカニズムはとてもスマートだ：

メカニズム 説明
21 種類のマクロ構造 毎回 21 種類のレイアウトからランダム選択、構造の多様性を確保
20+ テーマ Distil、Cold Snap、Bubble、Garden、Riso など全く異なるスタイルをカバー
57 の slop 検出ゲート 生成後に 57 種類の AI 典型的デザインアンチパターンを自動検出
プレローンチ自己検査 出力前に自己レビューを行い、基準を満たさなければ出力を拒否

結果：Hallmark で生成された 2 つのページは、同じテンプレートの色違いではなく、全く異なる 2 つのウェブサイトのように見える。

Hallmark のインストール

方法 1：npx を使う（推奨）

一番簡単なのは npx skills add コマンド：

BASH 
npx skills add nutlope/hallmark

このコマンドで Hallmark の Skill ファイルが AI ツールの設定ディレクトリに自動ダウンロードされる。アップデート時は再度実行すれば OK。

方法 2：手動インストール

自分で管理したい場合は、SKILL.md と references/ フォルダをダウンロードして、それぞれのディレクトリに配置する：

Claude Code：

BASH 
mkdir -p ~/.claude/skills/hallmark/
# SKILL.md と references/ をここに配置

Cursor：

BASH 
# プロジェクトルートに作成
mkdir -p .cursor/rules/
# SKILL.md の内容（frontmatter 以外）を .cursor/rules/hallmark.mdc に配置

Codex：

BASH 
# 個人レベル（グローバル）
mkdir -p ~/.codex/skills/hallmark/

# プロジェクトレベル（現在のプロジェクトのみ）
mkdir -p .codex/skills/hallmark/

Hallmark の 4 つのコアコマンド

Hallmark は新規作成からリファクタリングまで、完全なワークフローをカバーする 4 つの強力なコマンドを提供する：

1. hallmark（デフォルトコマンド）

最もよく使うコマンド。新しい UI をゼロから構築する。

TEXT 
hallmark

動作： - ニーズに合ったマクロ構造を選択 - ルールセットを適用 - 57 の slop テストを実行 - 出力前に自己レビュー

✅ 効果：新しいページごとに独自の「デザイン指紋」を持ち、同じものが 1 つとしてない

2. hallmark audit <target>

既存コードを評価し、AI-slop アンチパターンを検出する。

TEXT 
hallmark audit src/components/LandingPage.jsx

動作： - 対象ファイルまたはディレクトリのコードを分析 - スコアリングと検出した AI デザインアンチパターンを一覧表示 - 修正提案リストを生成 - コードは変更しない、純粋な診断

✅ 効果：どこをリファクタリングすべきかすぐにわかり、手当たり次第に書き直す必要がなくなる

3. hallmark redesign <target>

既存ページをリファクタリングする。コアコンテンツは残しつつ、見た目を完全に刷新。

TEXT 
hallmark redesign src/pages/Home.jsx

動作： - 既存の構造を破棄 - コピー、情報アーキテクチャ、ブランド要素は保持 - 全く新しいデザイン指紋でページ全体を再構築 - 新しいデザインが Hallmark の anti-slop 基準を満たすことを確認

✅ 効果：1 回のリファクタリングで生まれ変わり、ビジネスロジックはそのまま

4. hallmark study <screenshot | URL>

優れたデザインを学習し、そのデザイン DNA を抽出する。

TEXT 
hallmark study https://example.com/design-inspiration

動作： - スクリーンショットまたは Web URL を分析 - マクロ構造、フォントペアリング、カラーアンカーなどのコアデザイン要素を抽出 - ピクセルレベルの複製や有料テンプレートの模倣は拒否 - オプションで移植可能な design.md ファイルを生成し、他の AI ツールとの連携に使用

✅ 効果：マスターレベルのデザインを再利用可能なデザインシステムに変換

実践デモ：Landing Page をゼロから構築

Hallmark を使ってモダン SaaS 製品のランディングページを作ってみよう：

  1. Claude Code を起動し、Hallmark Skill が有効であることを確認
  2. プロンプトを入力： text hallmark を使って SaaS 製品のランディングページを構築してください。製品名は "Hyperlane"、機能は Dev Infrastructure モニタリングプラットフォーム、ターゲットユーザーはエンジニア、リアルタイム性と信頼性を重視。
  3. 出力を確認： - Hallmark が自動的に "Hyperlane" テーマを選択（公式サンプルから） - ユニークなグリッドレイアウトとカラースキームを使用 - エンジニア向けの専用コピーとビジュアル要素を含む - 生成された HTML/CSS ファイルには使用したマクロ構造を示すコメント付き

これが Hallmark の魔法 —— 汎用テンプレートではなく、特定の製品のためにカスタマイズされたデザイン。

Hallmark のデザイン哲学

Hallmark の背景には深いデザイン哲学がある：

  • テンプレート化を拒否：「デフォルトテーマ」はなく、毎回全新しい創作
  • 多様性を受け入れる：21 種類のマクロ構造で構造の繰り返しを防止
  • 品質優先：57 の検出ゲートは人間デザイナーより厳しい
  • 追跡可能性：生成された HTML ファイルにはデザイン指紋を示す CSS コメント付き
  • 組み合わせ可能：生成された design.md は他の AI ツールにインポート可能で、デザインパイプラインを構築

まとめ

Hallmark はシンプルな CSS フレームワークではない。デザイン思考を持つ AI エージェントだ。AI ツールに人間のデザイナーのような考え方を教える：コンテキストを理解し、ブランドを尊重し、独自性を追求し、凡庸を避ける。

AI デザインツールが氾濫する今、Hallmark は全く異なるアプローチを提供する。AI でもっと速く大量に生成するのではなく、より少なく、しかしより良いものを生成する。

🚀 今すぐ始めよう： 1. Hallmark 公式サイト で全サンプルを確認 2. GitHub の Nutlope/hallmark に Star を付ける 3. npx skills add nutlope/hallmark を実行して反 AI-slop デザインの旅を始めよう

本記事は Hallmark v2.1.0 に基づいて執筆されています。最新バージョンは GitHub リポジトリ を参照してください