Epic Wireframes

The user input to you can be provided directly by the agent or as a command argument - you MUST consider it before proceeding with the prompt (if not empty).

User input:

$ARGUMENTS

Design wireframes that visualize the user interface for an epic's functionality.

Context Loading

Required:

1. Project identification (ask if not provided)
2. Epic identification (ask if not provided)
3. Load: design system, user journey, epic spec

Ask: "Which project and epic should I create wireframes for?"

Interactive Wireframing Process

Step 1: Load Context

Determine PROJECT_ID from epic path (e.g., specs/projects/001-myproject/epics/...).

Load required design context:

• specs/projects/[PROJECT_ID]/design-system.md → Design tokens, components, patterns

  • Extract: Color tokens, typography scale, spacing system, component library, grid specifications
  • If missing: WARN "No design system found. Run /project-design-system for consistent wireframes."

• specs/projects/[PROJECT_ID]/ux-strategy.md → UX principles, voice/tone

  • Extract: Design principles, voice attributes, accessibility standards, content guidelines
  • If missing: WARN "No UX strategy found. Run /project-ux for UX guidelines."

Load epic context:

• User journey map (for touchpoints) - [EPIC_DIR]/user-journey.md
• Epic specification (for requirements) - [EPIC_DIR]/epic.md

Step 2: Screen Discovery

The wireframe template needs specific screens. Based on the journey:

Screen identification:

• "I see [X] touchpoints in the journey. Do these each need separate screens?"
• "Are there any administrative or edge case screens needed?"
• "What about different states (empty, error, success)?"

For each screen, if unclear:

• "What's the main purpose of this screen?"
• "What must users accomplish here?"
• "Mobile, desktop, or both?"

Step 3: Layout Decisions

For screens needing definition:

• "Standard layout with header/nav or custom?"
• "What's the most important element on this screen?"
• "Any specific component preferences from the design system?"

Step 4: Create Wireframes

1. Load template: .speck/templates/epic/wireframes-template.md
2. Create file at: specs/projects/[PROJECT_ID]/epics/[EPIC_ID]/wireframes.md
3. Fill systematically:
   • Create screen inventory table
   • Generate ASCII wireframes using template format
   • Document all interactions
   • Include responsive versions
   • Note content requirements

Step 5: Validate and continue

Check every journey touchpoint and required state against the completed artifact. Then resume the canonical epic flow in root AGENTS.md.

The template contains complete wireframe structures and examples.

Tools Integration

If requested:

• Can export wireframe descriptions for design tools
• Can generate basic HTML/CSS prototypes
• Can create component mapping documentation