Build a tiny site from a testable brief

Try it with fictional data first.

Create a fictional demo: Harbor Repair Café.
Show "Fictional demo — not a real event" visibly at the top.
Saturday 14 November 2026, 10:00–13:00, Harbor Hall (fictional).
Free entry. Bring one small item. No microwaves.

Schedule:
10:00 — Mend a shirt — Clothing
11:00 — Diagnose a desk lamp — Appliances
12:00 — Clean a toaster safely — Appliances

Make All / Clothing / Appliances filter buttons. All shows 3 sessions;
Clothing shows 1; Appliances shows 2. Announce the result count.
Use warm off-white, dark navy and one orange accent. System fonts only.
Plain HTML/CSS/JS. No framework, package installs, external assets,
tracking, signup form, API keys or network calls. No deployment.
Work at 390px and 1280px widths. Support keyboard use and visible focus.
Deliver index.html, styles.css, app.js and a README with test steps.
Do not add unapproved event claims, testimonials or a fake real address.

Documentation-based coding recipe with a fictional brief and expected filter states. No Codex session or generated event-page workflow was executed for this guide. The PrisAIm site itself is separately browser-tested.

Know what you need.

Sol is a documented coding and professional-work baseline for agentic code generation. That does not prove it outperforms cheaper models on a four-file page. A fixed brief and observed acceptance checks are the useful part of this recipe.

• Codex CLI installed and signed in with eligible model access
• Git, a browser and optionally Python 3 for a local preview
• An empty disposable directory, separate from production repositories

From input to something usable.

mkdir repair-cafe-demo
cd repair-cafe-demo
git init
# Save approved-brief.md here first.
codex -m gpt-6.1-sol --sandbox read-only

Read approved-brief.md. Propose the four-file implementation and acceptance checks. Do not edit files yet. Flag ambiguity rather than adding features.

codex -m gpt-6.1-sol --sandbox workspace-write --ask-for-approval on-request

git status --short
python3 -m http.server 8000 --bind 127.0.0.1

At 390px the date overflows its card. Fix wrapping without hiding the date or shrinking body text below 16px. Recheck all three filters.

Start with an explicit request.

Implement approved-brief.md in this directory only. Keep it to the four
requested files plus the existing brief. No dependencies or network
requests. Treat the brief's scope as fixed. Use semantic HTML, real
buttons with aria-pressed, and a live result count for the filter.
After implementation, explain the files and report checks you actually
ran separately from checks I still need to perform in a browser.
Do not claim screenshots, accessibility tests or deployment happened
unless you actually performed them. Do not publish or push this project.

Check this before calling it done.

Illustrative expected output, not output observed from a model run.

Expected artifact, not a generated or tested event site here. Deliver index.html, styles.css, app.js and README, plus the existing approved brief. Done means the behaviors were observed in your browser.

• 390px and 1280px layouts have no page-level horizontal scrolling
• Keyboard activation gives observed counts 3 → 1 → 2 → 3 and a visible focus indicator
• No external requests, dependencies, signup, tracking, fabricated event claims or deployment

Fix the failure, not the wording.

When another approach is better

Claude Code with Sonnet 5.5 can follow the same brief. A standard static template is simpler without a custom interaction. Authentication, payments and personal-data collection require another design.

Sources & what was checked.

Documentation-based coding recipe with a fictional brief and expected filter states. No Codex session or generated event-page workflow was executed for this guide. The PrisAIm site itself is separately browser-tested.