AIにデザインセンスを：Emil Kowalski氏がUI・モーションSkillsを公開

emilkowalski/skillsは、AIコーディングエージェント向けに作られたUIデザインとモーションルールのオープンソースライブラリです。SonnerやVaulの開発者であり、VercelやLinearで活躍したデザインエンジニアのEmil Kowalski氏が、洗練されたフロントエンドの知見をAIが実行できるSkills形式でまとめました。

このプロジェクトが解決するのは、AIが生成するUIに漂う独特の野暮ったさです。AIはコードを正しく動かせても、デザインの良し悪しまでは判断できません。要素が現れるアニメーションに本来使うべきease-outではなくease-inを指定したり、自然な半透明のシャドウではなく硬い実線のボーダーを引いてしまったりします。一つひとつは小さな差異ですが、重なることでアプリ全体の質感を大きく損ねてしまいます。

エージェントに授ける具体的なルール

ライブラリには、感覚的になりがちなモーション設計を明確なガイドラインへと落とし込んだ複数のスキルが収録されています。

核となるのは、アニメーションの設計指針をまとめたemil-design-engと、ゼロから適切なイージングカーブや継続時間を割り出すanimateです。React NativeやExpoに対応したanimate-expoも用意されており、ジェスチャーやボトムシート、触覚フィードバックをJavaScriptスレッドの外で処理し、コマ落ちを防ぐ実装を指示できます。

とりわけ実用的なのがimprove-animationsです。高性能モデルを使ってコードベース全体のアニメーションを網羅的に検査し、物理的な自然さや割り込み可能性、アクセシビリティなど8つの基準でスコアを算出します。そのうえで具体的な改修プランを独立したファイルとして出力し、安価なモデルに実装を任せるという役割分担が可能です。

さらに、AppleのWWDCセッションから滑らかなUI原則を抽出したapple-designや、スマホ特有の不具合（タップ時の不自然なハイライト、100vhの表示崩れ、入力欄フォーカス時の画面拡大など）を抑え込むmobile-nativeも含まれています。

導入方法

コードはGitHubで全編公開されています。Skills仕様に対応したAI開発環境を使っている場合、ターミナルでnpx skills@latest add emilkowalski/skillsを実行するだけで手軽にエージェントへ読み込ませることができます。

ローカルマシンに特別なグラフィック性能や大容量メモリは不要です。構造化されたプロンプトと設計ルールのセットであるため、コンテキスト読み込みに対応した主要なLLM環境ですぐに機能します。

なぜ重要か

私たちは、このプロジェクトが一流エンジニアの暗黙知をAIへ継承する見本になると考えています。デザインのセンスとされる感覚の多くは、実は徹底した制約と細部の積み重ねで構成されていることを示しています。

一人でWebサービスやモバイルアプリを立ち上げようとしている開発者にとって、試す価値は非常に高いと言えます。プロのデザイナーにレビューを頼めない環境でも、AIが粗い動きをあらかじめ防ぎ、プロダクトの仕上がりをワンランク引き上げてくれます。