営業担当者に問い合わせるClaude を試す

Figma

Figma 連携：デザインファイルへのアクセス、コンポーネントの抽出、トークンの読み取り、コードへの変換。デザインと開発の溝を埋めます。

  • インストール先
  • 開発者Figma
  • プラグインのソースソースを見る
  • インストール数167,556

Figma プラグインは、Claude Code を Figma のデザインファイルに直接接続することで、デザインと開発の溝を橋渡しします。デザインのコンテキストへのアクセス、コンポーネント情報の抽出、デザイントークンの取得、そしてピクセル単位の精度で本番環境に対応したコードへの変換が可能です。

主な機能として、Figma フレームからレイアウト・タイポグラフィ・カラーなど構造化されたデザインデータの抽出、デザイン変数およびトークンの取得、Code Connect を利用した Figma コンポーネントと既存コードベースのマッピング、検証用ビジュアル参照のキャプチャなどが挙げられます。Figma のクラウドサーバーとデスクトップアプリの両方に対応しています。

使い方：Figma の URL を共有し、Claude にデザインの実装を依頼してください。/implement-design を使用すると、プロジェクトのデザインシステムに基づいて Figma フレームをコードに変換できます。/create-design-system-rules を使用すると、チームの開発規約を反映したカスタムガイドラインを生成できます。/code-connect-components を使用すると、Figma コンポーネントとコードベースの実装間のマッピングを確立できます。

プロンプト例：「この Figma デザインを実装して：[Figma URL を貼り付け]」「React プロジェクト用のデザインシステムルールを作成して」「Button コンポーネントを対応する Figma コンポーネントに接続して」「このデザインファイルからカラー変数を抽出して」

その他のプラグイン

Frontend Design

Frontend design skill for UI/UX implementation

Superpowers

Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques

Code Review

Automated code review for pull requests using multiple specialized agents with confidence-based scoring

Context7

Upstash Context7 MCP server for up-to-date documentation lookup. Connects to Context7's hosted remote MCP server (https://mcp.context7.com/mcp) — no local Node.js or npx required — to pull version-specific documentation and code examples directly from source repositories into your LLM context. Authenticate with Context7 when prompted.

Code Simplifier

Agent that simplifies and refines code for clarity, consistency, and maintainability while preserving functionality

Playwright

Browser automation and end-to-end testing MCP server by Microsoft. Enables Claude to interact with web pages, take screenshots, fill forms, click elements, and perform automated browser testing workflows.