はじめに
GitHubのトレンド（2026-11-03時点）に、Nutlope/hallmark というリポジトリが入っていました。AIコーディングエージェント向けの「デザインスキル」で、キャッチコピーは "refuses to look AI-generated"（AIが作ったように見えないものを作る）です。
AIに画面を作らせると、見出しの上に小さなラベルが付く、一部の単語だけ色が違う、末尾にメール登録欄がある、といった「どこかで見た構成」になりがちです。hallmarkは、そうした癖を禁止するルールと、50種類のテーマ（素材）、検査スクリプトをスキルとして渡すものです。
本記事では同じプロンプトで、スキルなしのClaude Codeとhallmarkを使った場合を1回ずつ生成し、見た目、事実の正確さ、時間とコストを比べました。題材は、Amazon Bedrock AgentCoreの13サービスを紹介するページです。サービス数が多く、情報設計が単純にならないので、スキルの差が出やすいと考えました。
リポジトリ
hallmarkとは
以下はREADMEの記述をもとにしています。動作は後の検証で確認しています。
| 項目 | 内容 | 確度 |
|---|---|---|
| 位置づけ | AIコーディングエージェント向けのデザインスキル | READMEの記載 |
| 作者・ライセンス | リポジトリ所有者はNutlope、"Made by Together AI" と記載。MIT | READMEの記載 |
| 対応ツール | Claude Code、Codex CLI、Cursor、OpenCode | READMEの記載 |
| 要件 | Node 18以上。ブラウザ検査には puppeteer-core と Chrome が別途必要 | READMEの記載 |
| 出力 | 自己完結したHTML+CSS | READMEの記載。今回の出力もHTML1ファイル |
2026-11-03時点で、スターは約46.6k、フォークは約2.5kでした。
仕組み
READMEによると、流れは次のとおりです。
- プリフライト：プロジェクトの設定を読み、実素材（写真、数値など）を1回だけ尋ねる。素材を作り話で補わない方針
- テーマの選択：50種類から合うものを3つ提示する
- ヒーローセクションを先に作り、描画してレビューする
-
sloplint --renderが8つの幅で検査し、新しいコンテキストのサブエージェントがレビューする
ルールは3階層に分かれています。
| 階層 | 意味 | 例（READMEより） |
|---|---|---|
| Floor | 出荷を止める | コントラスト、フォーカス状態、reduced motion、事実のでっち上げ、スマホ表示の崩れ |
| Reflex | 避けるべき既定の癖。理由を記録すれば上書き可 | 全見出しの上のラベル、見出しの一語だけ着色、全ページ末尾の汎用メール登録 |
| Finish | 仕上げの細部。出荷は止めない | - |
導入前の確認
インストール時に、外部のセキュリティ評価が表示されました。
| 評価元 | 結果 |
|---|---|
| Gen | High Risk |
| Socket | 0 alerts |
| Snyk | Med Risk |
評価の根拠は表示されなかったため、scripts/ を検索して確認しました（全文の精読ではありません）。
| 確認項目 | 結果 |
|---|---|
AI画像生成（imagegen.mjs） |
Together AIのAPIを呼ぶが、TOGETHER_API_KEY が未設定なら通信しない（コード内に「opt-in」とある） |
写真の取得（theme.mjs） |
取得先は upload.wikimedia.org に限定されている |
設定ファイルの書き換え（install-hook.mjs） |
settings.json を書き換える。今回は実行していない |
| 明らかに怪しい外部送信 | 検索した範囲では見つからなかった |
hallmarkのスキルは、エージェントの権限で動きます。導入するときは、スクリプトを確認し、作業フォルダを分けるなど、範囲を限定することをおすすめします。
検証の設計
比べるもの
- スキルなしのClaude Code
- hallmarkを入れたClaude Code（プロジェクト単位、フックなし）
題材と素材
題材はAmazon Bedrock AgentCoreのサービス群です。AWS公式ドキュメントの内容を整理した事実メモ（13サービス、サービス間の関係、料金の考え方）を両方に渡し、その内容だけでページを作らせました。公式サイトと誤認されないよう、AWSのロゴは使わず、ページに「非公式の解説ページ」と明記する条件にしています。
事実メモには、プレビュー/GAの状況、提供リージョン、料金の金額を入れていません。ページにこれらが出てきたら、作り話として数えます。
評価の観点
| 観点 | 見るもの |
|---|---|
| 事実の正確さ | 事実メモの16項目との一致 |
| 作り話の混入 | メモに無い情報（料金、導入企業、数値など） |
| 情報設計 | 13サービスの探しやすさ、グルーピング、関係図 |
| 見た目 | 読みやすさ、配色、スマホ幅、日本語の組版、AIっぽさ |
| コスト | 所要時間、トークン |
条件
| 項目 | スキルなし | hallmark スキルあり |
|---|---|---|
| モデル | Sonnet 5.5 | Sonnet 5.5 |
| effort | Medium | Medium |
| Claude Code | 2.1.314 | 2.1.314 |
| hallmark | - | 2.0.0（skills-lock.json のハッシュ 8a79fc0d…3089） |
| 実行方法 |
claude -p（非対話） |
claude -p（非対話、先頭に /hallmark ） |
| 追加の修正依頼 | なし | なし |
| 撮影時のOS設定 | ダークモード | ダークモード |
手順
1. 作業フォルダを分ける
mkdir verify-hallmark
cd verify-hallmark
mkdir a-baseline b-hallmark
どちらにも、事実メモ（fact_sheet_agentcore_20261103.md）を同じ内容でコピーします。
2. hallmarkをBのフォルダにインストールする
cd b-hallmark
npx skills add nutlope/hallmark --agent claude-code
-g を付けず、プロジェクト単位で入れました。フックは入れていません。
3. プロンプト（スキルなし/あり共通）
fact_sheet_agentcore_20261103.md の内容だけを使って、日本語の解説ページを1枚、
単一のHTMLファイル（index.html、CSSは同ファイル内）として作ってください。
条件:
- 想定読者は、AWSでエージェントを使う開発者と、これから導入を検討する人
- 冒頭に「非公式の解説ページ」と明記する
- AWSのロゴ・公式サイトに似せた見た目は使わない
- 事実メモに無い情報（プレビュー/GAの状況、リージョン、料金の金額、導入企業、性能数値、顧客の声）は書かない
- 13のサービスをすべて載せ、読者が目的のサービスを見つけやすい構成にする
- サービスをグルーピングして見せる場合は、公式の分類ではなくページ側の整理だと分かるようにする
- サービス間の関係（事実メモの「サービス間の関係」）を図で示す
- 各サービスの連携・対応の情報を、比べやすい形で載せる
- スマホ幅でも読めるようにする
スキルあり版だけ、先頭に /hallmark を付けました。
4. 非対話モードで生成する
手順3のプロンプトを prompt.txt に保存して使います。スキルあり版は、先頭に /hallmark を付けたものを、別のファイルに保存して渡しました。
cat prompt.txt | claude -p \
--model claude-sonnet-5-5 \
--effort medium \
--permission-mode acceptEdits \
--allowed-tools "Read" "Write" "Edit" "Glob" "Grep" "Bash(node *)" \
--max-budget-usd 5 \
--output-format json > result.json
許可したツールは、ファイルの読み書きと検索、node の実行だけです。--output-format json で、所要時間とトークン、費用が取れます。
結果
見た目の比較
スキルなし
スマホ幅
hallmark スキルあり
スマホ幅
観察したことを表にまとめます。
| 観点 | スキルなし | hallmark スキルあり |
|---|---|---|
| 全体の印象 | 丸い角のカード、色付きの上端、左線の囲み、ピル型のチップなど、よくある構成 | 罫線と大きな見出しの編集物のような構成。角は四角 |
| 目的からの探しやすさ | 「〜したい」→サービス名の一覧と、色分けしたチップあり | 目的別の一覧はなく、ヒーロー右の5グループ索引とヘッダーの4リンク |
| 関係図 | 矢印が整理されて読みやすい。補足ラベルが図中に浮いている | 直線の矢印が交差して追いにくい。Gateway と Observability を太枠にして強調 |
| 比較表 | 3観点・4列。色帯付き | 2観点・3列。リンク付きで簡潔 |
| ページの余白 | 情報が詰まる | 余白が広く、1画面に載る情報が少ない |
スマホ幅は、各1枚（ページ先頭の画面）を見ました。
- スキルなし：上部の「非公式」バナーが画面の約1/6を占め、チップは折り返して収まった
- スキルあり：ヘッダーに4リンクが収まり、H1は「13サー／ビスの非公式ガイド」と「サービス」の途中で折り返された
事実の正確さと作り話の混入
事実メモの16項目（13サービスの網羅、各サービスの要点、サービス間の関係、料金の考え方など）を、私が全文を読んで照合しました。
| 観点 | スキルなし | hallmark スキルあり |
|---|---|---|
| 事実メモ16項目との一致 | すべて一致 | すべて一致 |
| 作り話（提供状況、リージョン、料金の金額、導入企業、性能数値、顧客の声） | なし | なし |
| グルーピングを「公式の分類」と書いたか | なし（ページ独自の整理と明記） | なし（ページ独自の整理と明記） |
| AWSロゴ・公式を思わせる表現 | なし | なし |
特に混同しやすいのは、Evaluationsの対応範囲です。公式の記述では、評価の対象は Strands Agent または LangGraph で生成され、OpenTelemetry または OpenInference で計装されたデータです。他のサービスが「任意のフレームワーク」と書かれているため混同しやすいのですが、どちらも正しく書いていました。
ただし、照合は目視で、厳密な全文比較ではありません。スキルありの本文には、読者に分からない「このメモの関係表」という言い方が残っていました。
所要時間とコスト
| 項目 | スキルなし | hallmark スキルあり |
|---|---|---|
| 所要時間 | 2分4.6秒 | 4分40.4秒 |
| ターン数 | 3 | 23 |
| 出力トークン（うち思考） | 19,713（4,603） | 37,967（19,022） |
| キャッシュ読み取り | 112,985 | 1,183,663 |
| API換算の費用 | 約0.356ドル | 約0.857ドル |
| 生成ファイル | index.html 1つ（425行） | index.html 1つ（520行） |
費用はAPI換算の参考値です。私はProプランで使っており、追加の請求はありません。使用量の枠は消費します。
Lighthouse
Lighthouseは、Chromeに組み込まれた、ページの品質を自動で採点するツールです。表示の速さ（Performance）、アクセシビリティ、ベストプラクティス、SEOの4分野を、機械で検査できる範囲で100点満点で採点します。ページの内容の良し悪しを評価するものではありません。
Chrome DevToolsのLighthouse（モバイル、ナビゲーション）で、各ページを1回ずつ計測しました。ローカルのHTTPサーバー経由で開いています。
| 項目 | スキルなし | スキルあり |
|---|---|---|
| Performance | 70 | 98 |
| Accessibility | 100 | 100 |
| Best Practices | 100 | 100 |
| SEO | 100 | 100 |
スキル無し
hallmark スキルあり
- Accessibilityは、どちらも100でした。hallmarkが重視する「コントラスト」の項目も、スキルなしの出力で問題が出ませんでした
- Performanceは、スキルなしが70、スキルありが98でした。スキルありは外部のフォント（Google Fonts）を読み込むため、スキル無しより遅くなると予想していましたが、逆の結果でした。理由は確認できていません
- どちらも「Chrome拡張機能が読み込み性能に悪影響を与えた」という警告が出ていました。計測は各1回で、シークレットウィンドウでの再計測はしていないため、Performanceの差は参考値です
さいごに
今回は、同じ素材・同じプロンプトで、スキルなしとhallmarkを1回ずつ比べてみました。
個人的には、hallmarkを入れたほうが、カードやチップが並ぶ「いかにもAIが作った」感じが減って、読み物のような見た目になったと思います。一方で、スキルありの方は比較的時間とコストもかかるなど気になる点もありました。
デザインは好みが分かれるのでどちらが良いとは言い切れませんが、AIっぽい見た目が気になる方は今回紹介したスキルを試してみるのも良いかもと思いました。