08 — PRODUCT DESIGN
Product Design
AI製品のUI/UXデザインチーム
NON-ENGINEER
「research preview」表記の全コードベース削除が、1週間 → 30分通話×2回に。
検出・コピー確認・法務調整・実装を、Claude Codeが横断で進めた。
ROLE
AI製品のUI/UX設計。非開発者がClaude Codeでデザインとエンジニアリングの伝統的な隔たりを直接埋める。
主要ユースケース
- フロントエンドの磨きとstate管理改修
従来はエンジニアに何往復もしていた視覚調整を、デザイナー自身がClaude Codeで実装。state管理改修まで踏み込む。
- GitHub Actions経由の自動チケット処理
Issueに変更内容を書くだけで、Claudeが自動でPR案を提案。Claude Codeを開かなくても回る。
- スクショ→動くプロトタイプ
モックアップ画像を貼ると、即座に動くプロトタイプを生成。静的Figmaの説明往復が消える。
- エッジケースとシステム理解
設計段階でエラーステート・ロジックフローを網羅。実装時の発見を設計時に潰す。
- コピー一括変更と法務連携
「research preview」表記の全コードベース削除を、Claude Codeが検出→確認→法務調整→実装まで横断で実施。1週間→30分通話×2回。
Impact (数字)
80%Figma + Claude Code を同時に開く時間
2-3x実装速度
週→時サイクル時間の短縮
Top tips
- 初期セットアップだけエンジニアに頼めリポセットアップと権限設定だけ手伝ってもらう。日常運用は1人で回せる。
- カスタムメモリでClaudeを縛れ「私はデザイナーで詳細解説+小さな段階的変更を希望」とClaude.mdに書く。返答の質が劇的に上がる。
- 画像ペーストでプロトタイピングCommand+Vでスクショを直接貼る。Claude Codeは画像読み取り+機能コード生成が得意。