Generate Interface Mockups

Create production-quality HTML mockups for a user story with mandatory desktop/mobile parity.

Usage

/mockups "Story name"
/mockups 5                    # By MVP story number
/mockups                      # Interactive selection

Phase 1: Context Gathering

Read these files before generating anything:

1. Conventions: ProductSpecification/ui/ui-conventions.md (the single authority for all design rules)
2. Templates: ProductSpecification/ui/templates/ (browse what's available)
3. ProductSpecification/BriefProductDescription.md
4. ProductSpecification/stories.md (story number lookup)
5. Story spec: ProductSpecification/stories/NN-story-name/NN_StoryName.md
6. Landing page: Landing/index.html (brand reference)
7. If exists: ProductSpecification/stories/NN-story-name/interview.md

Items 5 and 7 resolve stories/ first, then stories/done/ (.claude/rules/workflow.md, "Resolving a story folder") -- a story that later work backports a mockup into has usually closed since. Where the generated files land is Phase 4's template, "Output Location".

Phase 2: Story Selection

Parse user input (by name, by number, or interactive).

Phase 3: Screen Plan (MANDATORY GATE)

You MUST complete this phase fully before writing any HTML file.

1. Extract all screen states from the story spec's "Screen States" section. MUST include every state (never skip, merge, or combine).
2. Map states to filenames for BOTH desktop AND mobile. Every desktop file MUST have a mobile counterpart.
3. Parity check — desktop files = N, mobile files = N. Fix if counts differ.

NEVER proceed to Phase 4 until the Screen Plan table is complete with equal counts.

Phase 4: Generate Mockups

Load .claude/templates/ui/mockup-generation-rules.md for all generation rules, output location, template usage, format, and completion check.

Phase 5: Screenshots

Run /screenshot for both desktop and mobile directories.

Phase 6: Summary

Report: Screen Plan table, total files, screenshot locations, design decisions, whether conventions were updated.

Pre-flight Checklist

• Every screen state from the spec has a mockup
• Desktop file count equals mobile file count
• All patterns match ui-conventions.md
• Sidebar matches sidebar.html template exactly
• Interface text is in Russian
• Screenshots generated for both desktop and mobile
• Existing mockups checked (ask user before overwriting)
• If new UI patterns introduced, ui-conventions.md updated

Templates

• .claude/templates/ui/mockup-generation-rules.md — generation rules, format, templates, completion check
• .claude/templates/ui/icon-reference.md — icon name lookup