AI が作った Web ページは一目で「AI くさい」？Claude Code / Codex に Hallmark v2 を入れて、48 テーマでページを作り自己チェックする（サードパーティ API Key で実測）

AI にランディングページを書かせると、10 個のうち 8 個は似たような見た目になります。角丸カードの 6 分割グリッド、グラデーションボタン、見出しの中で 1 語だけ色が違う言葉、そしてフッターにはメール購読ボックス。Together AI の Hallmark は、まさにこうしたお決まりのパターンを狙ったものです。作者 @nutlope の 10 月 23 日の投稿によると、Hallmark は v1 で 3 万 star、6 万インストールを獲得したあと、ゼロから書き直して v2 をリリースしました。Claude Code、Codex、OpenCode で使えます。

まず結論から。

• Hallmark は Web デザイン skill で、1 行の npx skills add nutlope/hallmark でインストールできます。README には、Claude Code、Codex、Cursor、OpenCode に対応と明記されています。
• v2 には 48 テーマがあります。リクエストごとにまず 3 テーマを候補として提示し、選んでからページを書き始めます。
• 書き終えたら sloplint --render で実際の Chrome 上でチェックします（README では 8 つの幅）。「AI くささ」のパターン、コントラスト、フォーカスリング、モバイルレイアウトを調べ、基準を満たさなければ自分で修正します。
• 本サイトの API Key で実測しました。Claude Code では 3 テーマの提示に 26 秒、ページ全体を書き上げて sloplint 0 FAIL になるまで修正するのに 3 分 40 秒かかりました。/hallmark audit では、ごく普通の AI 製ランディングページから 41 個の FAIL が検出されました。/hallmark redesign による全面やり直しは 6 分 11 秒で、やり直し後は 0 FAIL でした。Codex では $hallmark で 3 テーマの提示に 34 秒かかりました。

API Key を作成する →

AI くさい Web ページとは

Hallmark の README では、モデルが最もやりがちなパターンがはっきり挙げられています。次のいくつかは見覚えがあるはずです。

Hallmark はチェックを 3 段階に分けています。Floor は必ず通すもの（コントラスト、フォーカス、モーション軽減、でっち上げの事実、モバイルレイアウト）、Reflex はモデルが惰性で選ぶデフォルト値で、理由があれば記録した上で免除できるもの、Finish は細部の仕上げで、リリースを止めないものです。

対象が Web ページではなく記事の AI くささなら、Claude Code で AI 記事をリライトするをご覧ください。

Hallmark v2 でできること

以下は Hallmark の README と公式サイトに基づきます。

公式サイトの FAQ には、Hallmark 自体に別途 API Key は不要と書かれています。写真は独自のオープンライセンスギャラリーから使われ、画像生成の Key は任意です。実際に消費されるのは、Claude Code や Codex で使うモデルです。

ステップ 1：Claude Code / Codex を本サイトに向ける

Claude Code

グローバルの ~/.claude/settings.json に次を書きます。

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.aicodewith.ai",
    "ANTHROPIC_AUTH_TOKEN": "你的 API Key"
  },
  "model": "claude-sonnet-5-5"
}

ANTHROPIC_BASE_URL には /v1を付けないでください。今回の実測では Claude Code 2.1.309 + claude-sonnet-5-5 を使いました。

Hallmark は 1 回のビルドでモデルを何度も呼び出し、スクリプトを実行し、ページを繰り返し修正するため、通常の会話より枠を消費します。Claude のサブスクリプションをお使いなら、枠の計算方法を先にClaude Code の利用枠を使い切ったらどうするかでご確認ください。

Codex

グローバルの ~/.codex/config.toml にカスタム provider を書きます。書き方はCodex config.toml 設定チュートリアルと同じです。

model = "gpt-6.1-sol"
model_reasoning_effort = "medium"
model_provider = "aicodewith"

[model_providers.aicodewith]
name = "aicodewith"
base_url = "https://api.aicodewith.ai/chatgpt/v1"
wire_api = "responses"
experimental_bearer_token = "你的 API Key"

実測では Codex CLI 0.164.0 + gpt-6.1-sol を使いました。

ステップ 2：Hallmark をインストールする

# 装给所有项目（-g），Claude Code 和 Codex 都装
npx skills add nutlope/hallmark -g

# 只装给一个客户端
npx skills add nutlope/hallmark -g --agent claude-code
npx skills add nutlope/hallmark -g --agent codex

Node 18 以上が必要です。Claude Code 単体のインストールには 14 秒かかりました。インストール先と呼び出し方は次のとおりです。

ブラウザでの自己チェック（sloplint --render）には Chrome と puppeteer-core も必要です。

npm i -g puppeteer-core

この 2 つがないと、Hallmark は静的チェックしか実行しません。今回のマシンには /usr/bin/google-chromeがあり、スクリプトが自力で見つけました。

ステップ 3：家計簿 App のランディングページを作る。まず 3 テーマを選ぶ

空のディレクトリで Claude Code を起動し、次を入力します。

/hallmark 给记账 App「账小记」做一个落地页，写成 /workspace/hm/build/index.html。先给我 3 套主题挑。

Hallmark はまず theme.mjs dealを実行し、48 テーマからリクエストに合う 3 つを選びました。Grid（グリッドポスター）、Formwork（コンクリート現場の看板）、Studio（デザインスタジオの校正刷り）で、それぞれ配色、フォント、家計簿 App に合うかどうかが書かれています。素材についても確認してきます。App のスクリーンショット、実際のユーザー数、価格、レビューはあるか、と。ない場合は、でっち上げないと明言し、画像枠にはプレースホルダーを置きます。このラウンドは 26 秒でした。

Claude Code 里 /hallmark 先发 3 套主题并追问素材的终端输出

こう返信しました。

选 1 Grid。受众是上班族，转化动作是下载 App，调性偏轻松。没有截图和真实数据，用占位，不要编数字。

このあと、次のことを行いました。

1. まず theme.mjs scaffold で tokens.css と base.cssを生成し、すべての色、フォントサイズ、余白を token に入れます。
2. Grid の英字フォントスタックに、中国語のフォールバック（PingFang SC、Noto Sans SC、Microsoft YaHei）を追加しました。
3. まずファーストビューだけを書いて、 sloplint.mjs --renderを 1 回実行し、1280、1440、1920 の 3 つのファーストビューサイズと、1440、375 の 2 つのページ全体サイズでスクリーンショットを撮ってチェックしました。
4. 1 回目のチェックでは、「サンプルデータ」ラベルのコントラストが 1.00:1 であること、ダウンロード領域が薄すぎることなどが報告されました。1 件ずつ修正し、 sloplint: clean. 0 FAIL, 0 REFLEX, 0 WARNになるまで続けました。

このラウンド全体で 3 分 40 秒かかりました。完成したファーストビューは次のとおりです。見出しは一文まるごと同じ色で、アイブロウも、1 語だけ色を変えた言葉もありません。スマホのモックアップの数字はすべて ¥ 00.00 で、「サンプルデータ」と明記されています。

Hallmark 用 Grid 主题做出的记账 App 落地页首屏（headless Chrome 截图）

Codex でも同じです。Codex で $hallmark 给记账 App「账小记」做一个落地页。这一步只发 3 套主题让我挑，不要写页面。と入力すると、同じようにまず theme.mjs deal、今回は Newsprint、Hedgerow、Editorial の3つが選ばれ、所要時間は34秒でした。抽選のたびにシードが変わるため、2つのクライアントで出てきた3テーマは異なります。

Codex 里 $hallmark 发出 3 套主题的终端输出

ステップ4：/hallmark audit で既存ページを採点する

比較のため、まず Hallmark を使わずに、Claude Code に「家計簿 App の1ページ完結のランディングページを作って」と頼みました。28秒で完成しました。緑のテーマ、ファーストビューのスマホ画像、6分割の機能カード、3ステップの使い方、FAQ、ダウンロード用の帯です。勝手に料金ポリシーまで書き足していたので、この作り話の説明と関連するボタン文言は削除してから監査にかけました。

/hallmark audit /workspace/hm/bare/index.html

audit はレポートを出すだけで、ファイルは変更しません。50秒後の結果は FAIL 41件、REFLEX 18件、WARN 5件でした。代表的なものをいくつか挙げます。

• Floor：色とフォントが token の外に直書きされています。10個の emoji がアイコン代わりに使われています。フォーカスリングのコントラスト比は 1.60:1 しかなく、緑背景に白文字のボタンも 3.45:1 です。
• Reflex 38iii：「月末も慌てない」だけが別の色で塗られています。冒頭で触れた「見出しの中の一語だけ色が違う」パターンそのものです。
• ファーストビュー：1440×900 の画面で、ファーストビューのコンテンツが 575px で終わっています。ボタンの前に文字ブロックが4つ積まれています。
• でっち上げの数字：「3秒」「¥ 2,368.50」「予算の68%を使用」「1分以内」が、事実としてページに書かれています。スクリプトでは真偽を判定できないため、確認用に一覧で出してくれます。
• 定型的な構造：機能の6分割、3ステップの使い方、FAQ、CTA の帯は、どの家計簿 App の名前に差し替えても成り立ちます。

最後に、どの段階なら直せるかを教えてくれます。restyle（レイアウトを保ったままスタイルシステムを入れ替える）で Floor の問題の大半は解消できます。ファーストビュー、ボリューム、構造の問題は、full（レイアウトの作り直し）でしか対処できません。

/hallmark audit 对普通 AI 落地页的审计报告终端输出

ステップ5：/hallmark redesign で作り直して比較する

このページをコピーして、全面的に作り直してもらいました。

/hallmark redesign /workspace/hm/redo/index.html 做 full 重做，这个目录是干净的副本。页面里的编造数字一律改成占位或删掉。

redesign のポイントは「内容とリンクを保持すること」です。まず sloplint --before で元ページのリンク、フィールド、見出しをすべて記録し、作り直したあとに sloplint --kept で突き合わせて、欠けているものがあれば警告します。実測では、元の見出し「3秒で記帳、月末も慌てない」が「思い立ったときに記帳、月末も慌てない」に書き換えられ、--kept がすぐに headings gone or rewordedを報告しました。変更の理由をページ CSS の1行目にある Hallmark の記録に書き込んで、ようやく通過しました。

今回は Loom テーマ（生成り色の紙、セリフ体の見出し、藍色の帯1本）が選ばれ、結果は次のとおりです。

• ページ内アンカー4つ、機能6件、ステップ3つ、FAQ はすべて保持されました。
• 「3秒」「1分以内」などの表現は削除され、¥2,368.50、68%、+8,000.00 は 00.00 に置き換えられて「サンプルデータ」と明記されました。
• emoji アイコンとスマホのフレームは取り除かれました。
• sloplint --render --kept：0 FAIL、0 REFLEX、1 WAIVED、1 WARN。WAIVED は「よくある質問」のボリュームが薄めという指摘で、理由は「作り直しでは元ページにない内容を足せないため」です。WARN は lint が「8,000」をカンマで分割して照合できなかったもので、本文にはもうこの数字はありません。

ここまでの全工程で6分11秒かかりました。

/hallmark redesign 全量重做后的终端输出

左が作り直し前、右が作り直し後です。内容は同じです（headless Chrome のスクリーンショット、1440×900 のファーストビュー）。

普通 AI 落地页与 Hallmark redesign 后的首屏对比（headless Chrome 截图）

実測所要時間のまとめ

Hallmark で1ページ作る方が、直接作るよりかなり遅くなります。時間の大半は「直す、レンダリングして確認する」のループに使われます。

使い方のヒント

• 先に素材を渡す：Hallmark はユーザー数、評価、レビューをでっち上げません。渡す素材（スクリーンショット、実際の数字、ブランドカラー）が多いほど、ページはあなたのプロダクトらしくなります。
• 既存サイトを直すときは名指しする：既存ページを自分から書き換えることはないので、必ず /hallmark redesign <路径>。レイアウトを保ったままスタイルだけ変えるなら keep the layoutと伝えます。定型パターンだけ取り除きたい場合は polishと伝えます。
• redesign の前にバックアップを取るか、コピーで試す：今回はコピーを作ってから作り直したので、比較が簡単でした。
• 起動しないときは名指しする：自動で使われなければ、「use hallmark to build ...」とそのまま伝えてください。
• Chrome を入れる：Chrome と puppeteer-core がないと静的チェックしかできず、ファーストビューの高さやコントラストのように、レンダリングしないと測れない問題は検出できません。

API Key を作成 →

よくある質問

Hallmark とは何ですか？

Together AI が作った Web デザイン用の skill で、Claude Code、Codex、Cursor、OpenCode で使えます。まず 48 のテーマから3つを選んで提示し、次にページで達成したいタスクに合わせてレイアウトを組み、最後に実際のブラウザで AI 臭い定型パターンとアクセシビリティの問題をチェックします。

Hallmark skill はどうやってインストールしますか？

npx skills add nutlope/hallmark -gでインストールします。Node 18 以上が必要です。入れるのはクライアント1つと --agent claude-code または --agent codexだけです。ブラウザチェックにはさらに npm i -g puppeteer-core と Chrome が必要です。

Claude Code と Codex ではどう呼び出しますか？

Claude Code では /hallmark <需求>、Codex では $hallmark <需求>を使います。「ランディングページを作って」と直接頼んでも、たいていは起動します。

48 のテーマは指定できますか？

できます。まず3つ提示されるので、番号を返すだけです。テーマを使いたくない場合は custom と伝えれば、あなたの説明だけをもとにデザインします。

audit と redesign はどう違いますか？

audit はレポートを出すだけで、Floor、Reflex、Finish の段階別に問題を並べ、ファイルは変更しません。redesign はページを作り直し、デフォルトでは内容とリンクを保持したうえで sloplint --kept を使って漏れがないか確認します。

サードパーティの API Key でも Hallmark は動きますか？

動きます。Claude Code の ANTHROPIC_BASE_URL を https://api.aicodewith.aiに向け、Codex のカスタム provider を https://api.aicodewith.ai/chatgpt/v1に向けました。Claude Code ではインストール、テーマの提示、ページ作成、audit、redesign まで一通り動き、Codex でもテーマの提示は動きました。Hallmark 自体に追加の Key は不要です。

生成されたページはそのまま公開できますか？

実際の内容を補う必要があります。実測では、ダウンロードボタンのリンク、フッターの連絡先、App のスクリーンショットはすべてプレースホルダーでした。Hallmark は最後に、何を補う必要があるかを一覧で出してくれます。公開前に、ブラウザで自分の目でも確認してください。