ui-to-figma
by masa-ino-ap
既存プロジェクトのCSS・Tailwind設定・コンポーネントを解析してデザイントークンを把握した上で、 UIを視覚的に改善しFigma MCPサーバー経由でFigmaに送るワークフロースキル。 単なるUI改善ではなく「プロジェクトのデザインシステムに整合した改善」が特徴。 新しい色や間隔をハードコードせず、既存トークン・命名規則の範囲内で提案する。 以下のような場面で使用する: - 「UIを見てFigmaに送って」「このページのデザインを改善してFigmaに反映して」 - 「UIを分析してFigmaにデザイン案を作って」 - WebアプリのUI改善とFigmaへのデザイン連携が必要なとき - ユーザーが「ui-to-figma」「UIをFigmaに」「デザイン改善してFigmaへ」と言ったとき 前提: Playwright（webapp-testingスキル）とFigma MCPサーバーが利用可能であること