ui-designer
✓リファレンス UI イメージからデザイン システムを抽出し、実装可能な UI デザイン プロンプトを生成します。ユーザーが UI スクリーンショット/モックアップを提供し、一貫したデザインを作成したり、デザイン システムを生成したり、参照の美しさに一致する MVP UI を構築したりする場合に使用します。
SKILL.md
This skill enables systematic extraction of design systems from reference UI images through a multi-step workflow: analyze visual patterns → generate design system documentation → create PRD → produce implementation-ready UI prompts.
Save as variable for Step 4 (optionally save to documents/prd/)
Use the final composed prompt from Step 4 to implement UI in React project.
リファレンス UI イメージからデザイン システムを抽出し、実装可能な UI デザイン プロンプトを生成します。ユーザーが UI スクリーンショット/モックアップを提供し、一貫したデザインを作成したり、デザイン システムを生成したり、参照の美しさに一致する MVP UI を構築したりする場合に使用します。 ソース: daymade/claude-code-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/daymade/claude-code-skills --skill ui-designer- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
ui-designer とは？
リファレンス UI イメージからデザイン システムを抽出し、実装可能な UI デザイン プロンプトを生成します。ユーザーが UI スクリーンショット/モックアップを提供し、一貫したデザインを作成したり、デザイン システムを生成したり、参照の美しさに一致する MVP UI を構築したりする場合に使用します。 ソース: daymade/claude-code-skills。
ui-designer のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/daymade/claude-code-skills --skill ui-designer インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/daymade/claude-code-skills
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01