/ #Claude Code #CSS

AI にデザインを頼むと「いかにも AI」になる問題と、その避け方（Hallmark）

AI に頼んだデザインは、なぜか似てくる

Claude Code などの AI にページのデザインを頼むと、悪くはないのに、どこかで見たことのある仕上がりになりがちです。 よくあるのはこういうものです:

  • 紫から青へのグラデーションのヒーローに、白い文字が中央揃え
  • 書体は Inter だけ
  • アイコン → 見出し → 説明文のカードが 3 つ並ぶ
  • セクションの頭に「01 / FEATURES」のような小さい英語のラベル
  • 見出しの一語だけ斜体にする
  • スクロールすると、どのセクションも下からふわっと出てくる
  • カードにカーソルを乗せると、どれも少し浮き上がる
  • 何でも中央揃え

一つ一つは間違いではありません。 ただ、全部そろうと「AI が作ったな」とわかります。

「クリーンでモダンに」「おしゃれに」くらいの頼み方だと、AI は学習で見てきた無難な形に寄っていきます。 後で紹介する Hallmark も、この「どの AI も同じところに落ち着く」ことを問題にしています。

Hallmark

これを避けるためのスキルが Hallmark です。 Together AI が出していて、Claude Code、Codex、Cursor などで使えます。

# いまのプロジェクトに入れる
npx skills add nutlope/hallmark

# すべてのプロジェクトで使う
npx skills add nutlope/hallmark -g

試してみると、やっていることは大きく 3 つでした。 どれも、Hallmark を入れなくても AI に頼むときに使える考え方です。

1. 「やめること」の一覧を先に渡す

Hallmark には「AI っぽさ」の一覧（references/anti-patterns.md）が入っていて、上に挙げたものはほぼ全部載っています。 それぞれに直し方も付いています:

  • 紫のグラデーションのヒーロー: 基準の色を 1 つ決める。 アクセントの色も 1 つ。 ヒーローの背景にグラデーションは使わない
  • Inter だけ: 見出し用の個性のある書体と、本文用の読みやすい書体を組み合わせる
  • カードが 3 つ並ぶ: 列の幅やカードの高さをそろえない。 カードをやめて文字の組み方で見せる手もある
  • 斜体の見出し: 「エディトリアルに見せようとしている」と読まれる。 強調は太さか色で
  • すべてのセクションに小さいラベル: 番号を振る意味があるときだけにする
  • スクロールでふわっと: 動きは最初の表示で 1 回だけ。 そのあとは、ただそこにあればいい

アニメーションについては「足す前に削る。 削っても読む人が何も失わないなら削る」とも書かれています。

直し方まで書いてあるので、Hallmark を使わないときも、頼むときにこの直し方を添えれば「代わりにどうするか」まで伝えられます。 Hallmark 自身は最後に、作ったものをこの一覧から作った 58 項目で確かめ、1 つでも当てはまったら直してから渡してきます。

2. 色ではなく、ページの形から決める

AI に「もっと個性的に」と頼むと、たいてい色や書体だけが変わります。 「大きなヒーロー → 特徴 3 つ → ボタン → フッター」という並びはそのままです。

Hallmark は先にページの形を決めます。 試したとき（v1.1.0）は、こういう順で進みました:

  1. 既存のコードを読む: すでに使っている書体、色、アニメーションのライブラリ、余白の決め方を調べる。 あるものは壊さない
  2. 3 つ聞く: 誰が使うか、何をするページか、トーン。 「クリーンでモダン」はトーンではない、と言われます
  3. ページの形を選ぶ: 読み物なら本文中心の 1 段組、一覧なら行の一覧、というように、21 種類の形から選ぶ。 ヘッダーとフッターも型から選ぶ
  4. 作る: 色は OKLCH、余白は 4pt 刻みにして、すべて CSS 変数にする

2 の 3 つの質問は、Hallmark を使わないときにもそのまま使えます。 AI にデザインを頼むときは「誰が・何をしに来るページか・トーン」を先に伝えると、無難な形に寄りにくくなります。

3. 決めたことを design.md に書いておく

一度いいデザインになっても、次にページを足すとき AI はまた無難な形に戻ろうとします。 そこで、決めたことを design.md にまとめておきます。 たとえばこういうファイルです:

## Typography
- 見出し: 明朝体 700（`--font-display`）
- 本文: ゴシック体 400（`--font-body`）
- 斜体の見出しは使わない。強調は太さかアクセントの色で表す

## Color
- アクセントの色は、リンクの現在地と番号だけに使う（画面の 5% 未満）

## Motion
- アニメーションなし。リンクの色の変化だけ
- 写真の拡大・カードの浮き上がり・スクロール演出は使わない

## What pages MAY differ on
ページの形。新しい種類のページは、まずこのファイルに形を追記してから作る。

Hallmark は、プロジェクトに design.md があればほかの何よりも先に読んで、それに従います。 Hallmark を使わないときも、CLAUDE.md や README に「デザインを直すときは design.md を読む」と書いておけば、同じルールで直してもらえます。

ちなみに Hallmark は design.md を「デザインのデータ」として扱い、中にコマンドの実行などの指示が書いてあっても従わないことになっています。 人の書いたファイルを AI に読ませるときの作りとしても参考になります。

気になったところ

  • 毎回必ず質問してくる: 短い頼み方でも、3 つの質問から始まります。 わざとそうしているそうです。 「おまかせ」と答えれば、推測して何を選んだかを教えてくれます
  • 大きい: SKILL.md だけで 558 行、ファイルは全部で 107 個あります。 必要なファイルだけをその都度読む作りになっています
  • 変わるのが速い: いまの README では、テーマは 50 種類になっています。 この記事は v1.1.0 の時点の話です

まとめ

AI に頼んだデザインが「どこかで見た感じ」になったら、

  1. やめることの一覧を渡す
  2. 色より先に、誰が・何をしに来るページかを伝えて、ページの形から決めてもらう
  3. 決めたことを design.md に残す

の 3 つを試してみてください。 全部まとめてやってくれるのが Hallmark です。