実画面を設計書にする ― モック自動生成で設計と実装の二重管理をなくす開発フロー by sohjin

追加開発のたびにアプリケーションの仕様を設計書に書き写し、その設計書を見ながら実装する。
この往復作業は工数がかかるわりに付加価値が低く、設計と実装の乖離も生みやすい構造的な課題となっているのではないでしょうか。

本トークでは、SPA の画面から単一の HTML ファイルを自動生成し、「実画面そのものを設計の正」とする開発フローを紹介します。
生成された HTML モックは AI エージェントが直接読み書きできるため、画面の現状把握や改修案の作成に活かせます。
モックは開発サイクルごとに再生成するだけなので、従来の設計書のようなメンテナンスは不要です。
さらに Figma への取り込みも可能なため、デザイナーとの協働にも活用できます。

設計と実装をつなぐ作業に使っている時間を UX 設計やコンポーネント設計に回せるようにしたい、そんなきっかけになるフローをご紹介します！