AIエージェントに洗練されたインターフェースを構築させる方法

CursorやClaude Codeにドロップダウンメニューやモーダルを作らせたことがあるなら、奇妙なことに気づいたことがあるかもしれません。コードは動作し、ボタンはクリックできるものの、すべてが少し野暮ったく見えてしまう。要素が不自然に遅延して現れ、カードボーダーは暗い実線で描かれ、シンプルなトースト通知のためだけに、5年前に放置されたパッケージが読み込まれることもある。

言語モデルはコンポーネントロジックの記述にはまあまあ得意だが、美的な感覚はない。トレーニングデータから最初に見つけたパラメータをそのまま採用してしまう。その結果、ノイズだらけの一般的なUIになる。

VercelとLinearでアニメーションとインターフェースを率いていたEmil Kowalskiが、emilkowalski/skillsリポジトリを作成した。ニューラルネットワークにより洗練されたレイアウトを構築させるための、AIエージェント向けの готовых指示書のセットだ。

なぜエージェントにはデザインルールが必要か

AIがウィンドウの表示タイミングを誤ってアニメーション化していることに気づいたことがあるだろうか？一般的な間違いは、画面に入ってくる要素にイージング関数 ease-in を適用することだ。実際のところ、入ってくる要素は最初は速く、最后は緩やかになるべきだ（ease-out）。そうでないと、インターフェースは缓慢に感じる。

レイアウトの詳細も同じだ。ニューラルネットワークは、半透明の box-shadow が必要な場所に実線のボーダーを使用したり、実績のあるライブラリを使う代わりに独自の解決策を発明したりすることがよくある。

小さなミスが積み重なる。结果として、安っぽく見えるUIになる。Emilのスキルセットは、完成したコードを渡す前に、ニューラルネットワークに基本的なデザインエンジニアリングルールを確認させる。

指示書のインストール方法

インストールにはCLIユーティリティ skills を使用する：

npx skills@latest add emilkowalski/skills

起動後、ニューラルネットワークエージェントは、モーション、比率、フロントエンドツールの選択に関するナレッジベースにアクセスできるようになる。

リポジトリの中身

中身はタスク別に分かれたMarkdown形式の指示書のセットだ。

モーションの確認と改善

指示書 review-animations と improve-animations は、エージェントに厳格なコード監査を実行させる。モデルは、見落とされたイージング関数、長すぎる遅延、いい加減なトランスフォームを探す。ランダムな修正の代わりに、エージェントは段階的な最適化プランを作成し、それ自体で実行する。

ルール find-animation-opportunities は、アニメーションが実際に必要な箇所を見つけ出し、ユーザーのじゃまになるだけのモーションの追加を明示的に禁止する。

Appleの辞書とガイドライン

ニューラルネットワークがどんなマイクロインタラクションを必要としているかを正確に理解させるのに、 animation-vocabulary が役立つ。アニメーションを記述するための正確な用語が含まれている。

別のファイル apple-design には、過去のWWDCカンファレンスからのWeb適応版Appleインターフェース原則が含まれている。レスポンシブなUIの感触を再現するのに役立つ。

ライブラリの選択とプロトタイピング

モデルにカスタムトーストやドロップダウンを作らせると、脆弱なコードを100行書いたり、長年サポートされていないパッケージをインストールしたりすることがある。ルール pick-ui-library は、AIに実際のプロダクトチームが信頼する実績のあるソリューションのみを使用させる。

素早い実験には、 prototype が役立つ。このスキルは、同じUI要素の複数のバリアントを同時に生成し、その上にトグルを追加してライブで比較できるようにする。

誰が使うべきか

毎日Cursor、Claude Code、Windsurf、または同様のCLIエージェントをフロントエンド作業に使っているなら、このリポジトリは手動のCSS修正に費やす時間を大幅に節約できる。 ease-in を cubic-bezier に手動で変更し、モデルにダークモードで実線のボーダーがなぜ悪見えるかを説明する必要がなくなる。