vt-d-kw-prototype

Generate a deployable prototype following VisiTrans Corporate Design. Stack-aware — Angular 21 + PrimeNG for B2B SaaS product UIs (VisiMatch, VisiFair, VisiArea, VisiTrans Data, etc.) and Astro 4 + Tailwind + Shadcn/UI for marketing websites (visitrans.de, visimatch.com, visifair.com). Includes mock data, responsive layouts, dark/light themes, and 95% code-reuse target for handoff.

Plugin: vt-product-dev
Category: Knowledge Work Workflow
Command: /vt-d-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.

Stacks (pick one per project — see Step 0: Stack Selection):

Stack	Use For	Key Tech
Angular (default for apps)	B2B SaaS product UIs that need state, forms, dashboards, app shell	Angular 21 + PrimeNG (Styled Mode) + PrimeFlex
Astro (default for sites)	Marketing/corporate websites (visitrans.de, visimatch.com, visifair.com)	Astro 4 + Tailwind + Shadcn/UI + React Islands

Both stacks consume the same VisiTrans design tokens via the vt-b-visitrans-design-system skill (~/.claude/skills/vt-b-visitrans-design-system/colors_and_type.css + assets/logos/).

Workflow Position

/vt-d-kw-prd → /vt-d-kw-prototype → /vt-d-specs-from-prd → /vt-d-kw-user-test
              │
              ▼
         04-prototyp/
         (Git repo with deployment)

Invocation

/vt-d-kw-prototype                            # Create new prototype (asks for stack)
/vt-d-kw-prototype --stack angular            # Force Angular 21 + PrimeNG
/vt-d-kw-prototype --stack astro              # Force Astro + Tailwind + Shadcn
/vt-d-kw-prototype --feature NAME             # Add feature to existing prototype
/vt-d-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: #101216;
  --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: Stack Selection

Determine the stack before scaffolding. Resolution order:

1. --stack flag — if angular or astro was passed, use it.
2. PRD signal — dashboard / app shell / role-based access / forms-heavy / mobile target → recommend angular. Marketing / SEO / landing page / blog / content collections / public website → recommend astro.
3. Project context — V024-Websites-dev/ → astro. Inside apps/ of a B2B SaaS repo (VisiMatch, VisiFair, VisiArea, VisiTrans Data, VisiTrans Guide) → angular.
4. Ask — if still ambiguous, AskUserQuestion with the recommended option first ("(Recommended)").

After Step 0, jump to Path A (Angular, Steps 1–8 below) or Path B (Astro, in its own section after Path A's summary).

---

Path A — Angular 21 + PrimeNG (B2B SaaS apps)

Step 1: Analyze PRD and Features

1. Read PRD to understand features to prototype
2. Identify key user flows
3. 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: Install PrimeNG Preset with VisiTrans CD

src/app/core/theme/vt-preset.ts — generate it, do not copy it:

python3 TOOLKIT_ROOT/scripts/design_system/generate_primeng_preset.py \
  --product visitrans --output src/app/core/theme/vt-preset.ts

The generator is the canonical — and only — source for the preset: it reads the token file and emits both the light and the dark colorScheme (each with its own surface ramp and formField block), plus the darkModeSelector wiring and its verification steps in the file header. Run it with no --output to read the preset without writing a file. /vt-d-bootstrap invokes this same generator; it deliberately carries no inline copy to hand-transcribe — a second copy drifts from the tokens the moment either changes.

src/styles/vt-variables.css — copy ~/.claude/skills/vt-b-visitrans-design-system/colors_and_type.css into src/styles/ (or import it directly if using a monorepo asset pipeline). This file ships the complete CSS custom property set for both themes. Dark is :root; light is the :root[data-theme="light"] opt-in. A logged-in product UI is the one surface that offers both — implement the switcher from vt-b-visitrans-design-system § "Light↔dark switcher (logged-in product UI)"; do not re-author it here — a second copy drifts silently.

src/app/app.config.ts — use the template from /vt-d-bootstrap section "Angular App - app.config.ts" which wires providePrimeNG() with the preset.

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-b-visitrans-design-system --components for full component templates)

Step 5: Generate Feature Screens

For each feature in PRD:

1. Create feature folder: src/app/features/[feature]/
2. Generate standalone route components (.component.ts + .component.html)
3. Create lazy-loaded route file ([feature].routes.ts)
4. Create mock data service in core/services/
5. 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:

1. Build production version: npm run build
2. Options for deployment:
3. Vercel: vercel --prod
4. Netlify: netlify deploy --prod
5. GitHub Pages: Push to gh-pages branch

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
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-d-kw-prototype --deploy
3. Run usability tests: /vt-d-kw-user-test usability
4. Generate specs: /vt-d-specs-from-prd
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

---

Path B — Astro 4 + Tailwind + Shadcn/UI (marketing websites)

Use this path for public marketing/corporate sites: visitrans.de, visimatch.com, visifair.com, future product landings. Reference codebase: V024-Websites-dev (Astro monorepo).

Step 1: Analyze PRD and Pages

1. Read PRD to identify pages and content collections
2. Identify SEO entry points (hero, pricing, careers, blog, legal)
3. Decide which surfaces need React Islands (interactive widgets) vs static Astro components
4. Confirm brand and surface: visitrans (German), visimatch (English), visifair (accent, German). Theme comes from the surface, never the brand — a marketing website, a presentation or a logged-out product screen is dark for every brand; only logged-in product UI offers switchable light.

Step 2: Initialize Prototype Project

For a standalone prototype, scaffold a single Astro app at 04-prototyp/. Inside the V024 monorepo, scaffold under apps/0X-{brand}/:

04-prototyp/                     (or apps/0X-{brand}/ in V024 monorepo)
├── astro.config.mjs
├── tailwind.config.ts
├── package.json
├── tsconfig.json
├── public/
│   ├── fonts/Inter/             (self-hosted .woff2)
│   └── logos/                   (copied from vt-b-visitrans-design-system/assets/logos/)
├── src/
│   ├── styles/
│   │   ├── tokens.css           (re-export from vt-b-visitrans-design-system/colors_and_type.css)
│   │   └── globals.css          (Tailwind layers + brand resets)
│   ├── components/
│   │   ├── ui/                  (Shadcn-derived primitives — Button, Card, Input)
│   │   ├── brand/               (VtLogo, VtLockup, VtEyebrow)
│   │   ├── sections/            (Hero, FeatureGrid, CustomerLogoBar, FAQ)
│   │   └── islands/             (React Islands — interactive only)
│   ├── content/                 (Astro Content Collections)
│   ├── layouts/
│   │   ├── BaseLayout.astro     (loads tokens; dark by default)
│   │   └── MarketingLayout.astro
│   ├── pages/
│   └── env.d.ts
└── README.md

Step 3: Apply VisiTrans Tokens

Wire in the design system from the toolkit skill (do not duplicate values):

cp ~/.claude/skills/vt-b-visitrans-design-system/colors_and_type.css src/styles/tokens.css
cp -r ~/.claude/skills/vt-b-visitrans-design-system/assets/logos/* public/logos/

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{astro,tsx,ts,mdx}'],
  theme: {
    extend: {
      colors: {
        'vt-orange':   'var(--vt-orange)',     // #FF9E00
        'vt-magenta':  'var(--vt-magenta)',    // #FF00FF (pure)
        'vt-yellow':   'var(--vt-yellow)',     // status only
        'vt-green':    'var(--vt-green)',      // status only
        'vt-cyan':     'var(--vt-cyan)',       // status only
      },
      fontFamily: { sans: ['Inter', 'sans-serif'] },
      letterSpacing: { tight: '-0.025em', eyebrow: '0.18em' },
    },
  },
} satisfies Config

BaseLayout.astro needs no theme attribute for a website — dark is the CSS default in colors_and_type.css for every brand, including VisiTrans corporate and VisiFair. Set data-theme="light" only on a logged-in product surface, and pair it with the switcher rather than hardcoding light (see vt-b-visitrans-design-system § Light↔dark switcher). Dark adds the 64×64 grid + radial orange spotlight signatures from the brand bible.

Step 4: Create Base Components

Build the minimal Shadcn-derived primitive set, themed with VisiTrans tokens. Shared by Astro pages and React Islands:

• Button — primary (orange + glow on dark, magenta on light), secondary (outline), ghost. ~150ms color fades only; no transforms.
• Card — flat surface, border on light / bg-white/[0.02] on dark.
• Input — Inter Medium 16px; magenta focus on light, orange on dark.
• Eyebrow — uppercase, 12px, weight 600, tracking-eyebrow, orange.
• VtLockup — picks the right assets/logos/ PNG by brand × theme. Never typeset wordmarks by hand.

Icons: Lucide via CDN, 2px stroke, currentColor.

Step 5: Generate Section Components & Pages

For each PRD section/page:

1. Create section component(s) in src/components/sections/ (Astro for static, React Island for interactive)
2. Create page in src/pages/ composing sections under a layout
3. For repeating data (features, customers), define an Astro Content Collection in src/content/ and use getCollection()
4. Use text-wrap: balance on display headlines, pretty on body. Self-host Inter .woff2.

Customer logo bar: COSCO / ZIM / ONE for VisiMatch; Landesmesse Stuttgart / Messe Berlin / NürnbergMesse for VisiFair. Tagline lockup: "Software für komplexe Operationen — Made in Germany".

Step 6: Mock Content Collection

// src/content/config.ts
import { defineCollection, z } from 'astro:content'

export const collections = {
  customers: defineCollection({
    type: 'data',
    schema: z.object({
      name: z.string(),
      brand: z.enum(['visimatch', 'visifair']),
      logoLight: z.string(),
      logoDark: z.string(),
      orderInBar: z.number(),
    }),
  }),
}

Add entries under src/content/customers/cosco.json, etc., with realistic data.

Step 7: Deploy Mode (--deploy)

npm run build
# Vercel:    vercel --prod
# Netlify:   netlify deploy --prod
# Cloudflare: wrangler pages deploy dist

Step 8: Summary (Astro)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Prototype Created — Astro
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stack:    Astro 4 + Tailwind + Shadcn/UI + React Islands
Brand:    {visitrans|visimatch|visifair}
Theme:    {light|dark}
Tokens:   src/styles/tokens.css (sourced from vt-b-visitrans-design-system)

Pages Created:
─────────────────────────────────────────────────────────────────
• Static:      [N pages]   (Astro components, SEO-friendly)
• Islands:     [N widgets] (React, interactive only)
• Collections: [N entries] (features, customers, etc.)

Brand Compliance:
✓ Locked palette only (no invented colors)
✓ Inter self-hosted (no Google Fonts in production)
✓ Lockups from assets/logos/ (no hand-typeset wordmarks)
✓ Cross-brand-link prohibition respected

Handoff to V024-Websites-dev:
─────────────────────────────────────────────────────────────────
• Components map 1:1 to packages/01-ui/
• Pages map to apps/0X-{brand}/src/pages/
• Content collections re-importable directly
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Testing Configuration (Astro)

• Vitest for component tests (src/components/**/*.spec.ts)
• Playwright for end-to-end tests (tests/e2e/*.spec.ts) — required when React Islands are present
• Lighthouse CI for performance ≥ 95, SEO ≥ 100

{
  "scripts": {
    "test": "vitest",
    "test:e2e": "playwright test",
    "lhci": "lhci autorun"
  }
}

---

Quality Checklist

Universal (both stacks)

• [ ] VisiTrans tokens applied via vt-b-visitrans-design-system/colors_and_type.css (no hardcoded hex)
• [ ] Inter font loaded — self-hosted .woff2 in production
• [ ] Logo lockups pulled from assets/logos/ (never hand-typeset wordmarks)
• [ ] No invented colors; only locked Black/Orange/White primary + Magenta accent + status secondaries (Yellow/Green/Cyan)
• [ ] Voice & tone match brand bible (no exclamation marks, no emoji, Sie in German)
• [ ] Cross-brand links between VisiMatch and VisiFair are absent
• [ ] Responsive at mobile/tablet/desktop
• [ ] Mock data realistic (real customer names where available: COSCO, ZIM, ONE, Messe Berlin, etc.)
• [ ] All pages/screens accessible

Path A: Angular only

• [ ] PrimeNG preset generated (vt-preset.ts) — wraps tokens in three-tier model
• [ ] Components are standalone, use inject(), modern template syntax
• [ ] Vitest configured zoneless; one sample component test passes
• [ ] PrimeFlex grid used for responsive layouts

Path B: Astro only

• [ ] Tailwind config reads CSS custom properties (no value duplication)
• [ ] Static-vs-Islands split is intentional (Islands only for interactive widgets)
• [ ] Content Collections used for repeating data (features, customers)
• [ ] BaseLayout renders dark with no data-theme attribute (a website is dark for every brand), and the dark-theme signatures (grid + radial spotlight) match the brand bible
• [ ] Lighthouse: performance ≥ 95, SEO ≥ 100