TemPad Dev MCP を設計証拠 (コード スナップショット、構造、アセット、トークン、codegen 構成) の唯一のソースとして使用して、Figma の選択または指定されたノード ID から統合対応の UI コードを実装します。まずターゲットのリポジトリ スタックと規則を検出し、次に新しい依存関係を追加することなく、TemPad Dev の Tailwind のような JSX/Vue IR をプロジェクト ネイティブ コードに変換します。重要なスタイルや寸法を推測しないでください。必要な証拠が欠落または矛盾している場合、または資産がレポポリシーに基づいて処理できない場合は、明示的な警告と省略を示した安全ベースを停止または出荷します。
コマンドラインで figma-design-to-code AI スキルを開発環境にすばやくインストール
ソース: ecomfe/tempad-dev。
This skill requires TemPad Dev MCP. If tempad-dev: tools are unavailable/inactive/unauthorized, stop and tell the user to install TemPad Dev MCP and ensure it is activated in the TemPad Dev panel in the Figma design file.
TemPad Dev outputs Tailwind-like IR in either JSX or Vue. Treat MCP outputs as design facts. Never guess key styles.
Never invent: colors, typography (size/weight/line-height/letter-spacing), spacing, radius, borders, shadows, gradients, opacity/overlays, blur.
TemPad Dev MCP を設計証拠 (コード スナップショット、構造、アセット、トークン、codegen 構成) の唯一のソースとして使用して、Figma の選択または指定されたノード ID から統合対応の UI コードを実装します。まずターゲットのリポジトリ スタックと規則を検出し、次に新しい依存関係を追加することなく、TemPad Dev の Tailwind のような JSX/Vue IR をプロジェクト ネイティブ コードに変換します。重要なスタイルや寸法を推測しないでください。必要な証拠が欠落または矛盾している場合、または資産がレポポリシーに基づいて処理できない場合は、明示的な警告と省略を示した安全ベースを停止または出荷します。 ソース: ecomfe/tempad-dev。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-codeTemPad Dev MCP を設計証拠 (コード スナップショット、構造、アセット、トークン、codegen 構成) の唯一のソースとして使用して、Figma の選択または指定されたノード ID から統合対応の UI コードを実装します。まずターゲットのリポジトリ スタックと規則を検出し、次に新しい依存関係を追加することなく、TemPad Dev の Tailwind のような JSX/Vue IR をプロジェクト ネイティブ コードに変換します。重要なスタイルや寸法を推測しないでください。必要な証拠が欠落または矛盾している場合、または資産がレポポリシーに基づいて処理できない場合は、明示的な警告と省略を示した安全ベースを停止または出荷します。 ソース: ecomfe/tempad-dev。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/ecomfe/tempad-dev