figma-implement-design
Figmaのデザインを本番環境対応のアプリケーションコードに1:1の視覚的忠実度で変換します。FigmaファイルからUIコードを実装する場合、ユーザーが「デザインを実装する」「コードを生成する」「コンポーネントを実装する」と言及した場合、Figma URLが提供された場合、またはFigmaの仕様に合わせてコンポーネントの構築を要求された場合に使用します。Figmaキャンバスへの書き込みは`use_figma`経由で行い、`figma-use`を使用します。
description の原文を見る
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
SKILL.md 本文
デザインの実装
概要
このスキルは、Figmaデザインを本番環境対応のコードにピクセルパーフェクトな精度で変換するための体系的なワークフローを提供します。Figma MCPサーバーとの一貫した統合、デザイントークンの適切な使用、およびデザインとの1:1の視覚的一致を保証します。
スキルの境界
- このスキルは、成果物がユーザーのリポジトリ内のコードである場合に使用してください。
- ユーザーがFigma自体内のノードの作成/編集/削除をするよう求めた場合は、figma-useに切り替えてください。
- ユーザーがコードまたは説明からFigma内の完全なページスクリーンを構築または更新するよう求めた場合は、figma-generate-designに切り替えてください。
- ユーザーがCode Connectマッピングのみを求めた場合は、figma-code-connect-componentsに切り替えてください。
- ユーザーが再利用可能なエージェントルール(
CLAUDE.md/AGENTS.md)の作成を求めた場合は、[figma-cr
...
詳細情報
- 作者
- openai
- リポジトリ
- openai/skills
- ライセンス
- 不明
- 最終更新
- 2026/5/12
Source: https://github.com/openai/skills / ライセンス: 未指定