# Stage-P: Prototype Output (Prototype Mode Only)

Executed only when `mode=prototype`. After project-init completion, outputs visual direction and constraint review results without generating page code.

```
Action: Prototype Output
Trigger Condition: mode=prototype
Input:
  visual_direction: output/ui-project-init/project-init.json -> visual_direction
  tokens: output/ui-project-init/project-init.json -> tokens
  component_library: output/ui-project-init/project-init.json -> component_library
  constraint_review: output/ui-frontend/constraint-review/constraint_review.json (optional)
  design_explorations: output/ui-frontend/design-exploration/design_explorations.json (optional)
Process:
  1. Summarize visual direction, design tokens, and component library selection from project-init output
  2. If constraint review results exist, include in prototype report
  3. If design exploration results exist, include in prototype report
  4. Execute prototype review (5-dimension scoring), write scoring results to prototype report
  5. Generate prototype report (including visual direction summary, key page layout descriptions, component selection summary, review scorecard)
  6. Do not generate page code, do not invoke ext Skill, do not generate design_brief
Output:
  output/ui-frontend/prototype/prototype-report.md -- Prototype report
  output/ui-frontend/prototype/prototype-review.json -- Prototype review scores
  output/ui-project-init/ -- Design system output (already generated by stage-1)
Validation: prototype-report.md generated + visual_direction 10-dimension definition complete + prototype-review.json generated
Mode: AI
```

**Prototype Mode Trade-offs**:
- [OK] Gain: Rapid validation of design direction, low-cost multi-scheme comparison, interaction logic alignment
- [X] Forgo: Page code, ext enhancement, quality audit, API integration, production readiness

**Prototype Mode Output**:
- Prototype report (markdown): Visual direction summary + Key page layout descriptions + Component selection summary + Review scorecard
- Prototype review scores (JSON): 5-dimension scores + Composite score + Risk flags
- Design system output (project-init.json): Visual direction + Design tokens + Component library
- No page code, no design_brief, no quality_debt

**Connection with Full Mode**:
- After prototype completion, user confirms visual direction and component selection
- When switching to full mode, execution starts from stage-2 (skip stage-1, reuse existing project-init output)
- Must preserve project_dir during project information collection to ensure full mode can locate existing output
- Low-scoring dimensions (<=2) in prototype review should be injected as priority focus areas for stage-2 in full mode

## Prototype Review Criteria

Although prototype mode does not generate page code, it must perform a structured review of visual direction and component selection to ensure the design direction passes basic quality checks before entering full mode.

**5-Dimension Scoring System** (each dimension scored 1-5):

| Dimension | Evaluation Content | Score 1 | Score 3 | Score 5 | Review Basis |
|-----------|-------------------|---------|---------|---------|-------------|
| Brand Consistency | Whether visual direction aligns with brand guidelines | Severely conflicts with brand tone | Basically aligns with brand tone,局部 optimizable | Fully embodies brand DNA, unified visual language | Whether mood_keywords + aesthetic_direction match brand positioning |
| Color Harmony | Whether color scale combinations are harmonious | Obvious color conflicts, no hierarchy | Basically harmonious, hierarchy could be stronger | Rich and harmonious color scales, clear hierarchy | Whether color_strategy + tokens color scale gradient is reasonable |
| Typographic Hierarchy | Whether font size hierarchy is clear | Hierarchy blurred, cannot distinguish primary/secondary | Basically clear, contrast could be stronger | Clear hierarchy, strong contrast, good rhythm | Whether typography_strategy + type_scale are clearly defined |
| Component Fitness | Whether component library selection fits business scenarios | Component library severely mismatched with business scenarios | Basically fit, some components need replacement | Component library fully fit, covers core scenarios | component_library selection + constraint_review evaluation |
| Differentiation | Whether visual direction is distinctive | Completely homogeneous, no distinctiveness | Some differentiation, but not prominent | Distinctive differentiation, strong recognizability | tension_level + visual_bans + reference_style comprehensive evaluation |

**Composite Score Calculation**:

`prototype_score = (Brand Consistency + Color Harmony + Typographic Hierarchy + Component Fitness + Differentiation) / 5`

**Score Thresholds and Handling**:

| Score Range | Grade | Handling |
|------------|-------|---------|
| 4.0-5.0 | Excellent | Passes gate, can directly enter full mode |
| 3.0-3.9 | Pass | Passes gate, low-scoring dimensions need priority attention in full mode stage-2 |
| 2.0-2.9 | Needs Improvement | [GATE] Requires human confirmation on whether to adjust visual direction and re-review |
| 1.0-1.9 | Fail | [GATE] Must roll back to stage-1 to redefine visual direction |

**Low-Scoring Dimension Flagging Rules**:

| Condition | Flag | Follow-up Handling |
|-----------|------|-------------------|
| Single dimension <= 2 | Flag as "needs priority enhancement" | Inject into full mode stage-2 ext call input |
| 2 or more dimensions <= 2 | Flag as "direction risk" | [GATE] Human confirmation on whether to adjust visual direction |
| Brand Consistency <= 2 | Flag as "brand deviation" | Must roll back to stage-1 to realign brand DNA |

**Low-Scoring Dimension Association with Full Mode Stage-2**:

| Low-Scoring Dimension | Full Mode Stage-2 Priority ext Call | Fix Direction |
|----------------------|-------------------------------------|--------------|
| Brand Consistency <= 2 | ext-frontend-design | Realign brand tone and visual language |
| Color Harmony <= 2 | ext-impeccable colorize | Optimize color combinations and hierarchy |
| Typographic Hierarchy <= 2 | ext-impeccable typeset | Improve font size hierarchy and rhythm |
| Component Fitness <= 2 | ext-ui-ux-pro-max | Re-evaluate component selection |
| Differentiation <= 2 | ext-frontend-design + ext-impeccable bolder | Enhance visual differentiation |

## Prototype Report Template

prototype-report.md must follow the standard structure below to ensure information completeness and downstream stage consumption.

```markdown
# Prototype Report: {project_name}

## 1. Project Overview

- **Project Name**: {project_name}
- **Generated At**: {generated_at}
- **Mode**: prototype
- **Framework**: {framework}
- **Component Library**: {component_library.name}

## 2. Visual Direction Summary

### 2.1 Core Style
- **Aesthetic Direction**: {aesthetic_direction}
- **Visual Policy**: {visual_policy}
- **Tension Level**: {tension_level}

### 2.2 Color System
- **Color Strategy**: {color_strategy}
- **Theme Decision**: {theme_decision}
- **Brand Color Usage**: {brand_color_usage}

### 2.3 Typography System
- **Typography Strategy**: {typography_strategy}
- **Type Scale**: {type_scale}

### 2.4 Space and Rhythm
- **Spatial Strategy**: {spatial_strategy}
- **Spacing Rhythm**: {spacing_rhythm}
- **Grid Density**: {grid_density}

### 2.5 Visual Anchors
- **Border Radius Level**: {border_radius_level}
- **Shadow Style**: {shadow_style}
- **Motion Style**: {motion_style}
- **Image Treatment**: {image_treatment}

### 2.6 Mood and Narrative
- **Mood Keywords**: {mood_keywords}
- **Reference Style**: {reference_style}
- **Visual Narrative**: {visual_narrative}

### 2.7 Constraints and Taboos
- **Visual Bans**: {visual_bans}
- **Differentiation Direction**: {differentiation_direction}

## 3. Key Page Layout Descriptions

### Page 1: {page_name} ({route})
- **Layout Description**: {layout_description}
- **Visual Focus**: {visual_focus}
- **Key Components**: {key_components}

### Page 2: {page_name} ({route})
- **Layout Description**: {layout_description}
- **Visual Focus**: {visual_focus}
- **Key Components**: {key_components}

### Page 3: {page_name} ({route})
- **Layout Description**: {layout_description}
- **Visual Focus**: {visual_focus}
- **Key Components**: {key_components}

> Must include layout descriptions for at least 3 core pages.

## 4. Component Selection Summary and Fitness Assessment

| Component | Type | Selection Rationale | Alternatives | Fitness Assessment |
|-----------|------|-------------------|-------------|-------------------|
| {component} | {type} | {rationale} | {alternatives} | High/Medium/Low |

## 5. Review Scorecard

| Dimension | Score (1-5) | Review Basis | Risk Flag |
|-----------|------------|-------------|-----------|
| Brand Consistency | {score} | {rationale} | {risk_flag} |
| Color Harmony | {score} | {rationale} | {risk_flag} |
| Typographic Hierarchy | {score} | {rationale} | {risk_flag} |
| Component Fitness | {score} | {rationale} | {risk_flag} |
| Differentiation | {score} | {rationale} | {risk_flag} |
| **Composite Score** | **{prototype_score}** | | |

## 6. Constraint Review Highlights (if applicable)

| Dimension | Assessment | Finding |
|-----------|-----------|---------|
| {dimension} | {assessment} | {finding} |

> Include this section only when constraint_review.json exists.

## 7. Risks and Recommendations

### Risk Items
- {risk_item}

### Recommendations
- {recommendation}

### Next Steps
- After confirming visual direction, switch to full mode starting from stage-2
- Priority focus dimensions: {low_score_dimensions}
```

## Deliverables Checklist

Prototype mode must deliver the following files, all required:

| # | Deliverable | Path | Format | Required | Description |
|---|------------|------|--------|----------|-------------|
| 1 | Prototype report | output/ui-frontend/prototype/prototype-report.md | Markdown | Yes | Visual direction summary + page layouts + component selection + review scores |
| 2 | Prototype review scores | output/ui-frontend/prototype/prototype-review.json | JSON | Yes | 5-dimension scores + composite score + risk flags |
| 3 | Design system output | output/ui-project-init/project-init.json | JSON | Yes | visual_direction + tokens + component_library (generated by stage-1) |
| 4 | Project scaffold | {project_dir}/ | Directory | Yes | Runnable project skeleton (generated by stage-1) |
| 5 | Token files | {project_dir}/src/styles/tokens.css + tokens.json | CSS/JSON | Yes | Design tokens (generated by stage-1) |
| 6 | Context files | {project_dir}/PRODUCT.md + DESIGN.md | Markdown | Yes | Product definition + design decisions (generated by stage-1) |

**Deliverable Verification Rules**:

| Verification Item | Condition | Failure Handling |
|------------------|-----------|-----------------|
| prototype-report.md exists | File non-empty and contains all 7 chapters | Regenerate report |
| prototype-review.json exists | All 5 dimensions have score values | Re-execute review |
| visual_direction 10 dimensions complete | Each field non-empty and not placeholder (TBD) | Roll back to stage-1 to complete |
| Key pages >= 3 | key_pages array length >= 3 | Supplement page layout descriptions |
| Component selection non-empty | component_selection_summary array length >= 1 | Supplement component selection |

## Degradation Strategy

When prototype mode's optional inputs are missing, apply the following degradation strategies to ensure the prototype report can still be generated:

### Constraint Review Results Missing

| Condition | Degradation Method | Impact |
|-----------|-------------------|--------|
| constraint_review.json does not exist | Prototype report omits "Constraint Review Highlights" section | No impact on review scores, Component Fitness dimension evaluated based on visual_direction only |
| constraint_review.json exists but findings empty | Include "Constraint Review Highlights" section, mark "No key findings" | No impact |

### Design Exploration Results Missing

| Condition | Degradation Method | Impact |
|-----------|-------------------|--------|
| design_explorations.json does not exist | Differentiation dimension evaluated based on tension_level + visual_bans only | Score may be lower, requires human confirmation |
| design_explorations.json exists but no selected scheme | Evaluate using default visual_direction | Differentiation dimension marked "unverified" |

### visual_direction Dimensions Incomplete

| Condition | Degradation Method | Impact |
|-----------|-------------------|--------|
| Core dimensions missing (aesthetic_direction/color_strategy/typography_strategy) | [GATE] Must roll back to stage-1 to complete | Prototype report cannot be generated |
| Anchor dimensions missing (border_radius_level/shadow_style etc.) | Fill with framework/component library defaults, mark "default value" | Corresponding dimension in review marked "degraded evaluation" |
| mood_keywords/visual_narrative missing | Corresponding sections in prototype report marked "undefined" | Brand Consistency and Differentiation dimension scores may be lower |

### Degraded Score Calculation

When there are dimensions with degraded evaluation, the composite score calculation method is adjusted:

| Degraded Dimension Count | Calculation Method | Description |
|-------------------------|-------------------|-------------|
| 0 | Standard average | All dimensions scored normally |
| 1-2 | Standard average + degradation flag | Score calculated normally, report flags degraded dimensions |
| >= 3 | Degraded score = standard average x 0.8 | Score discounted for multi-dimension degradation, [GATE] requires human confirmation |

Degradation information must be recorded in the `degradation` field of prototype-review.json:

```json
{
  "degraded_dimensions": ["Differentiation"],
  "degradation_reason": "design_explorations.json does not exist",
  "score_adjusted": true,
  "original_score": 3.4,
  "adjusted_score": 2.7
}
```

## Gate Rules

Prototype output must pass the following gates before being marked as complete:

### Automated Gates (AI Verification)

| # | Gate Condition | Verification Method | Failure Handling |
|---|---------------|-------------------|-----------------|
| G1 | prototype-report.md generated and contains all 7 chapters | File existence + chapter completeness check | Regenerate report |
| G2 | prototype-review.json generated and all 5 dimensions have scores | JSON parsing + field completeness check | Re-execute review |
| G3 | visual_direction 10-dimension definition complete | Each field non-empty and not placeholder | Roll back to stage-1 to complete |
| G4 | Key page layout descriptions >= 3 | key_pages array length check | Supplement page layout descriptions |
| G5 | Composite score >= 2.0 | prototype_score threshold check | Score < 2.0 must roll back to stage-1 |

### Human Gates (Human Confirmation)

| # | Gate Condition | Trigger Condition | Confirmation Content |
|---|---------------|------------------|---------------------|
| H1 | Visual direction confirmation | Always executed | Human confirms visual direction and component selection meet expectations |
| H2 | Low-scoring dimension confirmation | Any dimension <= 2 | Human confirms whether to adjust visual direction or accept risk |
| H3 | Direction risk confirmation | 2 or more dimensions <= 2 | Human decides to adjust visual direction or continue to full mode |
| H4 | Degradation confirmation | Degraded dimensions >= 3 | Human confirms whether degraded score is acceptable |
| H5 | Brand deviation confirmation | Brand Consistency <= 2 | Human decides to roll back to stage-1 or accept deviation |

### Gate Pass Criteria

| Condition | Result |
|-----------|--------|
| G1-G5 all pass + H1 human confirmation + no H2-H5 triggered | **Pass**: Prototype complete, can enter full mode |
| G1-G5 all pass + H1 human confirmation + H2/H3/H4 triggered and human confirms acceptance | **Conditional Pass**: Prototype complete, low-scoring dimensions injected into full mode for priority handling |
| G5 not passed or H5 triggered and rolled back | **Fail**: Roll back to stage-1 to redefine visual direction |
| Any of G1-G4 not passed | **Blocked**: Complete missing deliverables and re-verify |
