Hallmark とは — AIっぽいUIを避けるコーディングエージェント用デザインスキル。使い方・インストール・Imp
eccable との違い【2026年版】
Hallmarkは、Together AIが公開したMITライセンスのデザインスキルで、Claude Code・Codex・CursorにAIっぽいUIを避けさせる。導入コマンド、使い方、50種のテーマ、Impeccableとの違い、注意点を整理。2026年11月更新。
Hallmark は、Claude Code・Codex・Cursor・OpenCode に「いかにもAIが作った見た目」のUIを避けさせるためのデザイン用エージェントスキルで、Together AI が公開している（MITライセンス、無料）。固定の品質ルールを守らせたうえで、50種のテーマから3案を提示し、ブラウザで検査して仕上げる流れを持つ。ランディングページやWeb UIを作らせると毎回似たような出力になる人に向く。一方、出力は単体のHTML/CSSなので、既存の大きなデザインシステムへの組み込みより、新しいページを作る用途のほうが合う。
リポジトリは2026年4月27日に作られ、2026年5月に公開された。2026年11月2日時点のスター数は約4.5万で、GitHubの週間トレンド1位（今週+11,566スター）になっている。2026年10月22日にリリース版の2.0.0が統合され、10月27日にテーマが50種に増えた。本稿では、GitHubのREADMEなど一次情報をもとに、導入方法、使い方、Impeccable などとの違い、注意点を整理する。公式が書いていない事項は未公表として扱う。
Hallmark とは
コーディングエージェント向けの「スキル」（SKILL.md を中心にした指示と補助スクリプトの束）で、公式の説明は「AIが作ったように見えることを拒むデザインスキル」である。デザインの判断をすべて固定するのではなく、守るべき最低限のルール（Floor）だけを固め、それ以外はテーマの選択やページの目的から決めさせる。作者は Together AI の Hassan El Mghari 氏（GitHub: Nutlope）で、READMEには Impeccable、frontend-design、taste-skill などから着想を得たと書かれている。
| 項目 | 内容 |
|---|---|
| 提供 | Together AI（GitHub: Nutlope/hallmark、公式サイト: usehallmark.com） |
| ライセンス | MIT |
| 対応エージェント | Claude Code、Codex CLI、Cursor、OpenCode（導入時の --agent には github-copilot も指定可） |
| 必要環境 | Node.js 18以上。ブラウザでの検査には Chrome と puppeteer-core（静的なチェックは不要） |
| 最新版 | 2.0.0（2026年10月22日にリリース版を統合。GitHub Releases は未公開） |
| 出力形式 | ページごとに単体のHTMLとCSS。デザイン判断は最初のCSSコメントに記録される |
何ができるか
| 機能 | 内容 |
|---|---|
| 3段階の品質ゲート | Floor（コントラスト、フォーカス、モーション低減、事実の捏造、スマホでの崩れ。通らなければ出さない）、Reflex（モデルが陥りがちな癖。理由を記録すれば覆せる）、Finish（細部の仕上げ。公開は止めない） |
| 50種のテーマ | 紙、書体、色、面、部品、質感を組にした「素材」のカタログ。プロンプトに合う3案を提示する |
| ページの目的から組む | 訪問者がそのページで何をしに来たかから構成を決める（予約ページなら予約操作をその業種で期待される位置に置く） |
| 実際の製品画面 | URL、開発サーバー、アプリからスクリーンショットを取り込める |
| 写真755枚 | Wikimedia Commons の公開ライセンス写真（CC0、パブリックドメイン、CC BY、CC BY-SA）をページ上にクレジット付きで使う。Unsplash・Pexels・Pixabay は対象外 |
| 作り直しと診断 | redesign は内容と配線を残してデザインを変え、audit はレポートのみ出す |
| ブラウザでの検査 | 実ブラウザで「機械が作った痕跡（tells）」を検出する。例は、全見出しの上に付く小さなラベル、字間を広げた大文字のラベル、全ページ末尾の登録フォームなど |
作業は4段階で進む。(1) 事前確認（Pre-flight）：プロジェクトのフォント、配色、フレームワーク、固定された design.md を読み、写真や実際の数値といった素材を一度だけ尋ねる。ないものは捏造しない。(2) テーマの提示（Deal）：theme.mjs deal が合うテーマを3案出し、draw がページの目的から配置を決める。(3) ヒーローから作る（Hero first）：最初にヒーローだけを作って描画し、確認してから残りに進む。(4) 検査とレビュー（Lint & review）：sloplint.mjs --render が8つの画面幅で検査し、最後に新しい文脈のサブエージェントがレビューする。redesign では、作業前に sloplint --before がリンク、入力欄、ハンドラ、見出しをすべて記録し、作業後に sloplint --kept が1つでも欠けていれば失敗とする。既存ページを作り直しても機能が消えない仕組みである。
インストール・料金
導入は npx skills add が基本で、Claude Code ではプラグインとしても入れられる。ブラウザでの検査を使うなら puppeteer-core と Chrome が要る。
# 全プロジェクトに導入（-g を外すと現在のプロジェクトのみ）
npx skills add nutlope/hallmark -g
# エージェントを指定する場合（codex / opencode / cursor / github-copilot も指定可）
npx skills add nutlope/hallmark -g --agent claude-code
# Claude Code プラグインとして導入する場合（/hallmark:hallmark で呼び出す）
/plugin marketplace add nutlope/hallmark
/plugin install hallmark@hallmark
# ブラウザでの検査に使う（Chrome も必要）
npm i -g puppeteer-coreスキルの置き場所は、Claude Code が ~/.claude/skills/hallmark、Codex CLI が ~/.agents/skills/hallmark で、Cursor と OpenCode はこれらのコピーを見つけて使う。リポジトリをクローンした場合は node skills/hallmark/scripts/install.mjs でも導入できる。スキル自体は無料（MIT）で、費用は使うエージェントのモデル利用料として別にかかる。目安のトークン消費量は公式には未公表である。
使い方（最短手順）
1. スキルを導入し、エージェントを起動する
2. /hallmark に続けて作りたいページを自然な文章で頼む（Codex CLI では $hallmark）
3. 事前確認で聞かれた写真や実際の数値を渡す（ない場合は「ない」と伝える）
4. 提示された3つのテーマから選ぶ。ヒーローが先に作られるので、方向性を確認してから先へ進める
5. 検査結果とレビューを読み、必要なら修正を依頼する
# Claude Code / Cursor / OpenCode
/hallmark 歯科医院の予約ページを作って
# Codex CLI
$hallmark 歯科医院の予約ページを作って
# 既存ページの作り直し（内容と配線は残し、デザインシステムとレイアウトを変える）
/hallmark redesign ./index.html
# 診断だけ（レポートのみ、ファイルは変更しない）
/hallmark audit ./index.htmlプロンプトには自然文の修飾語を付けられる。「keep the layout」は配置を保ったまま見た目だけを変え、「polish」は機械的な痕跡の修正だけを行い、「custom」はテーマのカタログを使わずプロンプトだけで進める（ルールは同じ）。「use hallmark to build ...」のように頼んでも呼び出せる。また scripts/install-hook.mjs を実行すると、編集のたびに Floor を確認するフックを Claude Code に追加できる。
Impeccable・taste-skill・frontend-design との違い
| ツール | 提供・ライセンス | アプローチ | 主なコマンド | 向いている用途 |
|---|---|---|---|---|
| Hallmark | Together AI（Nutlope）／MIT | 固定の品質ルール（Floor）、50種のテーマ、ブラウザでのlint、サブエージェントのレビューを組み合わせた作成パイプライン | /hallmark、redesign、audit | 新しいランディングページやWeb UIを、AIっぽさを避けて作る |
| Impeccable | pbakaus（Paul Bakaus）／Apache-2.0 | コーディングエージェントに「デザインの語彙」を与え、既存のUIを調整・磨き込むコマンド群（24コマンド） | /impeccable init、bolder、quieter、critique、audit、polish など | 既存UIの方向づけ、レビュー、仕上げ |
| taste-skill | Leonxlnx | エージェントのアートディレクションと見た目の確認を導くスキル群（詳細は公式README参照） | 公式のREADMEを参照 | 見た目の方向性を引き上げたい場合 |
| frontend-design | Anthropic 公式スキル集（anthropics/skills）に含まれる | フロントエンドのデザイン用スキル（一般的な説明にとどめる） | 公式のリポジトリを参照 | Claude で手軽に整ったフロントエンドを作る |
使い分けの目安は次のとおりである。新しいページをゼロから作り、機械的な痕跡を検査で潰したいなら Hallmark が合う。すでにあるUIを強める・弱める・磨くといった調整を、コマンドの語彙で指示したいなら Impeccable が向く。両者は役割が重なる部分もあるが、併用もできる。Hallmark 自身も README で Impeccable や frontend-design を着想元として挙げており、競合というより発想を共有するツールとして並べて試すのがよい。
注意点・向いていない用途
- 出力は単体のHTML/CSSなので、既存のコンポーネント設計（ReactやNext.jsなど）に組み込むには手作業が要る
- ブラウザでの検査には Chrome と puppeteer-core が必要で、静的なチェックだけの環境では検査の範囲が狭くなる
- 写真は CC BY・CC BY-SA のものを含み、帰属表示が必要になる。Hallmark はページ上にクレジットを付けるので、消さずに残すこと
- ブランドの方針やトーンの決定は代わらない。デザイナーが決めるべき判断は人が行う
- モデルの利用料が別にかかる。ヒーロー作成、検査、レビューで複数回のやり取りが発生する
- 更新が速い。2026年10月だけでも大きな更新が続いたので、導入前にリポジトリで最新の仕様を確認する
エージェントスキルの他の例は、Cloudflare security-audit-skill、diagram-design スキルの記事で扱っている。Claude Code そのものの使い方はClaude Code 完全ガイドを参照。
よくある質問
Hallmark は無料で使えますか。
スキル本体は MIT ライセンスで無料である。ただし、動かすコーディングエージェントのモデル利用料は別にかかる。
Claude Code 以外でも使えますか。
使える。READMEは Claude Code、Codex、Cursor、OpenCode を対象にしており、導入時の --agent には github-copilot も指定できる。Codex CLI では $hallmark、Cursor と OpenCode では /hallmark で呼び出す。
既存のサイトにも使えますか。
使える。/hallmark redesign <パス> は内容と配線を残してデザインシステムとレイアウトを変え、/hallmark audit <パス> はレポートだけを出す。redesign では作業前後にリンク、入力欄、ハンドラ、見出しを照合する。ただし出力は単体のHTML/CSSなので、大きなコンポーネント設計の中に戻す作業は別途必要になる。
日本語のサイトでも使えますか。
プロンプトは日本語で書いてもエージェントが解釈するため頼める。ただし、公式が日本語サイトへの対応を明記しているわけではない。テーマの書体や文字組みは Hallmark 側で設計されるため、日本語の表示（フォント、行間、字詰め）は実際の出力を自分で確認したほうがよい。
Impeccable と併用できますか。
併用を禁じる記載は確認していない。新規ページは Hallmark で作り、既存UIの調整や仕上げは Impeccable のコマンドで行うといった役割分担ができる。ただし同じ指示が重なると出力が揺れることもあるため、最初は1つずつ試すのがよい。
参考リンク
お気軽にご相談ください
お問い合わせ