Design Studio

制作の動機

従来のフローは「デザイナーの Figma 作業 → FE パブリッシング → ロジック作業」の順序で、Figma → FE パブリッシング工程がボトルネックでした。 ワイヤーフレームベースのデザインシステムを用いたページ生成をデザイナーに提案し、design-studio がこれを自動化することで、ボトルネックがほぼ解消しました。 変更後のフロー: ワイヤーフレーム作成 → design-studio でページ生成 → FE はページを見てパブリッシング完了 → デザイナーは生成されたページを基に Figma に文書化。

コメント

このソリューションを構築した後、デザイナーから「非常に有用だ」というコメントを受けており、自身も日常業務でその有用性を十分に実感しています。

主な特徴

• 01ワイヤーフレームを与えるだけで Flunti デザインシステム (Design System) に沿ってページを自動生成
• 02自動 commit コマンド対応
• 03FE アーキテクチャ (FSD) に合わせて features / widgets 単位のコンポーネント + Mock entities を自動生成し、迅速なパブリッシングを実現

担当した役割

• 01ページ生成のためのプロンプト作成およびコマンド化
• 02生成されたページのプレビュー用 Next.js ベース SSG プロジェクトの作成
• 03ページ配備のための GitHub Actions スクリプト作成