mcpField
F
figma-implement-design

figma-implement-design

github.com/nexu-ioデザイン・UI104.6k2.8k 回インストール1 日前に更新
リポジトリ

figma-implement-design について

figma-implement-design は、Figma のデザインを視覚的な忠実度を保ちながら本番用コードに変換するスキルです。Figma のフレームをフロントエンドエージェントへ引き継ぐ用途に向いています。

主な機能

  1. 01Figma デザインのコード化
  2. 02本番用コードの生成
  3. 03視覚的な忠実度の維持

活用シーン

  1. 01Figma フレームのコード実装
  2. 02フロントエンドエージェントへのデザイン引き継ぎ

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nexu-io/open-design --skill figma-implement-design

インストール後、Claude Code で/figma-implement-designを入力して読み込まれたか確認します。

詳細

figma-implement-design

Figma の MCP サーバーガイドをもとに厳選しています。

概要

Figma のデザインを、視覚的な忠実度を 1:1 で保ちながら、本番環境対応のコードに変換します。Figma のフレームをフロントエンドエージェントにそのまま引き渡すのに便利です。

ソース

使用方法

このカタログエントリーは、OpenDesign でこのスキルを紹介し、計画時にエージェントが見つけられるようにします。元のアセット、スクリプト、リファレンスを含む上流ワークフロー全体を実行するには、上流バンドルを現在使用中のエージェントのスキルディレクトリにインストールします。

# Inspect the upstream README for exact paths
open https://github.com/figma/skills

次に、スキル名（figma-implement-design）またはこのスキルのフロントマターに記載されたトリガーフレーズのいずれかを使って、このスキルを呼び出すようエージェントに依頼します。

コメント

Markdown 対応