nextlevelbuilder/ui-ux-pro-max-skill
AIに画面を作らせる前に、業種に合うデザインの決まりごとを先に引かせる
どういうものか
Claude Code や Cursor などのコーディングAIに入れて使う、画面デザインの知識の詰め合わせ(スキル)だ。ライセンスは MIT。中身は、デザインの見本を表にしたデータと、それを引く Python のスクリプトでできている。README によれば、業種の分類とそれぞれのルールが192、画面の見た目の系統(スタイル)が79(通常のおすすめに出るのは50)、配色が192、書体の組み合わせが74、ページ構成の型が34ある。
「美容サロンの紹介ページを作って」のように頼むと、AIはまずこのスキルを使って業種を検索し、その業種のルールを引く。ルールにある配色や書体の雰囲気、ページ構成を手がかりに、スタイル・配色・ページ構成・書体を検索する。結果は、使うべき配色・書体・ページ構成・効果に、「銀行なら紫とピンクのグラデーションは避ける」といった業種ごとのやってはいけない表現と公開前の確認項目を加えた、ひとまとめの「デザインの決まりごと」として出てくる。AIはそれに沿って画面のコードを書く。
検索とルールの照合を受け持つスクリプトは、Python の標準機能だけで動き、ネットにもつながない。つまり、どのデザインを選ぶかを決めているのは表とルールで、AIはその結果を読んで使う側に回る。出した決まりごとはファイルに保存でき、全体の決まりとページごとの上書きを分けて持てるので、別の日の作業でも同じデザインを引き継げる。
どんなときに使うか
AIに作らせた画面が、どれも似たような見た目になってしまうとき
業種ごとにスタイル・配色・書体の候補とルールが用意されているので、医療・金融・飲食など、何のサービスかに合わせた見た目から始められる。
何ページも作るうちに、デザインがばらばらになるのを防ぎたいとき
決まりごとをファイルに保存しておけば、ページごとに AI に読ませて同じ配色・書体で作らせられる。例外があるページだけ、上書きのファイルを足せばよい。
注意点
「AIの推論」ではなく、表とルールの検索。 README は「AIによる推論エンジン」と書いているが、実際に組み立てているのは Python のスクリプトによる検索とルールの照合だ(README 自身も、検索の方式が BM25 というキーワード検索であることは書いている)。業種の分け方やルールの中身が自分の考えと合うかは、表を見て確かめる必要がある。
Python が要る。 検索のスクリプトを動かすには Python 3 が入っている必要がある。README は、AIに勝手に入れさせず、利用者に頼むようにスキルへ指示してあると書いている。
有料版との線引き。 このリポジトリは無料の基本版で、UI の知識と決まりごとの生成が入っている。ロゴやブランドの一式、スライド、AIによる画像づくり、大人数のチーム向けにより大きく組んだデザインの決まりごと(デザイントークン)などは有料版の機能だ。
指定しなければ HTML+Tailwind で作られる。 React・Vue・SwiftUI・Flutter など22の技術向けの指針もあるが、頼むときに使う技術を伝える必要がある。