CC Tips: 【超簡単】Claude Code×Figmaで「AI感なし」のWebサイト・UIを一瞬で制作する方法【WEB制作・コーディング】

• MCPでFigmaと接続: FigmaデスクトップアプリでMCPサーバーを有効化し、発行した個人アクセストークンをCursorのMCP設定(Custom MCPのJSON)に貼ることで、Claude CodeからFigmaのデザインを直接参照できる
• エラーはそのままAIに貼る: インストールやMCP接続でエラーが出た場合、エラーメッセージやスクリーンショットをそのままチャットに貼ると原因と対処法(パッケージ名の誤り、バージョン不一致など)を教えてくれる
• 実装前に内容確認を挟む: FigmaリンクをClaude Codeに渡す際、いきなり実装させず「まず内容を確認してください」と指示してから「HTML/CSSで実装してください」と依頼すると、意図通りの実装になりやすい
• 部分修正はファイル指定で: 修正したい箇所(例: ヒーローセクション)をチャットに追加(add to chat)してからピンポイントで指示を出すと、該当ファイルだけを的確に修正してくれる
• ファイルの保存場所もAIに聞く: 「作成したファイルはパソコン内どこにありますか」と聞けば、Claude Codeが保存場所とFinderでの探し方まで教えてくれる