vt-c-pd-3-prototype¶

Generate a deployable Angular prototype following VisiTrans Corporate Design, with mock data and responsive layouts. Uses Angular 21 + PrimeNG.

Plugin: core-standards
Category: Product Design Workflow
Command: /vt-c-pd-3-prototype

Product Design: Prototype Creation¶

Create production-quality prototypes that developers can reuse (95% code retention). Prototypes follow VisiTrans Corporate Design and serve as both stakeholder demos and development handoff.

Framework: Angular 21 + PrimeNG (Styled Mode) with VisiTrans design tokens.

Workflow Position¶

/vt-c-pd-0-start → /vt-c-pd-1-research → /vt-c-pd-pid → /vt-c-pd-2-prd → /vt-c-pd-3-prototype → /vt-c-pd-4-validate → /vt-c-pd-6-handoff → /vt-c-activate
                                                          │
                                                          └── You are here
                                                    Output: 04-prototyp/

Invocation¶

/vt-c-pd-3-prototype                      # Create new prototype project
/vt-c-pd-3-prototype --feature NAME       # Add feature to existing prototype
/vt-c-pd-3-prototype --deploy             # Deploy for sharing

Configuration¶

# Project paths
prototype_folder: "04-prototyp"
prd_path: "03-PRD/PRD.md"
design_system_path: "ONEDRIVE_ROOT/03-Corporate Design/03-cd-manual/VisiTrans_CD_*.pdf"

VisiTrans Corporate Design Tokens¶

From VisiTrans_CD_03.11.2025_EW01.pdf:

Colors¶

:root {
  /* Primary Colors */
  --vt-black: #1F1F1F;
  --vt-orange: #FC9E00; /* CMYK 0 38 100 0 */
  --vt-white: #FFFFFF;

  /* Secondary - Gray Scale */
  --vt-gray-90: #2D2D2D;
  --vt-gray-70: #5C5C5C;
  --vt-gray-50: #8A8A8A;
  --vt-gray-30: #B8B8B8;
  --vt-gray-10: #E6E6E6;

  /* Secondary - Orange Scale */
  --vt-orange-dark: #CC5200;
  --vt-orange-light: #FF944D;

  /* Action Color */
  --vt-magenta: #E6007E;
}

Typography¶

:root {
  --vt-font-family: 'Inter', sans-serif;

  /* Font Weights */
  --vt-font-thin: 100;
  --vt-font-extralight: 200;
  --vt-font-light: 300;
  --vt-font-regular: 400;
  --vt-font-medium: 500;
  --vt-font-semibold: 600;
  --vt-font-bold: 700;
  --vt-font-extrabold: 800;
  --vt-font-black: 900;
}

Brand Products¶

VisiTrans (parent company) - Orange
VisiMatch (matching platform)
VisiFair (trade fair management)
VisiArea (venue management)

Iteration Loop Integration¶

Step 0: Check Design State (Before Starting)¶

Before beginning prototype work, check the design state:

# Load design state
Read: .design-state.yaml

# Check for pending inbox items
if inbox.pending_items exists:
  Run: /vt-c-pd-inbox-scan to process first

If this is an iteration (returning to prototype):

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Iteration Context: pd-3-prototype
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Returning to prototype phase (Iteration {n})

Trigger: {trigger from state file}
Reason: {reason from state file}

Previous prototype version: {artifacts.prototype.version}
Issues to address:
• {items from iteration trigger}

Focus: Update affected components and screens
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Quality Gate: pd-3-prototype¶

Mark phase as complete when: - [ ] VisiTrans CD tokens correctly applied - [ ] All PRD features have screens - [ ] Responsive layouts work (mobile, tablet, desktop) - [ ] Prototype deployed and accessible

Update state file on completion:

quality_gates:
  pd-3-prototype:
    passed: true
    passed_at: "{timestamp}"
    criteria:
      cd_compliant: true
      all_features_represented: true
      deployed: true

artifacts:
  prototype:
    version: "{increment}"
    hash: "{compute directory hash}"
    status: "deployed"
    deploy_url: "{url}"

PRD Delta Tracking (Active Throughout Prototyping)¶

During prototyping, user feedback often reveals requirement changes that affect the PRD. Track these continuously:

At prototype start: Create 03-PRD/PRD-DELTA.md if it doesn't exist, with this header:

# PRD Delta Log

Changes to requirements discovered during prototyping and validation.
Review and incorporate into PRD before proceeding to /vt-c-pd-6-handoff.

---

After each user interaction: If the user provided any of the following, append an entry to PRD-DELTA.md:
Factual corrections ("actually there are 60, not 3")
Scope changes ("we also need X")
New requirements ("it should also support Y")
Assumption corrections ("that's not how it works, it's actually...")
Data/content changes ("the categories are different")
Technical constraints ("the API doesn't support that")

Entry format:

## [YYYY-MM-DD HH:MM] Category: Brief Title

- **PRD Section**: [affected section]
- **Was**: [original assumption or value]
- **Now**: [corrected/new information]
- **Impact**: [what this changes about the design]
- **Source**: User feedback during prototype iteration

Categories: Scope Change, New Requirement, Requirement Update, Assumption Correction, Data Change, Constraint Discovered

At prototype completion: Show summary of accumulated deltas and remind user to review before /vt-c-pd-6-handoff.

Execution Instructions¶

Step 0b: Framework¶

Framework: Angular 21 + PrimeNG

Step 1: Analyze PRD and Features¶

Read PRD to understand features to prototype
Identify key user flows from Section 3 (Lösungsvision)
List required screens from Feature table (Section 4)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Prototype Creation - Product Design Phase 3
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Project: [name]
PRD: 03-PRD/PRD.md
Output: 04-prototyp/

Features to Prototype:
─────────────────────────────────────────────────────────────────
1. [Feature 1] - [N screens] (from PRD Section 4)
2. [Feature 2] - [N screens]
3. [Feature 3] - [N screens]

Design System: VisiTrans CD
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Step 2: Initialize Prototype Project¶

Create project structure in 04-prototyp/:

04-prototyp/
├── angular.json
├── package.json
├── tsconfig.json
├── tsconfig.app.json
├── vitest.config.ts
├── public/
│   ├── fonts/
│   │   └── Inter/             # VisiTrans font
│   └── images/
│       └── logo.svg           # VisiTrans logo (source: BRAND_ASSETS_ROOT — see CLAUDE.md)
├── src/
│   ├── app/
│   │   ├── core/
│   │   │   ├── theme/
│   │   │   │   └── vt-preset.ts   # PrimeNG VisiTrans preset
│   │   │   ├── services/
│   │   │   │   └── mock-data.service.ts
│   │   │   └── interceptors/
│   │   ├── shared/
│   │   │   └── components/        # Shared UI components
│   │   ├── features/
│   │   │   └── [feature]/
│   │   │       ├── [feature].component.ts
│   │   │       ├── [feature].component.html
│   │   │       └── [feature].routes.ts
│   │   ├── app.component.ts
│   │   ├── app.config.ts         # providePrimeNG() setup
│   │   └── app.routes.ts
│   ├── styles.css                 # VisiTrans CD styles + PrimeNG
│   ├── main.ts
│   └── index.html
└── README.md

Step 3: Generate PrimeNG Preset with VisiTrans CD¶

Generate VisiTrans design system files from the canonical token source:

# PrimeNG preset (maps tokens to PrimeNG's three-tier model)
python3 TOOLKIT_ROOT/scripts/design_system/generate_primeng_preset.py --product visitrans --output src/app/core/theme/vt-preset.ts

# CSS variables (for non-PrimeNG contexts)
python3 TOOLKIT_ROOT/scripts/design_system/generate_css_variables.py --product visitrans --output src/styles/vt-variables.css

Create src/app/app.config.ts with providePrimeNG() using the template from /vt-c-bootstrap (Angular App - app.config.ts section).

Step 4: Create Base Components¶

Generate reusable Angular standalone components following VisiTrans CD, wrapping PrimeNG components:

VtButtonComponent — wraps p-button, inputs for variant and size
VtCardComponent — wraps p-card, input for elevation
VtInputComponent — wraps p-inputtext + p-floatlabel, inputs for label and error
VtNavigationComponent — uses p-menubar with routerLink/routerLinkActive

All components use Angular 21 conventions: - Standalone (no NgModule) - inject() for DI (no constructor injection) - Modern template syntax (@if, @for, @switch) - Signals for reactive state where needed

(See /vt-c-visitrans-design-system --components for full component templates)

Step 5: Generate Feature Screens¶

For each feature in PRD Section 4:

Create feature folder: src/app/features/[feature]/
Generate standalone route components (.component.ts + .component.html)
Create lazy-loaded route file ([feature].routes.ts)
Create mock data service in core/services/
Implement responsive layouts using PrimeFlex grid

See /vt-c-kw-prototype Steps 5–6 for feature screen and mock data service examples.

Step 6: Deploy Mode (--deploy)¶

When --deploy is specified:

Build production version: npm run build
Deploy to Vercel/Netlify/GitHub Pages
Return preview URL for stakeholder sharing

Step 7: Summary¶

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Prototype Created
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Location: 04-prototyp/
Framework: Angular 21 + PrimeNG (Styled Mode)
Styling: PrimeNG preset + VisiTrans design tokens

Components Created:
─────────────────────────────────────────────────────────────────
• Base UI: VtButton, VtCard, VtInput, VtNavigation (PrimeNG wrappers)
• Feature 1: [N screens]
• Feature 2: [N screens]

Design System Applied:
✓ VisiTrans colors via PrimeNG three-tier token preset
✓ Inter font family
✓ Consistent spacing and typography
✓ Responsive layouts (PrimeFlex grid)

Development Handoff:
─────────────────────────────────────────────────────────────────
This prototype is designed for 95% code reuse:
• Standalone components follow production patterns
• PrimeNG preset matches production theming
• Mock data services match API contracts

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
NEXT STEPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. Review prototype: npm run dev
2. Deploy for sharing: /vt-c-pd-3-prototype --deploy
3. Validate with users: /vt-c-pd-4-validate
4. Prepare handoff: /vt-c-pd-6-handoff
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Update PRD Feature Table¶

After prototype creation, update PRD Section 4 Feature table: - Add Prototyp column links to specific prototype screens - Links follow pattern: 04-prototyp/src/app/features/[feature]/[feature].component.ts

Integration with Product Design Workflow¶

/vt-c-pd-2-prd        ← PRD defines what to prototype
     │
     ▼
/vt-c-pd-3-prototype  ← YOU ARE HERE - Create prototype
     │
     ▼
/vt-c-pd-4-validate   ← Test prototype with users

Integration with Design Agents¶

The prototype can be reviewed using design agents:

compound-engineering:design:design-implementation-reviewer - Review implementation quality
compound-engineering:design:design-iterator - Iterate on design refinements
visitrans-design-system - Validate CD compliance

Testing Configuration (Angular 21)¶

Angular 21 uses Vitest as its default test runner. The vitest.config.ts in the project structure must be configured for zoneless testing:

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    include: ['src/**/*.spec.ts'],
    globals: true,
    environment: 'jsdom',
    setupFiles: ['src/test-setup.ts'],
  },
});

// src/test-setup.ts
import '@angular/compiler';
import { TestBed } from '@angular/core/testing';
import { provideZonelessChangeDetection } from '@angular/core';

TestBed.configureTestingModule({
  providers: [provideZonelessChangeDetection()],
});

package.json scripts must use vitest, not ng test:

{
  "scripts": {
    "test": "vitest",
    "test:watch": "vitest --watch",
    "test:coverage": "vitest --coverage"
  }
}

Include at least one sample component test demonstrating Signals and zoneless patterns.

Quality Checklist¶

[ ] VisiTrans colors applied correctly
[ ] Inter font loaded and used
[ ] Responsive at mobile/tablet/desktop
[ ] Mock data realistic
[ ] Navigation functional
[ ] All screens from PRD accessible
[ ] Components reusable for development
[ ] Vitest configured and sample test passing