Claude × Figma MCP でデザインから実装までをワンステップで：1日アプリ制作の実践ガイド
Hiroba による自動要約
Figma MCP サーバーを Claude Code から利用し、デザインから実装までを一貫して行う開発フローを実装。Figma 上のデザインを MCP 経由で Claude に渡し、自動的にコード化する仕組みにより、デザインと実装の往復コストを大幅削減。実際のセットアップ手順と、ペット同伴スポット検索アプリ「PetSpot」の制作例を解説。
読んで良かったら、シェアしてみてください。
同じタグの記事が他に 5570 件あります。
関連する記事
同じタグの記事
Riveのデータバインディングを、エディタを開かずに.rivへ書き込めるようにした
QiitaRiveのエディタなしで.rivを作成・編集するMCPサーバー「rive-mcp」が、データバインディングの書き込みに対応。`riv_create` でViewModel定義と、文字・数値・色・真偽値の図形への配線、`rangeMapper` による値変換を.rivに書き込み可能に。Claude Codeへの自然言語指示で、アプリから値を差し替えられるUIアニメーションを生成したい開発者向け。
[Kitesurf] Cloudflare の新ブラウザ Kitesurf で Claude を動かしてみた：ブラウザは軽量、エージェントは低速に
DevIOCloudflare が AI エージェント向けに公開したベータ版ブラウザ Kitesurf を、Claude Code と chrome-devtools-mcp 経由でローカル Chrome 等 4 環境と比較した検証記事。単純なページでは Chrome と同等、ページ遷移の多いタスクでは操作数・所要時間が増加し、9 タスク中 1 件で誤答。frame・大規模 JavaScript サイト・ログインを伴う用途は現時点で非推奨との結論で、ブラウザ操作エージェントの実行基盤を検討する開発者向け。
Riveのデータバインディングを、エディタを開かずに.rivへ書き込めるようにした
ZennRiveエディタ不要で.rivを生成・編集するMCPサーバー rive-mcp が、データバインディングの書き込みに対応。`riv_create` でViewModel定義と、文字・数値・色・真偽値の図形への配線、`rangeMapper` による値変換まで.rivに出力可能に。Claude Code から自然文で依頼でき、アプリ側は値の代入のみ。enum の文字表示不可、フォントの `subset` 指定必須などの制約も記載。
Claude CodeでJavaScript描画サイトのデータをJSON取得する：最適なスクレイピングAPIの選び方
QiitaClaude CodeからSPAなどJavaScript描画サイトのデータをJSONで取得する際のスクレイピングAPI選定ガイド。Firecrawl、Zyte API、Browserless、ScrapingBeeを返却形式で3タイプに分類し、Bright DataのMCPサーバーによるブロック対策、JSON Schema検証とフォールバック設計まで整理。スクレイピング基盤を構築する開発者向け。