A shared library of interactive presentations and use-case mockups for the Bayes Platform, Bayes Impact's open-source AI-agent platform for public services. Each page shows the platform applied to a concrete context — a government, a hospital, an employment service — as a ready-to-present deck or interactive mockup. They are illustrations of the product in context, not throwaway demos.
Everything runs on one shared, dependency-free design system: bilingual (FR/EN), mobile-readable, PDF-exportable, published straight to GitHub Pages.
Live → https://bayesimpact.github.io/use-cases/ Reference deck → https://bayesimpact.github.io/use-cases/presentations/bayes/
A new presentation is a declension, not a fork. Every deck is built from the same shared slides, the same design tokens and the same two demo engines. You change content, never the look. That is what stops the library turning into a jungle of clashing styles and conflicting edits:
- The look, structure and engines live in
lib/(bayes.css,bayes.js,bayes-slides.js). A variant never copies or restyleslib/. Improving the design = one edit inlib/, and every deck inherits it. - Each variant is its own folder (
presentations/<slug>/), so two people can build in parallel with zero merge conflicts. Decks never touch each other. - Shared slides are included by reference (
<div data-shared="cover"></div>), with a small JSON block to tweak their wording. You override copy, not CSS.
Follow that and variants stay visually identical to the brand, update together, and never collide.
presentations/bayes/ is the reference deck — when in doubt, copy how it does it.
You don't write code. You describe your use case to Claude Code (opened in this repo) and it builds the deck for you, inside the design system. Give it your raw material and a short instruction:
Prompt to start from (paste your own notes in place of the brackets):
"Create a new Bayes Platform presentation variant for [partner / context, e.g. 'the French Ministry of Health']. Copy
presentations/_templatetopresentations/[slug], followCLAUDE.mdand the reference deckpresentations/bayes/, and stay strictly within the Bayes design system and voice. Keep all the shared platform/feature slides as they are; rewrite only the use-case section for my context. Here are my notes, audience and goals: [paste meeting notes, the partner's priorities, any figures or quotes, in FR and/or EN]. Keep copy bilingual FR/EN, mark any invented figure as illustrative, then preview it and show me screenshots."
For the best result, tell Claude: who the audience is, the 2–4 concrete use cases to feature, any real figures, partner names or quotes (and whether they're public), and your language(s). Claude handles layout, styling and the bilingual structure.
Please don't: hand-edit files in lib/, paste in outside CSS or branding, or change colors and
fonts. If something looks off-brand, tell Claude — the guardrails are in CLAUDE.md and it will
fix it the right way. When you're happy, ask Claude to commit & push; it goes live in ~1 minute.
| You personalize (per variant) | Stays shared (never fork) |
|---|---|
| Cover title/subtitle + the nav section label | The design system (lib/bayes.css tokens) |
| The use-case section — your partner's concrete examples | The platform / feature slides (Ancrage, Validation, OS) |
| The two demo JSON blocks (the conversation & the copilot) | The mission, history, model, philosophy, closing slides |
Partner logos in assets/, the closing email |
The two demo engines + all shared slides |
Optionally one accent color via the :root hook in <head> |
Fonts, the pill system, the section-colour language |
A variant is essentially the same skeleton with a different use-case middle.
cover → mission → history → introducing the platform → why it's not a generic agent builder (the 4 bricks) → feature proof (Ancrage · Validation & qualité · platform-OS) → section divider → use cases by vertical (employment · health · government) → our model → team → references → closing
The four bricks the platform is sold on — reuse this language: Suivi des protocoles · Analytique métier · Validation avant production · Ouvert & souverain.
The look matches bayesimpact.org. All of this is enforced by lib/;
don't reinvent it per deck.
- Tokens (
:rootinbayes.css): beige--bg #F2EFE9(Bayes home), ink--ink #000,--cream, gold highlight--gold-bg #EBE092, orange--accent-orange #FF8400, blue--accent-blue #1067FE, green--ok. Fonts Inter + JetBrains Mono. - Flat colours only — no gradients. Backgrounds are solid design-system colours.
- Section-colour language (how the eye reads the chapters): beige = Bayes / platform / model,
flat cool
--bg-cases= the use-case showcase, flat warm--bg-gov= the government / DPI vertical, flat dark--bg-dark= cover, section divider, closing; deep blue = the mission hero. Returning to beige signals "back to the Bayes story." - Pills are outlined with muted text (mirroring the website): a green dot on section-title
pills, a grey dot on the cover's flourish chips. Orange is punctuation/accent only — never
low-contrast body text; the gold marker (
em.hl) is the emphasis highlight. - Bilingual: every string is inline FR + EN (
<span data-lang="fr">…</span><span data-lang="en">…</span>); the nav language menu toggles them. - Voice: airy, concrete, no hype. Mission — "AI to empower people in need, and those who serve them." Demo data is illustrative; flag any invented figure before a real audience.
cp -r presentations/_template presentations/<slug> # slug = kebab-case, e.g. ministere-sante
# then edit presentations/<slug>/index.html only:
# • <body> data-label-fr / data-label-en → the nav section label
# • the cover JSON + the use-case <section>s + the two demo JSON blocks (keep FR+EN)
# • shared slides stay as <div data-shared="…"></div> (+ optional JSON override)Preview locally (any static server — the engine is dependency-free):
python3 -m http.server 8016
# → http://localhost:8016/ splash gate
# → http://localhost:8016/presentations/<slug>/ your deck- Shared slides live in
lib/bayes-slides.js(cover,earth,platform-*,closing, …). Include with<div data-shared="name"></div>; tweak copy via an inner<script type="application/json">block. Edit the function once → every deck updates. - Two demo engines (
lib/bayes.js): a WhatsApp-style conversation (data-demo="chat") and a back-office / verification copilot (data-demo="copilot"), both driven by inline JSON you rewrite. - PDF: the browser's Print → Save as PDF (1280×800, backgrounds on) exports a clean deck.
- Bump the
?v=query on thelib/includes after changing a shared file, so browsers fetch the new version.
Commit & push → live at https://bayesimpact.github.io/use-cases/presentations/<slug>/.
The repo is public and served by GitHub Pages, so any deck is a plain shareable URL — no login,
opens on any device, exports to PDF. The site root (index.html) is a splash gate: a visitor
enters a short code that routes to /presentations/<slug>/. That's security-by-obscurity only — the
repo is public, so never put anything truly confidential in a deck, and mark sensitive pitches as
such. To share a deck, send its presentations/<slug>/ URL (or the code for the gate).
index.html splash gate (short code → /presentations/<slug>/)
lib/ bayes.css · bayes.js · bayes-slides.js — the shared system (rarely edited, global impact)
assets/ logos · planet · partner logos · captured incident screenshots
presentations/ _template/ + one folder per deck (bayes = reference, then each variant)
CLAUDE.md the full agent playbook (design system, voice, shared slides, engines, checklist)
README.md this file
Built on the Bayes brand system — Inter + JetBrains Mono; beige #F2EFE9, ink black, orange
#FF8400; flat colours, bilingual, open-source, for the public good.