vt-c-kw-prototype¶
Generate a deployable Angular prototype following VisiTrans Corporate Design, with mock data and responsive layouts. Uses Angular 21 + PrimeNG.
Plugin: core-standards
Category: Knowledge Work Workflow
Command: /vt-c-kw-prototype
Knowledge Work: 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-kw-prd → /vt-c-kw-prototype → /vt-c-kw-specs → /vt-c-kw-user-test
│
▼
04-prototyp/
(Git repo with deployment)
Invocation¶
/vt-c-kw-prototype # Create new prototype project
/vt-c-kw-prototype --feature NAME # Add feature to existing prototype
/vt-c-kw-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)
Execution Instructions¶
Step 0: Framework¶
Framework: Angular 21 + PrimeNG
Step 1: Analyze PRD and Features¶
- Read PRD to understand features to prototype
- Identify key user flows
- List required screens/components
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Prototype Creation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Project: [name]
PRD: 03-PRD/PRD.md
Output: 04-prototyp/
Features to Prototype:
─────────────────────────────────────────────────────────────────
1. [Feature 1] - [N screens]
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
│ │ ├── 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-menubarwithrouterLink/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:
- 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
// Example: src/app/features/auth/login.component.ts
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Button } from 'primeng/button';
import { Card } from 'primeng/card';
import { InputText } from 'primeng/inputtext';
import { FloatLabel } from 'primeng/floatlabel';
@Component({
selector: 'app-login',
standalone: true,
imports: [FormsModule, Button, Card, InputText, FloatLabel],
template: `
<div class="flex align-items-center justify-content-center min-h-screen surface-ground">
<p-card styleClass="w-full max-w-30rem">
<div class="text-center mb-5">
<img src="/images/logo.svg" alt="VisiTrans" class="h-3rem" />
<h1 class="text-2xl font-bold mt-3">Welcome Back</h1>
</div>
<form class="flex flex-column gap-3">
<p-floatlabel>
<input pInputText id="email" [(ngModel)]="email" name="email" class="w-full" />
<label for="email">Email</label>
</p-floatlabel>
<p-floatlabel>
<input pInputText id="password" type="password" [(ngModel)]="password" name="password" class="w-full" />
<label for="password">Password</label>
</p-floatlabel>
<p-button label="Sign In" styleClass="w-full" />
</form>
</p-card>
</div>
`,
})
export class LoginComponent {
email = signal('');
password = signal('');
}
Step 6: Create Mock Data Service¶
Generate realistic mock data as an Angular injectable service:
// src/app/core/services/mock-data.service.ts
import { Injectable, signal } from '@angular/core';
export interface User {
id: string;
name: string;
email: string;
role: 'admin' | 'user';
}
export interface Project {
id: string;
name: string;
status: 'active' | 'planning' | 'completed';
date: string;
}
@Injectable({ providedIn: 'root' })
export class MockDataService {
readonly users = signal<User[]>([
{ id: '1', name: 'Max Mustermann', email: 'max@example.com', role: 'admin' },
{ id: '2', name: 'Erika Musterfrau', email: 'erika@example.com', role: 'user' },
]);
readonly projects = signal<Project[]>([
{ id: '1', name: 'VisiFair SHOW 2026', status: 'active', date: '2026-03-15' },
{ id: '2', name: 'VisiMatch Integration', status: 'planning', date: '2026-06-01' },
]);
}
Step 7: Deploy Mode (--deploy)¶
When --deploy is specified:
- Build production version:
npm run build - Options for deployment:
- Vercel:
vercel --prod - Netlify:
netlify deploy --prod - GitHub Pages: Push to
gh-pagesbranch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Prototype Deployment
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Building prototype...
✓ Build complete
Deploying to: [platform]
✓ Deployed successfully
Preview URL: https://[project]-prototype.vercel.app
Share this URL with:
• Stakeholders for review
• Users for testing
• Development team for reference
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Step 8: Feature Mode (--feature)¶
When --feature NAME is specified:
1. Add new feature to existing prototype
2. Create feature folder
3. Generate screens for that feature only
4. Update navigation
Step 9: 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
To use in development:
1. Copy component structure to production project
2. Replace MockDataService with real API services
3. Add business logic and error handling
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
NEXT STEPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Review prototype: npm run dev
2. Deploy for sharing: /vt-c-kw-prototype --deploy
3. Run usability tests: /vt-c-kw-user-test usability
4. Generate specs: /vt-c-kw-specs
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Integration with Design Agents¶
The prototype can be reviewed using design agents:
compound-engineering:design:design-implementation-reviewer- Review implementation qualitycompound-engineering:design:design-iterator- Iterate on design refinementsvisitrans-design-system- Validate CD compliance
Quality Checklist¶
- [ ] VisiTrans colors applied correctly
- [ ] Inter font loaded and used
- [ ] Responsive at mobile/tablet/desktop
- [ ] Mock data realistic
- [ ] Navigation functional
- [ ] All screens accessible
- [ ] Components reusable