Figmaを開かずにUIを作る — VS Code内で動くOSSデザインエージェントSuperdesign

デザインとコーディングの間には、いまだに溝がある。

Figmaでデザインを作り、それをコードに書き起こす。あるいはv0やLovableでUIを生成し、それをプロジェクトに手で組み込む。どちらのルートも「ツールの切り替え」が発生する。デザインとコードが別の世界に住んでいるからだ。

Superdesignは、この溝をIDE内で埋めようとするオープンソースのデザインエージェントだ。VS Code、Cursor、Windsurf、Claude Codeで動く。テキストでUIを説明すると、プロダクションレディなReactコンポーネント（Tailwind CSS、CSSカスタムプロパティ、アニメーションキーフレーム付き）が生成される。しかも10パターン以上が同時に出てくる。

MITライセンス。データはローカルの.superdesign/フォルダに保存され、外部に送信されない。

どう動くか

Superdesignをインストールすると、IDE内にデザインパネルが追加される。ここでテキストプロンプトを入力する——「ダークモードのダッシュボード」「カード型のプライシングテーブル」「グラデーション背景のヒーローセクション」——するとAIが複数のデザインバリエーションを生成する。

生成されるのは画像ではなく、そのまま使えるReactコードだ。Tailwind CSSのクラスが適用され、レスポンシブ対応もされている。気に入ったバリエーションをクリックすれば、プロジェクトにそのまま挿入できる。

注意点がひとつ。ツール自体はオープンソースで無料だが、AIモデルの推論には自前のAPIクレジットが必要になる。完全無料というよりは「ツールの利用料は無料、AIの利用料は自己負担」という構造だ。

Webサイトをまるごとクローンする

個人的にいちばん刺さったのはChrome拡張の機能だ。

任意のWebサイトにアクセスし、Superdesignの拡張をクリックすると、そのサイトのコンポーネントをキャプチャしてAIコーディングアシスタントに渡せる。サイト全体をNext.jsのプロジェクトに変換し、そのままAIで編集可能な状態にする。

競合サイトのデザインを参考にしたいとき、気に入ったランディングページの構成を再利用したいとき、クライアントが「こんな感じで」と見せてきたサイトをベースにしたいとき。スクリーンショットを撮ってFigmaに貼る代わりに、コンポーネント単位で分解された編集可能なコードが手に入る。

v0やLovableとの違い

v0やLovableもテキストからUIを生成する。Superdesignと何が違うのか。

v0はVercelのWebサービスで、ブラウザ上で完結する。Lovableはフルスタックのアプリビルダーだ。どちらも「自分たちのプラットフォーム上でUIを作る」ツールであり、生成されたコードを既存プロジェクトに組み込むには手間がかかる。

Superdesignは逆のアプローチを取っている。すでにあるプロジェクトの中に入り込み、そのプロジェクトのコンテキスト（既存コンポーネント、デザインシステム、ディレクトリ構造）を理解した上でコードを生成する。既存のデザインシステムとの整合性を保ちやすいのが利点だ。

ただし、v0やLovableのように「ゼロから完成形を見せてくれる」体験ではない。ある程度のプロジェクト構造が先にあることを前提としている。

気になる点

オープンソースのデザインツールとしては筋がいいが、まだ荒削りな部分がある。

まず、生成されるデザインの品質がAIモデルに強く依存する。プロンプトの書き方でアウトプットが大きく変わるため、「テキストでUIを説明する力」が求められる。デザインの言語化が苦手な人には、Figmaで直接ドラッグ＆ドロップしたほうが早いかもしれない。

また、10パターン同時生成は魅力的だが、すべてが使えるレベルとは限らない。玉石混交から良いものを選ぶ目は必要だ。

Chrome拡張のWebサイトクローン機能も、複雑なインタラクションやカスタムアニメーションの再現には限界がある。静的なレイアウトの再現は得意だが、リッチなWebアプリのクローンは期待しないほうがいい。

デザインとコードの距離が縮まる

SuperdesignがFigmaを置き換えるかと言えば、ノーだ。デザイナーが視覚的にレイアウトを検討する工程は、テキスト入力では代替できない。

ただ、「デザインカンプはないけど、こんなUIが欲しい」という開発者にとっては強力なツールになりうる。プロトタイプの段階で10パターンのUIを見比べられるのは、個人開発やスタートアップの初期フェーズでは特に有用だ。Figmaのライセンス料をかけずに、コードエディタの中でデザイン検討ができる。

• Superdesign GitHub
• Superdesign 公式サイト
• Chrome拡張