GoogleでフォローするGoogle検索でAInformationの記事が出やすくなります
Claude Code用の3スキル AIっぽい画面の決まりを先に潰す
Claude CodeやCursorにWebページを作らせると見た目が同じになりやすい。この癖を消すスキル3本を、テクノエッジが11月3日に紹介した。紫から青へのグラデーションの背景、中央の大見出しとボタン、その下にアイコン付きのカードが3枚。AIが作るページはこの形に寄りがちで、元記事はこれを「AIスロップ」と呼んでいる。
3本ともGitHubで公開されていて、決まりの作り方は大きく違う。
Hallmark 50テーマと写真755点で組む
HallmarkはTogether AIが作った。Claude Code・Codex・Cursor・OpenCodeで使える。見出しの上に小さなラベルを置く形や、見出しの1語だけ色を変える手法を禁じている。動かないダミーのフォームや架空の数字も書かせない。
50種類のテーマから目的に合うものを選んでページを組む。オープンライセンスの写真755点から題材に合う画像を選び、クレジット表記を付けて置く機能もある。
Impeccable 24のコマンドと62の規則で直す
ImpeccableはjQuery UIを作ったPaul Bakaus氏の作で、Apache 2.0のオープンソースだ。「文字を読みやすく整える」「不要な要素を削る」といった24種類のコマンドで画面を直す。AIモデルを使わずに62の規則でAIの癖や文字切れ、コントラストの不足を見つける検出の機能も持つ。
Taste Skill 20の方針から3案を出して選ぶ
Taste SkillはMITライセンスのオープンソースだ。依頼を読んで20のデザイン方針から3つの候補を出し、そのうち1つを選んで組む。v2.1からはWebページとアプリの画面を分けて作れるようになった。今あるサイトを直すときは、まず実際のブラウザで今の画面を見てから手を入れる。
3本とも0円で入る Node.jsとChromeは先に用意する
3本とも料金はかからない。AInformationが11月3日に3つの公式リポジトリを開いて確かめた。ライセンスはHallmarkとTaste SkillがMITで、ImpeccableがApache 2.0だった。
| スキル | 入れるコマンド | 要るもの |
|---|---|---|
| Hallmark | npx skills add nutlope/hallmark -g | Node 18以上。画面の検査にはChrome |
| Impeccable | npx impeccable install | Node 18.19以上。入っているコーディングAIを自動で探す |
| Taste Skill | npx skills add（README記載のURL） | Node 22以上とChromeかEdge。APIキーは不要 |
HallmarkとTaste SkillはClaude Codeのプラグインとしても入れられる。
AI臭消しスキル3本の違い
| 項目 | Hallmark | Impeccable | Taste Skill |
|---|---|---|---|
| 作った人 | Together AI | Paul Bakaus氏 | Leonxlnx |
| ライセンス | MIT | Apache 2.0 | MIT |
| 直し方 | 50テーマから選んで組む | 24のコマンドと62の規則 | 20の方針から3案を出す |
| 画像 | 写真755点をクレジット付きで置く | 記載なし | 実在の写真や映像をクレジット付きで置く |
| 日本語への言及 | 101ファイル中0 | 46ファイル中1（文字の確認だけ） | 13ファイル中0 |
日本語の試験ページに62規則を流した 6種類で11件当たった
Impeccableは日本語のページでもAIっぽさを見つけたが、全部ではなかった。AInformationは11月3日にAIが作りがちな形を詰めた日本語のページを1枚作った。これをImpeccable 4.8.0の検出にかけた。紫から青のグラデーションの背景、Interの書体、見出しの上の小さなラベル、絵文字を載せたカード3枚を入れてある。
見つかったのは11件で、規則は6種類だった。グラデーションの文字が2件、紫系の配色と見出しの上のラベルとInterの書体が各1件。残りは文字のコントラストの不足が5件、見出しの段の飛びが1件だった。
当たらなかった所もある。絵文字を載せたカード3枚の並びは検出できなかった。規則が見ているのは角丸の四角い枠に入れたアイコンで、枠の無い絵文字は対象から外れていた。Interは「使われすぎの書体」として当たったが、日本語の字を持たない書体だという指摘は出てこなかった。
3本の説明書に日本語の書体は0個 和文は自分で指示する
3本とも日本語のページに向けた決まりは持っていない。AInformationが3本のスキルの説明ファイルを数えた。Hallmarkの101本とTaste Skillの13本には、日本語や和文の書体の話が1つも無かった。日本語に一番近い備えを持つのはImpeccableだが、それも46本のうち1本に「中国語・日本語・韓国語の文字で試す」という確認の項目があるだけだった。
テーマが選ぶ書体はHanken GroteskやJetBrains Monoのような英字の書体だ。日本語のサイトを作らせるなら、本文の書体と行間を指示に書き足すとよさそうだ。まずはImpeccableの検出だけを手元のページに流し、どの癖が当たるかを見るのが早い。
- AIスロップ
- AIに作らせたWebページが、紫から青のグラデーションやアイコン付きカード3枚のような同じ見た目にそろってしまう現象
会社のLPや社内ツールをClaude Codeで作る現場では、AIで作ったと分かる見た目を人が手で直す工程が残りがちだ。今回の3本はその手直しを前の工程へ寄せる道具になる。ただ日本語のサイトは和文の書体と行間で印象の大半が決まり、そこは3本とも決まりを持っていない。制作を外注している会社なら、指示書に書体名と行間を先に書いておくほうが効く可能性がある。検出も英語のページが前提なので、日本語の癖は人の目で見る工程を残しておきたい。
- Claude Codeのデザインスキル3本は商用利用できる？
- 3本ともオープンソースのライセンスで公開されていて、料金もかからない。HallmarkとTaste SkillはMIT、ImpeccableはApache 2.0だ。どちらも会社のサイトや客先の制作に使える形のライセンスになっている。Hallmarkはオープンライセンスの写真755点からクレジット表記付きで画像を置くので、公開前にその表記が残っているかを確かめておきたい。
- Impeccableは日本語のWebページにも効く？
- 見た目の癖は言語に関係なく当たるが、日本語に特有の点は拾わない。AInformationが11月3日に日本語の試験ページで試すと、62規則のうち6種類で11件が見つかった。グラデーションの文字や紫系の配色は当たった。一方で絵文字を載せたカード3枚は通り、Interが日本語の字を持たない書体だという指摘も出なかった。
- Hallmarkなどを入れるには何が要る？
- Node.jsとブラウザが要る。HallmarkはNode 18以上で、npx skills add nutlope/hallmark -g の1行で入る。Taste SkillはNode 22以上とChromeかEdgeが要り、APIキーは要らない。Impeccableは npx impeccable install を流すと、入っているコーディングAIを自動で探して設定する。
この記事の出典
補助資料
- [1]テクノエッジこの記事の元にした報道
出典の最終確認日：2026年11月3日
