Claude Design ↔ Claude Code を行き来して作った資産ポートフォリオダッシュボード

• URL: https://zenn.dev/unsoluble_sugar/articles/fd73c7b67d80ce
• 日付: 2026-06-23
• Tier: Tier 3
• 要旨: Claude Design で資産ポートフォリオダッシュボードのプロトタイプ・UI 設計を確定後、Claude Code で実装・本番化。Design ↔ Code の二段構えで、大枠と細部を効率的に分担。

詳細

複数口座の資産（国内株・米国株・投信・金）を一元閲覧するダッシュボード。Claude Design で選択式の要件確認後、3 案プロトタイプ生成。クラシック案（カード+低彩度）採用。Design フェーズでドリルダウン・ドーナツ％ラベル・為替ライブ更新まで詰める。トンマナ：白基調・低彩度・意味ある色のみ（騰落：+赤/-緑、カテゴリ色統一）。Claude Code で本番化：技術スタック決定（dc-runtime・Vanilla JS・GitHub Pages・OTel なし）→ロジック mixin 分離→実データ流入→CI 毎日更新。Shift-JIS 文字化け対応・ドル建て円換算・投信口数・金グラム単位のバラバラを実装段階で吸収。メンテナンスコスト最小化重視（ビルドレス・ローカル python3 -m http.server で動作）。既知脆弱性スキャン・Symbol pinning を試行。デザイン羅針盤を先に作ることで、後の細部変更でも軸がぶれずメンテしやすい。