Pagr Examples Production Guide

What this page is for

Show the category

The Examples page should prove that agents can produce useful browser-native artifacts, not just text files with headings.

Teach the prompt shape

Each example has a concrete brief and a shared visual styleguide so another agent can create the HTML file with minimal interpretation.

Demonstrate publishing

Published examples should use real https://uc.pagr.link/... URLs returned by the CLI. Never invent slugs.

Include this in every generation prompt

Create one complete standalone HTML file. Do not output Markdown. Use inline CSS and inline JavaScript only. No build step, no external dependencies, no remote fonts, and no external images. Use semantic HTML, responsive layout, accessible labels, keyboard-safe controls, and print-friendly spacing. Ensure mobile layout does not overflow or hide any content. Visual style: calm, dense, and work-focused. Use sea ink #173a40, lagoon #4fb8b2, lagoon deep #328f97, palm #2f6a4a, foam #f3faf5, soft borders rgba(23,58,64,.14), white or translucent surfaces, compact cards, and clear hierarchy. Use system sans fonts with optional Georgia-style display headings. Avoid generic SaaS hero fluff, purple gradients, beige or brown palettes, decorative blobs, lorem ipsum, fake stock imagery, and oversized empty cards. The artifact should prove why HTML is better than Markdown: include visual structure, dense scannable data, tables, charts, diagrams, annotations, or small useful interactions. Keep all sample content realistic and specific. Include a short footer with subtle top border, muted 12px to 13px text, 20px to 28px top spacing, and the exact label "Published with Pagr".

Create these standalone HTML files

Implementation PlanPlanning · replaces plan.md · file: implementation-plan.html planned

Milestones
API contract
Risks
Acceptance checks

Build an implementation plan for adding multi-location inventory transfers to a restaurant operations platform. Include milestones, schema and API contract, rollout stages, risks, acceptance criteria, and open questions. Make it useful for an engineer who will start implementation immediately.

Generate a production-quality standalone HTML example for a public examples gallery.

Visual style: calm, dense, and work-focused. Use sea ink #173a40, lagoon #4fb8b2, lagoon deep #328f97, palm #2f6a4a, foam #f3faf5, soft borders rgba(23,58,64,.14), white or translucent surfaces, compact cards, and clear hierarchy. Use system sans fonts with optional Georgia-style display headings. Avoid generic SaaS hero fluff, purple gradients, beige or brown palettes, decorative blobs, lorem ipsum, fake stock imagery, and oversized empty cards.

The artifact should prove why HTML is better than Markdown: include visual structure, dense scannable data, tables, charts, diagrams, annotations, or small useful interactions. Keep all sample content realistic and specific. Include a short footer with subtle top border, muted 12px to 13px text, 20px to 28px top spacing, and the exact label "Published with Pagr".

Example brief:
Build an implementation plan for adding multi-location inventory transfers to a restaurant operations platform. Include milestones, schema and API contract, rollout stages, risks, acceptance criteria, and open questions. Make it useful for an engineer who will start implementation immediately.

Output only the complete HTML file. Save it as implementation-plan.html.

pagr upload implementation-plan.html --title "Example: Implementation Plan"

Research BriefPlanning · replaces research-notes.md · file: research-brief.html planned

Evidence cards
Confidence
Synthesis
Next steps

Build a research brief about why first-time users drop during onboarding in a digital therapy app. Include findings, evidence cards, confidence levels, synthesis, recommended next steps, and a clear distinction between observed facts and inference.

Generate a production-quality standalone HTML example for a public examples gallery.

Example brief:
Build a research brief about why first-time users drop during onboarding in a digital therapy app. Include findings, evidence cards, confidence levels, synthesis, recommended next steps, and a clear distinction between observed facts and inference.

Output only the complete HTML file. Save it as research-brief.html.

pagr upload research-brief.html --title "Example: Research Brief"

Pull Request ReviewReview · replaces review.md · file: pr-review.html planned

Severity ranking
File refs
Test gaps
Recommendation

Build a code review report for a fictional pull request in a B2B invoicing platform that changes invoice reminder scheduling and retry handling. Include severity-ranked findings, affected files, behavioral risk, missing tests, open questions, and final recommendation. Use realistic file paths and line references, but make it clear that the data is illustrative.

Generate a production-quality standalone HTML example for a public examples gallery.

Example brief:
Build a code review report for a fictional pull request in a B2B invoicing platform that changes invoice reminder scheduling and retry handling. Include severity-ranked findings, affected files, behavioral risk, missing tests, open questions, and final recommendation. Use realistic file paths and line references, but make it clear that the data is illustrative.

Output only the complete HTML file. Save it as pr-review.html.

pagr upload pr-review.html --title "Example: Pull Request Review"

Product Design ReviewReview · replaces design-notes.md · file: design-review.html planned

Annotations
Decision log
Alternatives
Questions

Build a product design review for the host onboarding flow in a home-swapping travel app. Include annotated wireframe panels made with HTML and CSS, a decision log, alternatives considered, unresolved questions, and a compact recommendation section.

Generate a production-quality standalone HTML example for a public examples gallery.

Example brief:
Build a product design review for the host onboarding flow in a home-swapping travel app. Include annotated wireframe panels made with HTML and CSS, a decision log, alternatives considered, unresolved questions, and a compact recommendation section.

Output only the complete HTML file. Save it as design-review.html.

pagr upload design-review.html --title "Example: Product Design Review"

Launch Readiness DashboardReporting · replaces status.md · file: launch-dashboard.html planned

Metric cards
Checklist
Owners
Go/no-go

Build a launch readiness dashboard for a browser extension that summarizes sales calls before meetings. Include metric cards, checklist by owner, timeline, blockers, launch criteria, and a go/no-go status summary. Keep it dense enough for repeated stakeholder review.

Generate a production-quality standalone HTML example for a public examples gallery.

Example brief:
Build a launch readiness dashboard for a browser extension that summarizes sales calls before meetings. Include metric cards, checklist by owner, timeline, blockers, launch criteria, and a go/no-go status summary. Keep it dense enough for repeated stakeholder review.

Output only the complete HTML file. Save it as launch-dashboard.html.

pagr upload launch-dashboard.html --title "Example: Launch Readiness Dashboard"

Incident ReportReporting · replaces incident.md · file: incident-report.html planned

Timeline
Impact
Root cause
Prevention

Build an incident report for duplicate courier dispatch notifications in a same-day grocery delivery platform. Include impact summary, timeline, root cause, detection, remediation, prevention work, owners, due dates, and customer communication notes.

Generate a production-quality standalone HTML example for a public examples gallery.

Example brief:
Build an incident report for duplicate courier dispatch notifications in a same-day grocery delivery platform. Include impact summary, timeline, root cause, detection, remediation, prevention work, owners, due dates, and customer communication notes.

Output only the complete HTML file. Save it as incident-report.html.

pagr upload incident-report.html --title "Example: Incident Report"

System Flow DiagramDiagrams · replaces architecture.md · file: flow-diagram.html planned

Inline SVG
Step details
Failure paths
Legend

Build an annotated flow diagram for customer submits return request -> support approves -> warehouse inspects item -> finance issues refund in an e-commerce returns platform. Use inline SVG, a legend, failure paths, and click or hover details for each step. The page must remain useful if JavaScript is disabled.

Generate a production-quality standalone HTML example for a public examples gallery.

Create one complete standalone HTML file. Do not output Markdown. Use inline CSS and inline JavaScript only. No build step, no external dependencies, no remote fonts, and no external images. Use semantic HTML, responsive layout, accessible labels, keyboard-safe controls, and print-friendly spacing. Ensure mobile layout does not overflow or hide any content.

Visual style: calm, dense, and work-focused. Use sea ink #173a40, lagoon #4fb8b2, lagoon deep #328f97, palm #2f6a4a, foam #f3faf5, soft borders rgba(23,58,64,.14), white or translucent surfaces, compact cards, and clear hierarchy. Use system sans fonts with optional Georgia-style display headings. Avoid generic SaaS hero fluff, purple gradients, beige or brown palettes, decorative blobs, lorem ipsum, fake stock imagery, and oversized empty cards.

The artifact should prove why HTML is better than Markdown: include visual structure, dense scannable data, tables, charts, diagrams, annotations, or small useful interactions. Keep all sample content realistic and specific. Include a short footer with subtle top border, muted 12px to 13px text, 20px to 28px top spacing, and the exact label "Published with Pagr".

Example brief:
Build an annotated flow diagram for customer submits return request -> support approves -> warehouse inspects item -> finance issues refund in an e-commerce returns platform. Use inline SVG, a legend, failure paths, and click or hover details for each step. The page must remain useful if JavaScript is disabled.

Output only the complete HTML file. Save it as flow-diagram.html.

pagr upload flow-diagram.html --title "Example: System Flow Diagram"

Executive Briefing DeckDiagrams · replaces deck.md · file: slide-briefing.html planned

Slides
Keyboard nav
Progress
Speaker notes

Build a compact executive briefing deck for expanding an expense management SaaS into procurement workflows. Include slide navigation, keyboard controls, progress indicator, speaker notes, and a final decision slide. Keep the deck readable on mobile and printable.

Generate a production-quality standalone HTML example for a public examples gallery.

Example brief:
Build a compact executive briefing deck for expanding an expense management SaaS into procurement workflows. Include slide navigation, keyboard controls, progress indicator, speaker notes, and a final decision slide. Keep the deck readable on mobile and printable.

Output only the complete HTML file. Save it as slide-briefing.html.

pagr upload slide-briefing.html --title "Example: Executive Briefing Deck"

Interactive Triage BoardInteractive · replaces issues.md · file: triage-board.html planned

Filters
Grouped cards
Counts
Copy summary

Build an interactive triage board for feature requests in a clinic scheduling platform. Include filters by priority and request type, grouped cards, local summary counts, and a copy summary button. Keep all interactions client-side and make the default view useful without clicking anything.

Generate a production-quality standalone HTML example for a public examples gallery.

Example brief:
Build an interactive triage board for feature requests in a clinic scheduling platform. Include filters by priority and request type, grouped cards, local summary counts, and a copy summary button. Keep all interactions client-side and make the default view useful without clicking anything.

Output only the complete HTML file. Save it as triage-board.html.

pagr upload triage-board.html --title "Example: Interactive Triage Board"

Prompt Tuning WorkbenchInteractive · replaces prompt-notes.md · file: prompt-tuner.html planned

Editable variants
Rubric
Comparison
Copy prompt

Build an interactive prompt tuning workbench for an AI meeting notes assistant. Include editable prompt variants, rubric scores, before and after comparison, notes about tradeoffs, and a copyable final prompt. Avoid storing data remotely.

Generate a production-quality standalone HTML example for a public examples gallery.

Example brief:
Build an interactive prompt tuning workbench for an AI meeting notes assistant. Include editable prompt variants, rubric scores, before and after comparison, notes about tradeoffs, and a copyable final prompt. Avoid storing data remotely.

Output only the complete HTML file. Save it as prompt-tuner.html.

pagr upload prompt-tuner.html --title "Example: Prompt Tuning Workbench"

How to wire a finished example into the marketing page

Generate the standalone HTML file. Use the shared styleguide and the example-specific prompt. Save the output as <id>.html, for example implementation-plan.html.

Open it locally and inspect it. Confirm the page is standalone, responsive, useful without external assets, and not just a styled Markdown document.

Upload with Pagr. Run pagr upload <id>.html --title "Example: <Title>". Use the exact public URL printed by the CLI.

Update the framework data. In apps/marketing/src/lib/examples.ts, change the matching item to status: 'ready' and set publishedUrl to the printed https://uc.pagr.link/... URL.

status: 'ready',
publishedUrl: 'https://uc.pagr.link/printed-slug'

Rebuild marketing. Run pnpm --filter @pagr/marketing build and confirm the example card now shows an active Open example link.

Checklist for each generated example

The output is one complete HTML file with inline CSS and inline JavaScript only.
The file opens directly in a browser and has no external dependencies, fonts, images, or build step.
The artifact demonstrates something Markdown cannot do well: charts, diagrams, annotations, interaction, layout, or dense comparison.
The content is realistic, specific, and internally consistent.
The visual style is calm, dense, and work-focused: sea ink, lagoon, palm, foam, compact surfaces, and practical hierarchy.
Keyboard navigation and visible focus states work for any interactive controls.
The mobile layout around 375px does not overflow or hide important text.
The printed Pagr URL is pasted into examples.ts. No invented URL is used.
The marketing build succeeds after updating the example data.