moai-design-tools
✓Figma MCP、Pencil レンダラー、Pencil からコードへのエクスポートをカバーするデザイン ツール統合のスペシャリスト。 Figma からデザイン コンテキストを取得する場合、Pencil DNA コードを .pen フレームにレンダリングする場合、.pen デザインを React/Tailwind コードにエクスポートする場合、またはデザインからコードへのワークフローを選択する場合に使用します。デザインのフェッチ (Figma)、ビジュアル レンダリング (Pencil MCP)、およびコード生成 (React/Tailwind) をサポートします。
インストール
SKILL.md
Comprehensive design-to-code workflow guidance covering three major capabilities: Figma MCP (design fetching), Pencil MCP (visual rendering), and Pencil-to-code export (React/Tailwind generation).
Figma integration for fetching design context, metadata, and screenshots from Figma files.
Best For: Fetching design tokens, component specifications, layout information, and style guides from existing Figma files. Extracting design system values and understanding design structure.
Figma MCP、Pencil レンダラー、Pencil からコードへのエクスポートをカバーするデザイン ツール統合のスペシャリスト。 Figma からデザイン コンテキストを取得する場合、Pencil DNA コードを .pen フレームにレンダリングする場合、.pen デザインを React/Tailwind コードにエクスポートする場合、またはデザインからコードへのワークフローを選択する場合に使用します。デザインのフェッチ (Figma)、ビジュアル レンダリング (Pencil MCP)、およびコード生成 (React/Tailwind) をサポートします。 ソース: modu-ai/moai-adk。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/modu-ai/moai-adk --skill moai-design-tools- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-17
- 更新日
- 2026-02-18
クイックアンサー
moai-design-tools とは？
Figma MCP、Pencil レンダラー、Pencil からコードへのエクスポートをカバーするデザイン ツール統合のスペシャリスト。 Figma からデザイン コンテキストを取得する場合、Pencil DNA コードを .pen フレームにレンダリングする場合、.pen デザインを React/Tailwind コードにエクスポートする場合、またはデザインからコードへのワークフローを選択する場合に使用します。デザインのフェッチ (Figma)、ビジュアル レンダリング (Pencil MCP)、およびコード生成 (React/Tailwind) をサポートします。 ソース: modu-ai/moai-adk。
moai-design-tools のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/modu-ai/moai-adk --skill moai-design-tools インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/modu-ai/moai-adk
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-17