mcpField
C
concept-prototyper

concept-prototyper

github.com/sergekostenchukデザイン・UI3251 回インストール18 週間前に更新
リポジトリ

concept-prototyper について

使い捨てのプロトタイプとフィードバック資料を通じて、SEO・セマンティック構造と初期 UI コンセプトをつなぐスキルです。デザイン検討前のサイト内容やビジネスロジックの整理向けで、本番コードの作成には使いません。

主な機能

  1. 01サイトコンセプト文書の作成
  2. 02使い捨て HTML ワイヤーフレームの作成
  3. 03フィードバックの JSON 化
  4. 04未解決のコンセプト競合の記録
  5. 05明確な案をデザイン検討へ引き継ぎ

活用シーン

  1. 01サイトのコンテンツ階層と導線の整理
  2. 02フィードバック用の非本番ワイヤーフレーム作成
  3. 03関係者の意見とセマンティック制約の統合
  4. 04未解決のコンセプト競合のエスカレーション

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill concept-prototyper

インストール後、Claude Code で/concept-prototyperを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/
site-concept.template.md
references/
concept-prototype-contract.md

詳細

コンセプトプロトタイパー

このスキルは、SEO／セマンティック構造とUIデザインをつなぐコンセプトの橋渡しをします。プロトタイプはフィードバック用の成果物であり、本番コードではありません。

動作モード

  • concept：セマンティックコアとビジネスロジックを基に、docs/site-concept.mdを作成します。
  • wireframe：フィードバック用の使い捨てHTML／ワイヤーフレームプロトタイプを作成します。
  • feedback：ユーザーフィードバックを整理し、reports/business-concept-feedback.jsonにまとめます。
  • conflict：reports/concept-conflicts.mdを作成し、未解決の競合を評議会に引き継ぎます。

必須ワークフロー

  1. references/concept-prototype-contract.mdを読みます。
  2. セマンティックコア、プロジェクト概要、既知のビジネス情報、利用可能な既存コンテンツを読み込みます。
  3. コンテンツ階層を構築します。主要なユーザージャーニー、ページマップ、必須情報、信頼性を示す要素、CTAのロジックを含めます。
  4. プロトタイプを作成する場合は、各セクションにその根拠を示し、本番用ではないことが明確なワイヤーフレーム成果物を作成します。
  5. フィードバックを収集または整理し、セマンティック上の制約と統合します。
  6. 競合が残る場合は、デザインの検討を始める前に、senior-ui-ux-orchestratorの評議会モードに引き継ぎます。
  7. 競合が明確になったら、tech-stack-selectorに引き継いでから、デザインの検討に進みます。

絶対遵守事項

プロトタイプは破棄可能なものです。ユーザーが別途、再構築／リファクタリング計画を承認しない限り、本番実装のベースとして使用しないでください。

引き継ぎ形式

Concept path:
Prototype path:
Feedback path:
Conflicts path:
Decision: clear | council-required
Next skills:

検証

python3 $CODEX_HOME/skills/.system/skill-creator/scripts/quick_validate.py $CODEX_HOME/skills/concept-prototyper
python3 $CODEX_HOME/skills/senior-skill-architect/scripts/lint_production_skill.py $CODEX_HOME/skills/concept-prototyper

コメント

Markdown 対応