mcpField
C
concept-prototyper

concept-prototyper

github.com/sergekostenchukDesign & UI3251 installsUpdated 18w ago
Repository

About concept-prototyper

A skill that connects SEO and semantic structure with early UI concepts through disposable prototypes and feedback artifacts. It is for teams shaping site content and business logic before design exploration, not for producing production code.

Key features

  1. 01Create a site concept document
  2. 02Build throwaway HTML wireframes
  3. 03Structure feedback as JSON
  4. 04Record unresolved concept conflicts
  5. 05Hand off clear concepts to design exploration

Use cases

  1. 01Map a site's content hierarchy and journeys
  2. 02Create a non-production wireframe for feedback
  3. 03Merge stakeholder feedback with semantic constraints
  4. 04Escalate unresolved concept conflicts

Install

Copy the command and run it in a terminal.

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

After installing, type/concept-prototyperin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project README

Concept Prototyper

This skill creates the concept bridge between SEO/semantic structure and UI design. Its prototype is a feedback artifact, not production code.

Operating Modes

  • concept: create docs/site-concept.md from semantic core and business logic.
  • wireframe: create a throwaway HTML/wireframe prototype for feedback.
  • feedback: structure user feedback into reports/business-concept-feedback.json.
  • conflict: produce reports/concept-conflicts.md and route unresolved conflicts to council.

Required Workflow

  1. Read references/concept-prototype-contract.md.
  2. Load semantic core, project brief, known business facts, and existing content if available.
  3. Build a content hierarchy: primary journey, page map, required facts, trust signals, CTA logic.
  4. If prototyping, create a clearly non-production wireframe artifact with sections marked by source reason.
  5. Collect or structure feedback and merge it with semantic constraints.
  6. If conflicts remain, route to senior-ui-ux-orchestrator council mode before design exploration.
  7. If conflicts are clear, hand off to tech-stack-selector, then design exploration.

Non-Negotiable

The prototype is disposable. Do not use it as the production implementation base unless the user separately approves a rebuild/refactor plan.

Handoff Shape

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

Validation

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

Comments

Markdown supported