Google Slides
tools/deck/payload_to_deck.py turns an A2UI payload into a PPTX that opens in Google Slides: one recipe per atom, a text-fit check with real font metrics, and a report of any atom it could not convert. The previews below are the web rendering; the slide layout is the deck's own, not a pixel copy. Files are checked by converting them in Google Slides and reading back the result. Four sample decks also opened in desktop PowerPoint without problems; that is one person on one machine, so treat PowerPoint as lightly checked, not guaranteed.
79 catalog atoms also render on this surface
series link or transparency note at article top
In Series label, I covered the background. This article picks up from there.
prose paragraph block
This is a body paragraph. It supports bold, italic, and inline code via lightweight markdown.
H2 section title
Section Heading
H3 subsection title
Subheading text
pull quote or blockquote with attribution
The vocabulary IS the discovery layer.
syntax-highlighted fenced code block
{
"type": "stat_card",
"value": "1B+",
"label": "daily executions"
}left-to-right step flow diagram
schema.yaml ──► generate.py ──► public/ ──► Cloudflare Edge
unordered list with optional bold label per item
- First item in the list
- Labelled item with supporting description
- Third item
styled GitHub repo link list
article closing paragraph with hashtags
A concise description of the content.
coloured tip info warning or danger highlight box
numbered step-by-step instruction sequence
data table with header row on mobile
label and value pairs in a compact grid
chronological event timeline
- 2024
A2UI v1
First atoms defined.
- 2025
467 atoms
Full schema published.
- 2026
ARD catalog
Live on a2uicatalog.ai.
big number metric with directional change indicator or percentage
compact inline value with mini trend bar the direction of a
in-page anchor navigation links document or to external URLs.
collapsible FAQ question and answer list the question is clicked.
definition term with explanation
- API
- Application Programming Interface
numbered footnote reference at the bottom of a section or page.
testimonial quote with avatar and attribution
"The vocabulary IS the discovery layer."
AAuthor Name
large display number pulled from prose for emphasis descriptive label.
features versus plans comparison matrix
single pricing plan card with features list
side-by-side pricing plan comparison different subscription plans.
two-column pros and cons comparison
two items compared spec by spec and values side-by-side.
product specifications in a clean table
multi-item attribute comparison grid
| Feature | Product A | Product B |
|---|---|---|
| Core feature | ||
| Advanced analytics | ||
| API access |
multiple items rated across dimensions scores.
feature capability tick list per tier capability using checkmarks
- First item
- Second item
customer testimonial with photo name and quote
“The catalog cut our build time in half.”
read-only star rating with score and count
list of contributors with avatar and role
social proof strip with stats and logos
press or media mention with logo and quote
expert quote with credentials and photo
"The vocabulary IS the discovery layer."
highlighted customer review excerpt by a star rating.
"Review text"
claim set in type whose weight, size and tracking encode the stated confidence
claim plus numbered, sourced evidence lines printed as a till receipt; newest line prints in
struck-through old belief, new belief lands beneath; optional what-changed-it line
named resource rows with avatar, status badge, and meta
LLM prompt with highlighted {variable} slots and copy button
AI model spec card with context window, pricing, and capability badges
user prompt and AI response as chat bubbles
keyboard shortcut cheat-sheet grid with key combos and labels
star rating histogram with percentage bars per star level
quarter-based product roadmap with status-tagged milestones
persistent notification inbox list with unread indicators
horizontal wrap of neutral content chip labels
inline markdown string (bold, italic, code, links) rendered to HTML
lightweight tinted inline tip or note block no icon
numbered RAG source card with title excerpt and URL
side-by-side multi-model output comparison table
labelled probability bar with colour-coded confidence fill
product card with image, price, status badge, and tags
e-commerce order card with status badge and line item list
inventory table with SKU, stock levels, and low-stock row highlight
Jira issue card with type icon, status lozenge, priority, and assignee
kanban sprint board with named columns and compact issue cards
enterprise data grid with typed columns, row selection, and
icon + title + description feature grid — Tailwind UI pattern
labeled horizontal progress bars list — percent fill, per-bar color
icon + big number + label stat strip — more visual than metric_row
horizontal step progress — numbered circles, connecting lines, current step highlighted
light gradient hero — badge, large title, subtitle, CTA button
icon-circle list — emoji/icon per item, label + text, color per item
highlight box — gradient/solid/outline style, icon, title, text
horizontal metric strip — value, label, prefix/suffix, trend up/down
decorative numbered list — large background numbers, circular badges, or bordered stage cards
app-style page header — title, subtitle, icon, accent, tag badge
person card — name, role, photo, bio, tags, email, linkedin
risk list — critical/high/medium/low with title, description, mitigation
action items table — action, owner, due date, status
asymmetric bento-box feature tile grid — MagicUI/shadcn pattern
full-width CTA banner with headline and buttons — Tailwind UI pattern
end-of-exercise score card with correct/total, percentage, grade, and CTA
highlighted text passage with optional hover margin annotation note