ピクセルをターミナルから叩き出す時代
開発の現場において、デザインとエンジニアリングの境界線は常に悩ましい断層だった。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