Claude × Figma MCP でデザインから実装までをワンステップで：1日アプリ制作の実践ガイド
Hiroba による自動要約
Figma MCP サーバーを Claude Code から利用し、デザインから実装までを一貫して行う開発フローを実装。Figma 上のデザインを MCP 経由で Claude に渡し、自動的にコード化する仕組みにより、デザインと実装の往復コストを大幅削減。実際のセットアップ手順と、ペット同伴スポット検索アプリ「PetSpot」の制作例を解説。
読んで良かったら、シェアしてみてください。
同じタグの記事が他に 2827 件あります。
関連する記事
同じタグの記事
重い MCP を使い倒すエンジニアは Claude for Desktop を使わないほうがいいかもしれないという話
ZennClaude Desktop は参照系 MCP に向いているが、データ Insert やWordPress 更新など重い書き込み処理では約 60 秒前後でタイムアウトしやすく、Claude Code CLI のほうが MCP_TOOL_TIMEOUT で調整余地がある。著者は 3 日で Claude Code 中心運用に戻した。
MCP Apps ホストを自作する: SDK 同梱 AppBridge でチャット内 UI を動かすまで
ZennMCP Apps の仕組みを理解するため、公式ガイドに沿ってサーバー実装と自作ホストの構築を検証。SDK 同梱の AppBridge を使い約 70 行で HTML UI をサンドボックス iframe に埋め込む方法と、時刻表示・サイコロ・VOICEVOX 音声合成の 3 つのビューを 1 ホストに並べるまでの実装例を解説。
Claude に Obsidian を「外部脳」として持たせる仕組みを作った
QiitaMCP（Filesystem）経由で Obsidian Vault をClaudeに読み書きさせ、セッション間で知識を引き継ぐシステムを構築。CLAUDE.md に行動ルールを定義し、プロジェクト別に knowledge / preferences / projects フォルダを分割管理。書き込み条件を明確に縛ることで、毎回の前提説明が不要になり、トークン消費も最適化できる。
AI Agent Chat の質問インターフェース設計 ― ユーザーの回答を誘発する Elicitation UI
ZennClaude Code、Claude Design、Genspark など複数の AI Agent Chat では、選択肢の提示と自由入力欄を組み合わせたUI を採用することで、ユーザーの回答の摩擦を軽減している。選択肢は単なる利便性だけでなく、ユーザーが「何を答えるべきか」を言語化するための叩き台となり、MCP の Elicitation 機能のように潜在的なニーズを引き出す役割を果たす。Hermes Agent の実装例から、clarify_tool を用いた構造化された質問生成の仕組みが解説される。