Overview
Appendix A: Master System Prompts, Design Tokens & Presentation Schemas
Playbook Track: 05 – Presentation Slides & Architecture Diagrams
Target Audience: Year 1 Computer Science & Software Engineering Students Core Tooling Stack: Claude 3.7 Sonnet (Claude Code), Gemini 2.5 Pro / Flash, Antigravity CLI (agy), JSON Schema, W3C Design Tokens
Delivery Format: Operational Production Library & Configuration Reference
1. Master System Prompts for Visual AI Agents
This section provides production-tested, zero-fluff system prompts calibrated for frontier LLMs (Gemini 2.5 Pro and Claude 3.7 Sonnet) to drive automated architecture diagramming and slide compilation.
1.1 The Principal Visual Ontologist Prompt (Gemini 2.5 Pro)
Used for scanning source code repositories, Kubernetes manifests, and Architecture Decision Records (ADRs) to extract formal system boundaries, containers, and protocol contracts.
You are a Principal Enterprise Systems Architect and Visual Ontologist.
Your task is to analyze technical inputs (source code trees, Dockerfiles, Kubernetes manifests, OpenAPI specs, and ADRs) and synthesize a mathematically sound, unambiguous architectural ontology.
Strict Operational Guidelines:
1. Ontological Stratification (C4 Standard):
- Categorize every entity strictly into C4 Level 1 (System / External Actor), C4 Level 2 (Container / Deployable Unit), or C4 Level 3 (Component).
- Never mix container boundaries with low-level class components in the same visual plane.
2. Boundary & Ingress Precision:
- Identify every external ingress point (Reverse Proxies, API Gateways, CDN edge points).
- Trace synchronous RPC (gRPC, HTTPS/REST) vs. asynchronous pub/sub channels (Kafka, SQS, RabbitMQ).
3. Payload & Protocol Typing:
- Every inter-service connector must specify:
a) Source Node ID & Target Node ID
b) Wire Protocol (e.g., gRPC, HTTP/2, SQL/TCP, Kafka 3.4)
c) Primary Data Contract (e.g., Protobuf v3, JSON Schema, Avro)
d) Security Encapsulation (e.g., mTLS, OAuth2 Bearer, Internal VPC)
4. Anti-Boxology Rule:
- Disallow generic "Service A" or "Business Logic" labels. Every box must state its technological implementation and bounded context.
Output your synthesis strictly as an `ArchitectureModel` conforming to the formal JSON Schema in Section 3.1.
1.2 The Executive Presentation Deck Compiler Prompt (Claude 3.7 Sonnet)
Used by Claude Code CLI to compile structured architectural metadata into an executive-ready 10-slide presentation deck formatted for Marp.
You are an Executive Technology Communications Specialist and Presentation Designer.
Using the provided `ArchitectureModel` JSON, generate a publication-ready 10-Slide Marp presentation deck (`deck.marp.md`).
Strict Presentation Engineering Rules:
1. Structure & Narrative Arc:
- Slide 01: Title & Executive Overview (Lead class, system version, automated build tag)
- Slide 02: Business Drivers & Architecture Goals (Quantified SLAs, latency p99, compliance)
- Slide 03: High-Level System Context (C4 Level 1: Users, external systems, boundaries)
- Slide 04: Core Container Topology (C4 Level 2: Embedded validated Mermaid architecture diagram)
- Slide 05: Service Interactions & Protocol Flow (Synchronous vs. asynchronous communication tables)
- Slide 06: Data Persistence & Resilience Strategy (Polyglot storage, replication, RPO/RTO)
- Slide 07: Security, Identity & Compliance Model (Zero-Trust, OAuth2/OIDC, secrets rotation)
- Slide 08: Observability, Monitoring & SLOs (OpenTelemetry, Prometheus metrics, error budgets)
- Slide 09: Deployment Topology & Multi-Region Infra (Kubernetes, CDN, disaster recovery)
- Slide 10: Execution Roadmap & Architecture Milestones (Quarterly phasing, risk mitigations)
2. Cognitive Load & Visual Ergonomics:
- Maintain at least 30% negative whitespace on every slide canvas.
- Maximum 60 words per slide. Avoid dense text walls; use structured bullet lists and KPI metric callouts.
- Embed Mermaid diagrams using fenced code blocks (````mermaid ... ````).
3. Typography & Theme Tokens:
- Use Marp `gaia` theme with widescreen 16:9 ratio.
- Slide title: `## XX. Title` (H2). Section subheadings: `### Subtitle` (H3).
Emit only the complete, valid Marp Markdown file without preamble or surrounding chat commentary.
2. Enterprise Design Tokens & Visual Ergonomics Reference
To maintain complete visual consistency across automated slides and architecture diagrams, all generators must consume a unified set of Design Tokens.
2.1 Corporate High-Contrast & Dark Modern Color Palettes
All colors in this palette have been mathematically verified against WCAG 2.1 AA luminance standards:
| Token Name | Hex Value | RGB Value | Relative Luminance | WCAG AA on White (#FFFFFF) |
WCAG AA on Slate-900 (#0F172A) |
Usage Purpose |
|---|---|---|---|---|---|---|
color.bg.dark |
#0F172A |
15, 23, 42 |
0.012 |
16.5:1 (Pass) | N/A (Canvas) | Dark slide canvas background |
color.bg.light |
#F8FAFC |
248, 250, 252 |
0.953 |
N/A (Canvas) | 16.0:1 (Pass) | Light slide & card container background |
color.surface.card |
#1E293B |
30, 41, 59 |
0.027 |
12.8:1 (Pass) | 1.4:1 (Card Fills) | Subsystem boundary & card fill |
color.text.primary |
#0F172A |
15, 23, 42 |
0.012 |
16.5:1 (Pass) | N/A | Primary headings on light cards |
color.text.light |
#F1F5F9 |
241, 245, 249 |
0.908 |
N/A | 15.3:1 (Pass) | Primary headings on dark canvas |
color.text.muted |
#64748B |
100, 116, 139 |
0.180 |
4.6:1 (Pass AA) | 4.1:1 (Fail Normal) | Secondary annotations on white |
color.accent.blue |
#2563EB |
37, 99, 235 |
0.141 |
4.8:1 (Pass AA) | 4.4:1 (Fail Normal) | Ingress Gateways & Public APIs |
color.accent.cyan |
#0284C7 |
2, 132, 199 |
0.208 |
4.5:1 (Pass AA) | 5.2:1 (Pass AA) | Microservices & Internal Workers |
color.status.success |
#059669 |
5, 150, 105 |
0.223 |
4.5:1 (Pass AA) | 5.6:1 (Pass AA) | Healthy Nodes & Completed Milestones |
color.status.warning |
#D97706 |
217, 119, 6 |
0.245 |
4.5:1 (Pass AA) | 6.1:1 (Pass AA) | Degraded Services & Deprecated APIs |
color.status.danger |
#DC2626 |
220, 38, 38 |
0.145 |
4.9:1 (Pass AA) | 4.3:1 (Fail Normal) | Failed Containers & Security Breaches |
2.2 Standard 16:9 Slide Canvas Coordinate Geometry
All coordinate generators (e.g., python-pptx, SVG exporters) must adhere to the standard 16:9 widescreen canvas grid:
- Canvas Dimensions:
1920px × 1080px(or13.333 in × 7.500 inat 144 DPI) - Safe Margins:
- Top Margin:
80px(0.556 in) - Bottom Margin:
80px(0.556 in) - Left Margin:
100px(0.694 in) - Right Margin:
100px(0.694 in)
- Top Margin:
- Usable Content Area:
1720px × 920px - Typographic Scale:
- Slide Header (
H1 / H2):32pt(42pxline-height), Semi-bold / Bold - Section Title (
H3):22pt(30pxline-height), Medium - Body & Bullet Text:
14pt(20pxline-height), Regular - Diagram Node Labels:
12pt(16pxline-height), Medium - Footers & Captions:
10pt(14pxline-height), Muted Regular
- Slide Header (
3. Production JSON Schemas
3.1 ArchitectureModel Specification Schema (architecture_model.schema.json)
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"title": "ArchitectureModel",
"type": "object",
"properties": {
"system_name": { "type": "string" },
"version": { "type": "string" },
"nodes": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": { "type": "string" },
"name": { "type": "string" },
"type": {
"type": "string",
"enum": [
"Web Client",
"Mobile Client",
"API Gateway",
"Microservice",
"Database",
"Message Broker",
"External SaaS"
]
},
"technology": { "type": "string" },
"description": { "type": "string" },
"boundary": { "type": "string" }
},
"required": ["id", "name", "type", "technology", "description"]
}
},
"dependencies": {
"type": "array",
"items": {
"type": "object",
"properties": {
"source_id": { "type": "string" },
"target_id": { "type": "string" },
"protocol": { "type": "string" },
"description": { "type": "string" },
"is_async": { "type": "boolean", "default": false }
},
"required": ["source_id", "target_id", "protocol", "description"]
}
}
},
"required": ["system_name", "version", "nodes", "dependencies"]
}
3.2 Marp Presentation Deck Schema (presentation_deck.schema.json)
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"title": "PresentationDeckSpecification",
"type": "object",
"properties": {
"deck_title": { "type": "string" },
"theme": { "type": "string", "default": "gaia" },
"aspect_ratio": { "type": "string", "enum": ["16:9", "4:3"], "default": "16:9" },
"slides": {
"type": "array",
"minItems": 5,
"maxItems": 30,
"items": {
"type": "object",
"properties": {
"slide_number": { "type": "integer" },
"slide_class": { "type": "string" },
"title": { "type": "string" },
"subtitle": { "type": "string" },
"content_type": { "type": "string", "enum": ["bullets", "diagram", "kpi_cards", "table", "split"] },
"bullets": { "type": "array", "items": { "type": "string" } },
"diagram_markup": { "type": "string" },
"speaker_notes": { "type": "string" }
},
"required": ["slide_number", "title", "content_type"]
}
}
},
"required": ["deck_title", "slides"]
}
4. Marp Custom Enterprise CSS Theme (`enterprise-theme.css`)
Save this stylesheet into your project directory (e.g. themes/enterprise.css) to apply dark modern enterprise branding to all compiled Marp slide decks:
/* @theme enterprise */
@import 'gaia';
:root {
--color-canvas-bg: #0f172a;
--color-card-bg: #1e293b;
--color-text-primary: #f8fafc;
--color-text-muted: #94a3b8;
--color-accent: #38bdf8;
--color-border: #334155;
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
section {
background-color: var(--color-canvas-bg);
color: var(--color-text-primary);
font-size: 24px;
line-height: 1.5;
padding: 60px 80px;
}
section.lead {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
section.lead h1 {
font-size: 54px;
color: var(--color-accent);
margin-bottom: 12px;
}
section.lead h3 {
font-size: 26px;
color: var(--color-text-muted);
font-weight: 400;
}
h2 {
font-size: 36px;
color: var(--color-accent);
border-bottom: 2px solid var(--color-border);
padding-bottom: 10px;
margin-bottom: 24px;
}
h3 {
font-size: 26px;
color: var(--color-text-primary);
margin-top: 18px;
}
ul {
margin-left: 20px;
}
li {
margin-bottom: 12px;
color: var(--color-text-primary);
}
strong {
color: var(--color-accent);
}
code {
background: var(--color-card-bg);
color: #38bdf8;
padding: 2px 8px;
border-radius: 4px;
font-family: 'Fira Code', monospace;
font-size: 0.9em;
}
pre {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 16px;
}
footer {
color: var(--color-text-muted);
font-size: 14px;
}