テキストから本格UIを生成するHuashu Design

ピクセルをターミナルから叩き出す時代

開発の現場において、デザインとエンジニアリングの境界線は常に悩ましい断層だった。Figmaのカンバスに描かれた美しいモックアップを前に、どうやってこれをDOMツリーとCSSに翻訳するか頭を悩ませた経験は、15年前も今も根本的には変わっていない。

ここ数年、v0.devのようなGenerative UIの台頭により、言葉から直接UIコンポーネントを練成できるようになった。確かに開発スピードは飛躍的に向上した。しかし、同時にひとつの「諦め」も蔓延し始めている。AIが生成するUIは、どこか無機質で「AIっぽい(AI slop)」匂いがするのだ。プロトタイプには十分でも、最終的なプロダクトとしてユーザーの前に出すには、結局人間のデザイナーが手心を加える必要があった。

そんな「AIデザインの限界」という思い込みを、黒いターミナル画面から軽やかに打ち破るアプローチが現れた。Figmaのプラグインでも、新しいSaaSでもない。AIエージェントの「スキル」として機能する拡張機能である。

タイピングとエンターキーが織りなす「納品物」

「タイピングして、エンターを押す。すると、そのまま納品できるデザインが手元に届く」——これがHuashu Designの思想だ。Claude CodeやCursorといったエージェント環境に直接インストールし、プロンプトを投げるだけで、ブラウザを介さずに高度なデザイン成果物を生成する。

導入は拍子抜けするほどシンプルだ。

npx skills add alchaincyf/huashu-design

インストール後、ターミナルからエージェントに向かって直接言葉を投げかける。

「AIポモドーロタイマーのiOSプロトタイプを作って。主要な4画面は実際にクリックできるように」
「このロジックを60秒のアニメーションにして、MP4で書き出して」

驚くべきは、ここから出力されるのが単なる静的ファイルやコードの断片ではなく、「即座に実用に耐えうる成果物」であることだ。iPhone 15 ProのベゼルやDynamic Islandを正確に再現したPlaywrightテスト済みのプロトタイプや、BGM付きの60fpsアニメーション動画が数分から数十分で生成される。

「AI生成UI」と「エージェントによるデザイン」の違い

なぜこのツールが既存の選択肢と一線を画すのか。それは、単にコードを書くのではなく、「デザイナーの思考プロセス」をシステム内に内包している点にある。

アプローチ 主なツール 得意なこと 欠点
伝統的ワークフロー Figma, Sketch ピクセルパーフェクトな表現、細部の作り込み 学習コストが高く、実装への翻訳(コーディング)が必要
Generative UI v0.dev, Claude Artifacts コンポーネントの高速生成、フロントエンド実装の補助 「AI特有のテンプレ感」が抜けず、デザインの方向性が単一になりがち
エージェント・デザイン Huashu Design 複数方向の提案、MP4やPPTXなどの「納品物」の直接出力 エージェントのコンテキスト保持力やCLI環境の制約に依存する

プロンプトで指示が曖昧なとき、Huashu Designはただ適当にUIを作るようなことはしない。内蔵された5つの流派・20のデザイン哲学に基づき、自ら「3つの異なる方向性」を提案し、並行してデモを生成してくる。これはまさに、要件が固まりきっていないクライアントに対して、シニアデザイナーが初回のミーティングで見せる立ち回りそのものだ。

出力形式の執念がワークフローを変える

技術的に最も痺れるのは、その出力のエッジケースに対する執念である。

たとえばスライド生成機能。HTMLベースでブラウザ上でプレゼンできるだけでなく、そのままPPTXとして書き出す機能を持っている。それも「画面を画像化して貼り付けただけ」のハリボテではない。DOMのcomputedStyleを読み取り、PowerPointのネイティブなオブジェクトへと逐一翻訳していく。つまり、出力されたPPTXはテキストボックスが生きている「編集可能」なファイルなのだ。

さらに、アニメーション生成においては独自の時間軸モデルを持ち、EasingなどのAPIを駆使してブラウザ上でレンダリングしたものを、1コマンドでMP4やGIFへと変換する。FigmaからAfter Effectsへ持っていくような面倒なブリッジ作業が、ターミナル上の数行のやり取りで完結してしまう。

私たちがGUIという「手作業のインターフェース」に縛られていたのは、直感的な操作が必要だったからではない。意図をコードに変換する技術が未成熟だったからだ。しかし今、優れたデザイン哲学を持ったエージェントが、私たちの曖昧な言葉を拾い上げ、確固たるピクセルとモーションへと結実させている。

コマンドラインは、もはやエンジニアだけのものではない。そこは最も純粋で、最も強力なデザインスタジオになろうとしている。

参考リポジトリ: alchaincyf/huashu-design

Photo by Jo Lin on Unsplash

コメントする