Design Workflow

Claude Code・Codex × Figma で、デザインの「つくる・反映する・点検する」を仕組みにしています。会員制マッチングアプリの案件で、少ない人数で並行する施策を回すために組み立てました。反映前に古い画面へ戻す事故を防ぎ、レビューで受けた指摘をルールとして残せるので、チームが確認に使う時間を減らせます。

背景

スプリントごとに複数の施策が並行して進むと、「本番の最新画面はどれか」が追えなくなります。実際に、施策の画面をFigma上の本番デザインに反映したとき、先に更新されていた5画面を古い構造に戻してしまったことがありました。そこでAIを「手を動かすアシスタント」ではなく、デザイン運用の仕組みとして組み込みました。

AIが読める「正本」を3層でつくる

デザインシステムを土台に、画面台帳とスキルを積み上げています。

施策1件の流れ

立ち上げから点検まで、AIが既存の部品で叩き台を組み、デザイナーはそれをもとに体験と画面を設計します。確認や反映などの機械的な作業はAIに任せます。

任せること、任せないこと

「全部を自動化しない」と線を引くことで、スピードと安全性を両立しています。

データで決める

端末の画面幅や、ユーザーが入力する名前の文字数を集計し、フレーム幅やダミー文言の長さを感覚ではなくデータで決めています。

成果

• 本番デザインのページで、構造の逸脱0件を維持
• 本番反映時の画面の退行を、反映前に検出できる状態に
• レビューで受けた指摘をルールとして蓄積し、同じ指摘を二度受けない運用に

使っているツール

Figma（Variables / Library）、Claude Code、Codex、Figma MCP、Devin（SQL集計）、GitHub Projects、iOSシミュレータ

※ 社名・実際の画面は掲載していません。事例の詳細は会員制マッチングアプリのページにまとめています。