「AIっぽいデザイン」を直すSkills 7つを、紹介動画ではなくSKILL.mdで読んだ

YouTubeで「AIに美しいサイトを作らせるデザインSkills」という動画を見つけて、別のAIに文字起こしの要約を作ってもらいました。7つのリポジトリ名と、それぞれの特徴がきれいに表になっていて、正直そのまま記事にするつもりでした。

でも、書く前にGitHubを開いてSKILL.mdを読んでみたら、話が少し違ったんですよね。

まず安心したのは、7つのリポジトリが全部本当にあったこと。★は一番多いEmil Kowalskiのもので41,198、一番少ないtastemakerでも418あって、7つともMITライセンスでした（2026年9月26日に測った数字です）。

問題は中身の説明のほう。要約に書かれていた特徴を、SKILL.mdの本文と1つずつ突き合わせました。

要約を作ったAIが悪いというより、動画のしゃべりを要約して、さらにそれっぽく膨らませた結果なんだと思います。「tastemakerはグレーを好む」は、読んだ人がそのまま信じて設定を書いたら、スキルの意図と正反対のものができあがる。ここは怖いなと感じました。

7つ合わせるとSKILL.mdは数百個あって、全部は読めていません。そのうえで、具体的な数字が書いてあって、明日から自分の仕事に効きそうなものを抜き出します。

Emil Kowalski の animate。 UIの動きに ease-in を使うな、と太字で書いてあります。ゆっくり始まる動きは、ユーザーが一番見ている瞬間を遅らせるから。さらにUIのアニメーションは300ms未満、ボタンを押したときの反応は100〜160ms、出てくる要素は scale(0) からではなく0.9〜0.97から。数字で書いてあるので、AIに渡したときにブレません。

jakubkrehel の better-ui。 外側の角丸は「内側の角丸＋余白」。入れ子の角丸がそろっていないのが、画面が何となく変に見える一番よくある原因だそうで。これは読んだ瞬間に、自分が作ったカードのいくつかを思い出して少し恥ずかしくなりました。better-typography の「18px未満の文字は太さ400以上」も効きます。

tastemaker のチェックリスト。 青紫の斜めグラデーションは「AIが作った」と一番バレる目印、という項目があります。文字にグラデーションをかける見出しは、どの雰囲気でも許さない、と。アクセントの色は画面の5%くらいまで、という数字もありました。

読んでいて一番「おっ」となったのがここです。

Emilは「UIの動きは300ms未満」。一方でelayadesignのLP用スキルは、見出しの出方に duration-700 を使い、スクロールで出てくる演出は800ms以上かけろと書いている。4倍近く違います。

どちらかが間違っているわけではない気がしていて。Emilが言っているのはボタンやメニューのように何度も触る部品の話で、elayaはLPを最初に見たときの一度きりの演出の話なんですよね。ただ、両方をまとめて入れると、AIはその区別をしてくれるとは限らない。ボタンまで700msでゆっくり動くLPができあがる可能性がある。

なので、全部入れるのはやめました。

要約には「npx skills add で一括追加」とありましたが、そのコマンドをREADMEに書いているのは7つのうち3つだけでした。

skills というnpmのパッケージは、npmで調べるとVercelのGuillermo Rauchさんたちが出しているもので、2026年9月時点でv1.7.0でした。Claude Code向けには .claude/skills/ に、-g を付けると ~/.claude/skills/ に入ります。

NextCodeにはもともと、LPやホームページを作るときの自前のデザイン規則があります。本文は17〜18pxの太字、見出しは太さ900の丸ゴシック。ところがelayaのスキルは「900の太さは使うな」「Inter、Roboto、Arial…は使うな」と書いていて、後半は同じ意見なんですが、前半は真っ向からぶつかる。

なので、elayaは全体には入れません。英語のLPを作るときだけ、そのプロジェクトの中に入れるつもりです。

逆にすぐ入れたいのは、作ったあとに見直させるほう。jakubkrehel の better-interface と、Emil の review-animations です。作る側のルールは自分の規則と喧嘩しやすいけれど、レビュー役は「ここがおかしい」と指摘するだけなので、ぶつかりにくい。これは読んでから決めた順番でした。

この記事の時点では、どのスキルも自分の環境に入れて動かしてはいません。読んだだけです。入れる前と後で同じLPを作らせて、何が変わったかを並べるところまでやって、初めて「おすすめ」と言える気がしています。

それと、スキルは説明文の1行でAIに呼ばれるかどうかが決まります。7つ全部を入れたとき、どれが呼ばれてどれが黙るのか。ここも試してみないと分かりません。

もう1つ。tastemaker は写真やアイコンをネットから取ってきますし、スキルにはスクリプトを同梱できます。★の数は安全の保証ではないので、入れる前にSKILL.mdと同梱ファイルは一度読んでください。自分もそうしています。

次は、この中から1つずつ実際に入れて、入れる前と後で同じページを作らせた結果を書きます。紹介したスキルは記事の下にカードでまとめました。これまでの記事とスキルの一覧はAIに入れる便利なSkillsのページに、ほかの開発の話はブログに置いています。

「このスキルを試してほしい」というものがあれば、お問い合わせから教えてください。