見出し画像

デザイナーがClaudeとFigma MCPで試したこと（VibeCoding実践記）

yiping

Claude CodeとFigma MCPを使って、一つ小さなプロダクトを作ってみた流れと気づきを振り返り用にまとめました。
コーディングはできないけど、自分で一つプロダクトを作ってみたいデザイナー向けに少しでも参考になればと思います〜


プロダクト概要

Weekly Blooms は、週末に「小さな挑戦」を宣言・達成して自己効力感を育てるWebアプリ。

こちらのURLからぜひ触ってみてください。

使い方はシンプルな2ステップ

  1. 土曜朝に宣言 — 「My little challenge」として、この週末にやってみたい小さなことをひとつ入力

  2. 日曜夜に振り返る — 達成できたら「Done!」を押して、意外とよかったことを一言メモ

達成すると、ランダムに花の画像がご褒美で届く。その花と一言コメントをまとめたSNSシェア用カード（表：花の画像 / 裏：テキスト）を2枚ダウンロードして、InstagramやXに投稿できる。

ログイン不要でスマホブラウザだけで完結する設計にしていて、気軽に続けられることを重視してる。

背景

私自身、土日を自己効力感（「自分はできる」って感覚）を高める時間にしたいと前から思っていて、直近半年くらい実践してきた。たとえば、健康管理の一環で作ったことのないデザートを作ってみたり、サウナも行ったことなかったからサウナデビューしてみたり。

自己効力感って、大きな目標を達成することじゃなくて、小さな「意外とできた」「意外とよかった」の積み重ねで育まれると思う。

この自己効力感の実践を可視化するのが今回のプロダクトの目的。

VibeCodingの大枠の流れ

今回の開発では、おおまかに次の順で進めた。

  1. GitHubでリポジトリを作成

  2. 上流のPRDを作成

  3. UIは一旦置いて、一連の画面遷移をまず実装

  4. Figma MCPと連携してUIを調整していく

  5. GitHubにpushして、Vercelでデプロイ

使ってるツール
Cursor ： IDEとして利用 
Claude Code ：実装（コードの生成・修正） 
GitHub ：ファイルの保存先 
Vercel ：デプロイ用 
Figma ：主要画面のUI、コンポーネント、画面内のビジュアル（花やアイコンなど）をデザイン

GitHubでリポジトリを作成

GitHubにログインして、今回のプロジェクト用のリポジトリを新規作成。そのリポジトリをIDE（CursorやVSCode）にクローンして、作業開始。

PRDを作成

まずClaudeに質問しながら、PRDを作っていく。

Claudeがこちらの理解を深めるために質問してくれるので、ひとつずつ答えていって、最終版のPRDを作った。

ClaudeがPRDに必要だけど、まだ明確になっていない項目を質問してくれる

内容は、背景・課題・目標・非目標・ペルソナ・UXフロー・機能要件・非機能要件・データ設計といったよくある構成。

機能要件の詳細度合いはこんな感じ。

機能要件はユーザーストーリーにそれに必要な要件から構成される

CLAUDE.mdを作成

CLAUDE.mdは、Claude Codeにプロジェクト固有のルール・構造・コマンド・コーディング規約を理解させるための「業務マニュアル」みたいなファイル。これがあるとAIがプロジェクト全体を把握しやすくなって、毎回同じ前提を説明する手間が省けるし、回答の質も上がるので、ほぼ必須のファイルだと思う。

「今回のプロジェクトに最適なCLAUDE.mdを作りたい。ガイドしてくれる？」と聞いたら、構成を提案してくれた。

どんな内容をCLAUDE.mdに書くかClaudeに聞く

技術スタックを決める

PRDとCLAUDE.mdができたら、実装に必要な技術スタックを決めていく。

自分はエンジニアじゃないので技術スタックに詳しくなくて、Claudeに相談しながら、最初のV1としてどの技術スタックがいいか決めにいった。

たとえばログイン機能の要否とか。ログインなしだとユーザーフローにどう影響するかClaudeに聞いて、その影響がV1では許容範囲かどうか考えながら判断した。

技術スタックもClaudeに提案してもらう

花のカードを両面フリップできる仕様にしたかったから、それが実装できるかClaudeに聞いて、一度実装イメージを出してもらった。

Figmaなしでメインのユーザーフローを実装する

技術スタックが決まったら、いよいよ実装に入る。この段階では一旦表層的なUIを無視して、まずはshadcn/uiベースで実装して、想定してるユーザーストーリーがちゃんと表現されてるかを確認する。

最初に実装した動的プロトタイプはこちら👇


Figmaで主要画面のUIを作成する

必要なユーザーフローが一通り揃ったので、ここからはUIをイメージしているものに近づけていく。

今回のUIは自分の中でビジュアルのイメージがあるので、Figmaで主要な画面（home、history画面）と、付与される花のカードのUIを作った。

主要画面のみ作った

Figma MCPを接続し、デザインシステムやUIを実装

Figmaに簡易的なコンポーネントを作ったので、Claudeにcreate_design_system_rules（Figma MCPの機能のひとつで、Figmaのコンポーネントからデザインシステムのルールを生成してくれるやつ）を使って、デザインシステムを作ってもらった。

そのデザインシステムで実装した画面がこちら。完成度はだいたい40％くらい。

花のモチーフやフッターのオリジナルなボタンは反映してくれなかった…

花のモチーフやフッターのオリジナルなボタンは反映されてなくて、shadcn/uiから逸脱した要素はうまく反映されないようだった。

コンポーネントや小さめの要素単位で指定して、Figma MCP経由でClaudeに指示を出しながら、少しずつUIを調整していった。

こちらのframeを選択した状態で、下記指示をClaudeに指示した
シェアカードの裏面はこちらの構成でお願い
上から
1. My Little Challenge
2. Border
3. 書いたchallengeの内容
4. 書いたreflectionの内容
5. doneした日
@https://www.figma.com/design/F2koJe30gYXMmTk5EliCAr/20260221_self-efficacy?node-id=1-310&m=dev

実装したコードをFigmaに取り込んで修正

shadcn/uiベースでは表現しきれないオリジナルなUI要素を、Claude to Figmaでカバーできないか試してみた。

早速認証の問題に遭遇。Figma MCPは読み取り専用で、書き出しには認証が必要とのことだった。

/mcp で状態を確認して、認証を進めた。

なんとFigma MCPに認証が必要だった

認証を進めたら、無事Figmaファイルが作成されてFigmaに取り込めた。

Claude to Figmaで画面をFigmaに取り込んだ

実験してみた結果、lucide iconから逸脱した花のアイコンをFigma MCP参照で実装してほしいと依頼しても反映してくれなかった。
原因のひとつは、CLAUDE.mdにshadcn/uiを使うと定義してるから、オリジナルアイコンを採用してくれなかったのかなと思ってる。

ここはFigmaからエクスポートしたSVGを直接使ってほしいと指示したら解決した。

frontend-designで実装とデザインシステムの一貫性をチェック

最後に、Claude Codeが推奨してるfrontend-designスキルを使って、今の実装がデザインシステムとずれてないかチェックして、必要に応じて修正してもらった。

最初から厳密にdesign systemを作っていなかったので、直接参照のところを指摘された

Vercelを使ってデプロイ

実装の途中でもGitHubにpushして保存しておく。最後にVercelでアカウントを作って、GitHubのリポジトリをインポートしてデプロイ。これで誰でもプロダクトに触れるようになる。

VibeCodingしてみての感想

わからないことが出てきたとき

わからないことはたくさん出てくるけど、そのときはClaudeに聞けばだいたい9割は解決してくれた。

オリジナル要素多めのUIの実装

オリジナル要素が多めのUIだと、Figma MCP経由で指示しても理想どおりに出てこないことが多かった。FigmaからエクスポートしたSVGを直接Claudeに渡すとか、小さな要素単位でFigma MCP経由で指示するとか、試行錯誤してみるのがよさそう。

Claude to Figmaが活用できそうな場面

「AIに指示する方が早いか、Figmaで修正してからまたClaudeに渡す方が早いか」はプロジェクトによるかなと思った。チームだと、エンジニアがベースを実装して、デザイナーがそれをベースにパターン出しするときとか、一気に数箇所を微調整するときに活用できそう。



いいなと思ったら応援しよう！