★13万の「UI UX Pro Max」で美容室のLPを頼んだら、自分で禁止している紫が出てきた

AIにLPを作らせると、どれも似た顔になる。紫っぽいグラデーション、角の丸いカード、Interという書体。これを何とかしたい人が真っ先に見つけるのが、たぶん「UI UX Pro Max」です。

★は9月26日に測って130,718。デザイン系のスキルでは頭ひとつ抜けています。そして、うちのMacにも前から入っていました。今回は読むだけでなく、実際に動かしてみます。

ほかのデザイン系スキルは、たいてい「こうしろ、ああするな」という文章でできています。UI UX Pro Maxは違って、本体はCSVのデータです。業種ごとのおすすめ、配色、書体の組み合わせ、UXのルールが表になっていて、Pythonのスクリプトがそこから検索して答えを返します。

READMEの数字が本当か、最新版のCSVの行を数えました。

数字を盛っていないのは好感が持てました。スクリプトはPythonの標準の機能だけで動き、APIキーもネットへの接続も要りません。

Claude Codeからだと、このスキルは裏で次のようなコマンドを流します。自分で直接打ってみました。

search.py "beauty salon landing page" --design-system

答えは0.3秒で返ってきました。構成は「スクロールに合わせて物語を見せる」型、メイン色はピンクの #EC4899、見出しと本文の書体は Outfit と Work Sans。最後に「絵文字をアイコン代わりに使わない」などの納品前チェックリストまで付いてきます。ここまでは便利です。

引っかかったのは2つ。

1つは、選ばれたスタイルが「元気なブロック型」で、向いている相手に「スタートアップ、ゲーム、若者向け」と書いてあったこと。落ち着いた美容室のLPに、それかなと。

もう1つが、ボタンの色が紫の #8B5CF6 だったこと。同じデータの判断ルールでは、192業種のうち14業種で「AIっぽい紫やピンクのグラデーション」を避けるべきものに挙げています。自分のデータが避けろと言っている色を、自分で出してきた形です。

今度は「美容室 ランディングページ」と日本語で検索してみました。返ってきたのはグラスモーフィズム（すりガラス風）で、書体は見出しも本文も Inter。美容室らしさはどこにも残っていませんでした。

検索の仕組みが英語の単語で当てにいく方式なので、日本語の単語だと何にも当たらず、無難なものが出てくるんだと思います。書体の組み合わせ74個のうち、日本語のものは「Japanese Elegant」（Noto Serif JP と Noto Sans JP）の1つだけでした。一方で Inter をそのまま使う組み合わせは8個、Roboto は2個あります。

うちでは、LPを作るときに Inter と Roboto を使わない決まりにしています。なので、このスキルの書体の提案はそのままでは使えません。

もう1つ気づいたことがあります。うちに入っていたのは6月の版で、説明には「配色161、書体の組み合わせ57、UXのルール99」とありました。今は192、74、119。数字がどんどん増えています。

SKILL.md自体も、手元の版は44,776バイトあったのが、最新版では約16KBまで削られていました。呼ばれるたびに読み込まれる量が3分の1くらいになっているので、入れている人は更新したほうがいいと思います。GitHubのIssueには、npmで配っている版が古いままだった、という報告もありました（#353）。

第1回で7つ紹介したので、ここではそれ以外の有名どころを並べます。

うちで普段一緒に使っているのは、Anthropic公式の frontend-design と、自分で書いた「教科書ワーク風」のデザイン規則です。UI UX Pro Maxはその横で、配色の候補を出してもらう係にしています。全部を任せるのではなく、候補出しだけに使う。これが今のところ一番しっくりきています。

今回動かしたのは検索の部分だけで、このスキルに最後までLPを作らせて、ほかのスキルと見比べたわけではありません。英語の業種名で頼めば日本のお店にも合う答えが出るのか、そこもまだ試せていないです。

それと、最新版で同じ美容室を頼むと、判断ルールはきちんと美容室のものに当たるようになった一方で、紫のアクセント色と Inter はまだ出てくる、と調べてくれたサブエージェントから報告がありました。ここは自分で最新版に入れ替えてから確かめ直します。

次は、この4本で名前が出たスキルのうち、実際に入れて同じLPを作らせ比べる回をやるつもりです。紹介したスキルは記事の下にまとめました。ほかの記事はAIに入れる便利なSkillsとブログにあります。

「このスキルでうちのお店のサイトを作れる?」という相談も、お問い合わせからどうぞ。