prototype-to-production
✓デザインのプロトタイプ (HTML、CSS、Figma エクスポート) を実稼働可能なコンポーネントに変換します。プロトタイプの構造を分析し、デザイントークンを抽出し、再利用可能なパターンを特定し、型指定された React コンポーネントを生成します。デフォルトとして React + TypeScript を使用して既存のプロジェクト技術スタックに適応します。
SKILL.md
Convert design prototypes into production-ready, typed components by analyzing structure, extracting patterns, and generating clean code.
| Input Type | Detection Method | Key Patterns |
| Super-design | Path: .superdesign/designiterations/.html | Flowbite, Tailwind CDN, theme CSS references | | Generic HTML | Any .html file | Standard HTML structure, inline/external CSS | | Figma Export | Figma-specific class names | figma-, absolute positioning, frame naming |
デザインのプロトタイプ (HTML、CSS、Figma エクスポート) を実稼働可能なコンポーネントに変換します。プロトタイプの構造を分析し、デザイントークンを抽出し、再利用可能なパターンを特定し、型指定された React コンポーネントを生成します。デフォルトとして React + TypeScript を使用して既存のプロジェクト技術スタックに適応します。 ソース: ariegoldkin/ai-agent-hub。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/ariegoldkin/ai-agent-hub --skill prototype-to-production- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
prototype-to-production とは？
デザインのプロトタイプ (HTML、CSS、Figma エクスポート) を実稼働可能なコンポーネントに変換します。プロトタイプの構造を分析し、デザイントークンを抽出し、再利用可能なパターンを特定し、型指定された React コンポーネントを生成します。デフォルトとして React + TypeScript を使用して既存のプロジェクト技術スタックに適応します。 ソース: ariegoldkin/ai-agent-hub。
prototype-to-production のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/ariegoldkin/ai-agent-hub --skill prototype-to-production インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/ariegoldkin/ai-agent-hub
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01