Visual Page Builder
Generate a polished, self-contained HTML page that explains any concept using visual components. No frameworks, no dependencies, no build step. One file that looks like a real product page.
Page Types
| Type |
Best for |
Key components |
| Architecture Overview |
Systems, tech stacks, infrastructure |
Flow diagram, connection lines, component cards |
| Comparison Table |
Tool vs tool, plan vs plan, before vs after |
Side-by-side grids, checkmarks, highlight winner |
| Process Flow |
Tutorials, onboarding, how-to guides |
Numbered steps, arrows, status indicators |
| Timeline |
Roadmaps, project history, changelogs |
Vertical timeline, date markers, milestone cards |
| Dashboard |
Metrics, KPIs, performance summaries |
Stat cards, bar charts, progress rings |
| Concept Explainer |
Abstract ideas, frameworks, mental models |
Analogy visuals, layered diagrams, callout boxes |
| Project Recap |
End-of-project summaries, case studies |
Before/after, stats, testimonial cards, gallery |
Ask the user which type fits their content, or auto-detect from their description.
Workflow
Step 1: Gather Content
Ask the user for:
- Title of the page
- 3-6 sections they want to cover (or let you suggest based on the topic)
- Key data points (numbers, stats, comparisons)
- Relationships between concepts (what connects to what)
- Hierarchy (what is most important, what is supporting detail)
If the user provides a document, transcript, or notes, extract these elements automatically and confirm.
Step 2: Plan the Layout
Map each section to a visual component (see Visual Components below). Present the plan:
Section 1: "What is X" -> Concept card with icon + 3 key points
Section 2: "How it works" -> 4-step process flow with arrows
Section 3: "Performance" -> Stat cards (3 across) + comparison grid
Section 4: "Get started" -> Callout box with CTA
Get user approval before building.
Step 3: Build the HTML
Generate a single self-contained HTML file.
Design System:
| Token |
Value |
| Background |
#0f0f10 |
| Surface |
#1a1a1d |
| Surface border |
#2a2a2d |
| Text primary |
#ffffff |
| Text secondary |
#a0a0a0 |
| Accent |
#D97757 (or user-chosen) |
| Accent muted |
rgba(217, 119, 87, 0.15) |
| Font |
Inter via Google Fonts, fallback system-ui, sans-serif |
| Max width |
1000px |
| Card radius |
12px |
| Section spacing |
80px vertical |
Visual Components Available:
| Component |
When to use |
Structure |
| Stat cards |
Key numbers |
Horizontal row, large number + label + optional trend arrow |
| Section cards |
Feature lists, grouped info |
Grid of cards with icon/emoji, title, description |
| Comparison grid |
Side-by-side analysis |
2-3 columns, rows with checkmarks or values |
| Flow steps |
Sequential processes |
Numbered circles connected by lines, title + description |
| Status badges |
Tags, categories, states |
Colored pill badges (green/yellow/red/blue) |
| Code blocks |
Technical content, configs |
Dark bg, monospace font, syntax-highlighted if applicable |
| Callout boxes |
Important notes, warnings, tips |
Accent left border, icon, highlighted background |
| Progress bars |
Completion, capacity, scores |
Horizontal bar with fill percentage and label |
| Tables |
Structured data, specs |
Striped rows, sticky header, responsive scroll |
| Timelines |
Chronological events |
Vertical line with dots, alternating left/right cards |
| Quote blocks |
Testimonials, key statements |
Large quotation mark, italic text, attribution |
| Icon grids |
Feature overviews, tool lists |
2-3 column grid with emoji + title + one-line desc |
Step 4: Save and Preview
Save the file as [topic-slug]-visual.html in the current working directory.
Open in the default browser:
open [topic-slug]-visual.html
Step 5: Iterate
Ask: "How does it look? I can adjust colors, swap components, add sections, or change any text."
Common tweaks:
- Change accent color
- Add or remove sections
- Swap a component type (e.g., table to comparison grid)
- Adjust text content
- Add a logo or header image (base64 inline)
Rules
- Every section needs a visual component. No section should be just a wall of text. If there is no obvious visual, use a callout box or icon grid.
- Max 50 words before a visual. Introductory text for a section must be short. Let the visual do the heavy lifting.
- All CSS and JS inline. Zero external dependencies. The file must work when double-clicked from the desktop with no server.
- Zero external fetches required. Google Fonts is the one allowed exception (with system font fallback). Everything else is inline.
- Responsive. Must look good on mobile (stack grids to single column, scale stat cards, scrollable tables).
- No JavaScript required for content. JS is only for optional enhancements (smooth scroll, fade-in animations). The page must be fully readable with JS disabled.
- Consistent spacing. Use the design system tokens. Do not eyeball padding or margins.
- Dark theme only. Do not offer a light mode. The dark palette is part of the brand.
- Accessible. Sufficient color contrast (WCAG AA minimum), semantic HTML, alt text on images.
- Keep the total file under 500KB. If inlining images, compress them first.
- The page title should appear in the browser tab (title tag).
1---2name: visual-page-builder3description: Generate beautiful self-contained HTML pages that explain any concept visually4---56# Visual Page Builder78Generate a polished, self-contained HTML page that explains any concept using visual components. No frameworks, no dependencies, no build step. One file that looks like a real product page.910## Page Types1112| Type | Best for | Key components |13|------|----------|---------------|14| **Architecture Overview** | Systems, tech stacks, infrastructure | Flow diagram, connection lines, component cards |15| **Comparison Table** | Tool vs tool, plan vs plan, before vs after | Side-by-side grids, checkmarks, highlight winner |16| **Process Flow** | Tutorials, onboarding, how-to guides | Numbered steps, arrows, status indicators |17| **Timeline** | Roadmaps, project history, changelogs | Vertical timeline, date markers, milestone cards |18| **Dashboard** | Metrics, KPIs, performance summaries | Stat cards, bar charts, progress rings |19| **Concept Explainer** | Abstract ideas, frameworks, mental models | Analogy visuals, layered diagrams, callout boxes |20| **Project Recap** | End-of-project summaries, case studies | Before/after, stats, testimonial cards, gallery |2122Ask the user which type fits their content, or auto-detect from their description.2324## Workflow2526### Step 1: Gather Content2728Ask the user for:29- **Title** of the page30- **3-6 sections** they want to cover (or let you suggest based on the topic)31- **Key data points** (numbers, stats, comparisons)32- **Relationships** between concepts (what connects to what)33- **Hierarchy** (what is most important, what is supporting detail)3435If the user provides a document, transcript, or notes, extract these elements automatically and confirm.3637### Step 2: Plan the Layout3839Map each section to a visual component (see Visual Components below). Present the plan:4041```42Section 1: "What is X" -> Concept card with icon + 3 key points43Section 2: "How it works" -> 4-step process flow with arrows44Section 3: "Performance" -> Stat cards (3 across) + comparison grid45Section 4: "Get started" -> Callout box with CTA46```4748Get user approval before building.4950### Step 3: Build the HTML5152Generate a single self-contained HTML file.5354**Design System:**5556| Token | Value |57|-------|-------|58| Background | `#0f0f10` |59| Surface | `#1a1a1d` |60| Surface border | `#2a2a2d` |61| Text primary | `#ffffff` |62| Text secondary | `#a0a0a0` |63| Accent | `#D97757` (or user-chosen) |64| Accent muted | `rgba(217, 119, 87, 0.15)` |65| Font | Inter via Google Fonts, fallback `system-ui, sans-serif` |66| Max width | `1000px` |67| Card radius | `12px` |68| Section spacing | `80px` vertical |6970**Visual Components Available:**7172| Component | When to use | Structure |73|-----------|-------------|-----------|74| **Stat cards** | Key numbers | Horizontal row, large number + label + optional trend arrow |75| **Section cards** | Feature lists, grouped info | Grid of cards with icon/emoji, title, description |76| **Comparison grid** | Side-by-side analysis | 2-3 columns, rows with checkmarks or values |77| **Flow steps** | Sequential processes | Numbered circles connected by lines, title + description |78| **Status badges** | Tags, categories, states | Colored pill badges (green/yellow/red/blue) |79| **Code blocks** | Technical content, configs | Dark bg, monospace font, syntax-highlighted if applicable |80| **Callout boxes** | Important notes, warnings, tips | Accent left border, icon, highlighted background |81| **Progress bars** | Completion, capacity, scores | Horizontal bar with fill percentage and label |82| **Tables** | Structured data, specs | Striped rows, sticky header, responsive scroll |83| **Timelines** | Chronological events | Vertical line with dots, alternating left/right cards |84| **Quote blocks** | Testimonials, key statements | Large quotation mark, italic text, attribution |85| **Icon grids** | Feature overviews, tool lists | 2-3 column grid with emoji + title + one-line desc |8687### Step 4: Save and Preview8889Save the file as `[topic-slug]-visual.html` in the current working directory.9091Open in the default browser:92```bash93open [topic-slug]-visual.html94```9596### Step 5: Iterate9798Ask: "How does it look? I can adjust colors, swap components, add sections, or change any text."99100Common tweaks:101- Change accent color102- Add or remove sections103- Swap a component type (e.g., table to comparison grid)104- Adjust text content105- Add a logo or header image (base64 inline)106107## Rules108109- **Every section needs a visual component.** No section should be just a wall of text. If there is no obvious visual, use a callout box or icon grid.110- **Max 50 words before a visual.** Introductory text for a section must be short. Let the visual do the heavy lifting.111- **All CSS and JS inline.** Zero external dependencies. The file must work when double-clicked from the desktop with no server.112- **Zero external fetches required.** Google Fonts is the one allowed exception (with system font fallback). Everything else is inline.113- **Responsive.** Must look good on mobile (stack grids to single column, scale stat cards, scrollable tables).114- **No JavaScript required for content.** JS is only for optional enhancements (smooth scroll, fade-in animations). The page must be fully readable with JS disabled.115- **Consistent spacing.** Use the design system tokens. Do not eyeball padding or margins.116- **Dark theme only.** Do not offer a light mode. The dark palette is part of the brand.117- **Accessible.** Sufficient color contrast (WCAG AA minimum), semantic HTML, alt text on images.118- Keep the total file under 500KB. If inlining images, compress them first.119- The page title should appear in the browser tab (title tag).
Hassaan146