「デザインスキルなしでUIが作れた」─ 65万バズのAIデザイン術

プロンプト画伯

2026/03/26

エンジニアがAIエージェントでデザインスキルなしにUIを作る。

そんな話がXで65万回以上表示され、1,490リポストを記録しました（2026年3月時点）。

投稿主はNeethan Wu氏。

彼が提唱した「Design Without Designing」というフレームワークが、デザインに苦手意識を持つエンジニアの間で大きな反響を呼んでいます。

この記事では、このフレームワークの3層構造を分解し、それぞれのツールが何を解決するのかを具体的に解説していきます。

デザインスキルなしのエンジニアが抱える本当の課題

「センスがない」のではなく「武器がなかった」

エンジニアがUIを作ると、なぜか微妙になる。

ピクセル単位の余白、タイポグラフィの選び方、色のバランス。

「なんか違う」のはわかるけど、どう直せばいいかわからない。

自分もRailsで10年以上やってきましたが、フロントエンドのデザイン面はずっと苦手意識がありました。

機能は正しく動くのに、見た目で「素人っぽさ」が出てしまう。

この悩みを持っているエンジニアは相当多いはずです。

ただ、Neethan Wu氏のツイートを読んで気づいたのは、これは「センスの問題」ではなく「適切な道具を持っていなかった」だけかもしれない、ということです。

AIが生成するUIが似たり寄ったりになる理由

じゃあClaude CodeやCursorにUIを作らせればいいのか？という話ですが、それだけだと別の問題が出ます。

AIが生成するUIは、どれも似たような見た目になりがちなんですよ。

角丸のカード、青系のアクセントカラー、均一なパディング。

いわゆる「AIっぽいUI」です。

これは、AIが学習データの平均的なパターンに収束するからです。

デザインの「正解」を平均化してしまうので、どのプロジェクトでも似たようなUIが出てくる。

プロダクトとしての個性がなくなってしまいます。

この問題を解決するアプローチとして登場したのが、Neethan Wu氏の3層フレームワークです。

65万バズ「Design Without Designing」が提示した3層フレームワーク

Neethan Wuとは何者か

Neethan Wu氏はエンジニア出身で、自身のツイートによれば「3ヶ月前までUI/UXデザインに触れたことがなかった」と語っています。

AIスタートアップ Hallidai の共同創業者兼CEOで、このツイートで開発者コミュニティから大きな注目を集めました。

彼が投稿した「Design Without Designing」は、65万ビュー・1,490リポストを記録。

エンジニアがデザイナーにならずにデザイン能力を得るための仕組み（エージェントハーネス）を、3つのレイヤーで構造化した内容でした。

3層構造の全体像：Skills x Canvas x Inspiration

Neethan Wu氏のフレームワークは、以下の3層で構成されています。

レイヤー

役割

代表ツール

Layer 1: Skills

デザイン専門知識をAIに注入

Impeccable, Emil Kowalski Skill

Layer 2: Canvas

エージェントが直接操作するデザイン面

Paper, Pencil

Layer 3: Inspiration

審美眼を養うインスピレーション源

Variant, Mobbin, Awwwards

ポイントは、単にAIにデザインを任せるのではなく「専門家の知識」「作業する場」「参考にする目」の3つを揃えるところです。

どれか1つでは不十分で、3つが揃って初めて機能するというのがNeethan Wu氏の主張です。

では、各レイヤーを詳しく見ていきます。

Layer 1 ─ Skillsでデザイン専門知識をAIエージェントに注入する

スキルファイルとは何か

AIエージェント（Claude Code、Cursor、Codex等）に対して、特定の専門知識を与える仕組みがスキルファイルです。

プロジェクトの .claude/skills/ ディレクトリにMarkdownファイルとして配置すると、AIがそのルールに従って動作するようになります。

何が嬉しいかというと、ベテランデザイナーの知見をファイルとして「インストール」できるんですよ。

自分がデザインを学ぶ必要はなく、AIに専門家の判断基準を持たせる。

Neethan Wu氏の言葉を借りれば「seasoned designersからtaste（センス）を借りている」わけです。

Impeccable ─ 20のデザインコマンドで「AIっぽさ」を排除

Neethan Wu氏が「最もよく使うスキル」として紹介したのが Impeccable です。

作者は Paul Bakaus氏。

jQuery UIの生みの親であり、Googleでは Chrome DevToolsやAMPのDevRelとプロダクトを担当し、Web Storiesの立ち上げにも関わった人物です。

Impeccableは、Anthropic公式の frontend-design スキルをベースに、より深い専門知識とコントロールを加えたものです。

GitHub上で11,000スターを超えています（2026年3月時点）。

特徴的なのは20以上のデザインコマンドを持っている点です。

/audit ─ UIの問題点を診断
/polish ─ 全体的な品質を底上げ
/animate ─ アニメーション追加
/typeset ─ タイポグラフィ調整
/arrange ─ レイアウト最適化

さらに重要なのが「アンチパターン集」です。

AIが生成しがちな典型的なミス（過度に均一なパディング、没個性な色使い等）を明示的に「やるな」と指示することで、AIっぽいUIからの脱却を図ります。

インストールは以下のコマンドで可能です。

npx skills add pbakaus/impeccable

Emil KowalskiのDesign Engineer Skill

Neethan Wu氏が紹介した2つ目のスキルが、Emil Kowalski氏によるものです。

Emil氏はLinear所属のデザインエンジニアで、以前はVercelに在籍していました。

OSSライブラリの Sonner（トースト通知）と Vaul（ドロワー）の作者で、合計で週間1,500万ダウンロード以上を記録しています。

このスキルファイルの特徴は「スピードと抑制」の哲学にあります。

派手なアニメーションではなく、目的を持った最小限のモーションを重視する。

プロダクティビティツールのUI設計に特に向いている思想です。

Emil氏自身は「常時ONにするのではなく、ケースバイケースで使うことを推奨」としています。

npx skills add emilkowalski/skill

Interface Design / UI Skills（その他の注目スキル）

Neethan Wu氏のツイートでは、他にも2つのスキルが紹介されています。

Interface Design（@Dammyjay93）は、デザイン仕様を永続的な system.md ファイルに保存し、セッション間で自動的に読み込む仕組みが特徴です。

プロジェクト固有のデザインルールを維持したい場合に有効です。

UI Skills（@ibelick）は、Julien Thibeaut氏（motion-primitivesの作者）によるもので、元ツイートによれば15のオープンソーススキルが含まれているとされています。

ベースラインUI、アクセシビリティ、モーションパフォーマンス、メタデータなど、幅広い領域をカバーしています。

スキルファイルは複数を組み合わせて使えるので、Impeccableをベースにしつつ、プロジェクトの特性に合わせて他のスキルを追加するという運用が現実的です。

Layer 2 ─ Canvasでデザインとコードの乖離をなくす

Layer 1のSkillsでAIにデザインの知識を持たせたら、次に必要なのは「AIが直接デザインできる場」です。

Neethan Wu氏はこれを「Agent Canvas」と呼んでいます。

重要なのは、既存のデザインツール（Figma等）にAIを組み込むのではなく、最初からAIエージェントが操作することを前提に作られたキャンバスだということです。

Paper ─ HTML/CSSがそのままデザインになるキャンバス

Paper は、独自形式ではなくリアルなHTML/CSSをベースにしたデザインキャンバスです。

作ったデザインがそのままコードとして使える。

デザインとコードの「翻訳レイヤー」が不要になるんですよ。

MCP（Model Context Protocol）経由で24のツールを公開しており、AIエージェントにフルの読み書きアクセスを提供します。

Neethan Wu氏はPaperを「デザインシステム、デザイントークン、ページデザインのイテレーションに使っている」と述べています。

無料プランでは週100回のMCPツールコール、Proプラン（$20/月）では週100万回まで利用可能です。

Pencil ─ Git管理できるJSON形式のデザインツール

Pencil は、Tom Krcha氏が開発したエージェント駆動のデザインツールです。

ユーザー数は10万人を突破しています。

最大の特徴は、デザインファイルがJSON形式の .pen ファイルとして保存される点です。

Git管理ができて、ブランチやマージもコードと同じように扱える。

MCP経由でClaude CodeやCursorから直接操作できます。

さらに注目すべきは Swarm Mode です。

最大6つのAIエージェントを同時にキャンバス上で動かせる。

1つのエージェントがホームページを、別のエージェントがダッシュボードを、また別のエージェントが料金ページを、同時に並行してデザインする。

マスターエージェントが全体を指揮し、各エージェントが独立したカーソルで作業します。

Pencilは無料で、Mac/Windows/Linuxに対応しています。

PaperとPencilの違いを整理すると以下の通りです。

比較項目

Paper

Pencil

デザイン形式

リアルHTML/CSS

JSON (.pen)

Gitとの親和性

コードベースに含まれる

.penファイルでdiff可能

MCP対応

24ツール（読み書き）

MCP標準対応

特徴的機能

GPUシェーダー対応

Swarm Mode（最大6エージェント）

価格

無料〜$20/月

無料

どちらを使うかはプロジェクト次第ですが、エンジニアとしてはPencilの「Git管理できる」「無料」という点が魅力的に映るかもしれません。

Layer 3 ─ Inspirationで「目を養う」

なぜAI時代でもインスピレーション収集が必要なのか

Layer 1とLayer 2で「AIにデザインの知識を持たせ、デザインできる場を与えた」わけですが、Neethan Wu氏はここでもう1つのレイヤーを加えています。

Inspirationです。

スキルファイルがあればAIは「正しい」UIを作れます。

でも「正しい」と「魅力的」は違うんですよ。

ユーザーが「おっ」と思うデザインには、どこかに意外性や個性がある。

その方向性を示すのがインスピレーション収集です。

AIに「こういう雰囲気で」と伝えるための参照素材を持っておく。

これが3層目の役割です。

Variant ─ スクロールするだけでUIアイデアが湧くツール

Variant は2026年1月にリリースされた、インスピレーション特化のAIデザインツールです。

アプリやサイトのアイデアを入力すると、スクロールするだけで無限にUIデザインのバリエーションが生成される。

「キャンバスなし、スキルなし、MCPなし、プロンプトの繰り返しなし」がコンセプトで、ひたすらスクロールして「これだ」と思うデザインを見つける。

Style Dropper機能を使えば、見つけたデザインの「ビジュアルDNA」を抽出して別のデザインに適用することもできます。

Neethan Wu氏はこれを「endless non-repeating design interpretations（無限の非反復デザイン解釈）」と表現しています。

デザインの最初の一歩、つまり「方向性を決める」フェーズで特に力を発揮します。

Mobbin / Awwwards / Cosmos

インスピレーション源はVariantだけではありません。

Neethan Wu氏はさらに3つのサービスを紹介しています。

Mobbin は、実際にリリースされているアプリやWebサイトのUI/UXスクリーンショットをデータベース化したサービスです。

モバイルアプリ40万以上、Webアプリ30万以上、合計70万以上のスクリーンが収録されており、「実際に使われているUIパターン」を探せます。

「この画面のこのパターン、参考にしたい」という具体的なリファレンスを見つけるのに最適です。

Awwwards は、Webデザインの最高水準を審査・表彰するプラットフォームです。

受賞作品を眺めるだけでも「プロのデザイナーが何を重視しているか」の感覚が掴める。

Cosmos は、インスピレーションを収集・整理するためのツールです。

気になったデザインをコレクションとして保存し、後から参照できます。

これらのサービスの使い分けとしては、以下のような流れが考えられます。

Variant でデザインの方向性を探る（AIが生成する無限のバリエーションから）
Mobbin で実際のアプリのUIパターンを参考にする（実績のあるパターンから）
Awwwards でデザインの上限レベルを把握する（最高水準の事例から）
Cosmos で気に入ったデザインをストックしておく（後から参照するために）

3層フレームワークを使った実際のデザインフロー

ここまでの内容を踏まえて、実際にどういう流れでUIを作るかをまとめます。

ゼロからUIを作る場合のステップ

インスピレーション収集（Layer 3）：VariantやMobbinで方向性を決める。

「SaaS的なクリーンさ」なのか「大胆で実験的なデザイン」なのか、ビジュアルの方向を固める 2. スキルファイルの設定（Layer 1）：Impeccableをベースにインストール。

プロジェクトの特性に合わせてEmil KowalskiのスキルやUI Skillsを追加する 3. キャンバスでデザイン（Layer 2）：PaperまたはPencilを開き、AIエージェントに方向性とともにデザインを指示する 4. イテレーション：Impeccableの /audit コマンドでデザインを診断し、/polish で品質を底上げする