How it was made
One person directing several AIs, with the client side kept human. Every page was designed in Pencil first, and the ink decoration's positions are exported from the design file and rendered by code. The ink itself came from AI-generated element sheets, cut and extracted into a catalogued library of 142 pieces plus a cover for each of the 13 ministries, with composition rules written into the spec so the system stays coherent as pages are added. The platform was built with Claude Code against the numbered-task spec described below. The pitch, two rounds of content-request forms and review on a live preview stayed with me.
The brief
A YouTube channel with 433 sermons, a bilingual congregation, and no website either group could use. The ask: one site that reads naturally in both languages, and a back office a pastor, a clerk and a volunteer video manager can run from a phone, with no developer on call.
What visitors get
Events with RSVP, a searchable sermon archive, ministry pages, a community wall and bilingual bulletins.
The back office
Four staff roles plus a per-ministry leader role, enforced on the server and again by row-level security. Sermons import from YouTube on a two-day cron, with one-click sync and a live-stream switch. Events, ministries and bulletins have side-by-side bilingual fields; bulletins move through draft-to-publish. Every public string is editable in a searchable content editor and goes live on save, no deploy. Uploads accept HEIC, resize to WebP in the browser, and land in path-scoped storage. Prayer moderation has trust-based comment approval and a masking view that keeps anonymous authors anonymous. A first-party analytics dashboard, a phone-sized console, and a bilingual staff guide.
Design
A "new Chinese" ink-wash direction: rice-paper ground, ink mountains and boats at the page edges, gold fret corners, and a custom ink cover for each of the 13 ministries. Motion is pure CSS above the fold and respects reduced-motion. Noto Serif SC carries both scripts.
Delivery and engineering
Spec-driven: ~380 numbered tasks across 18 phases, a design spec with tokens and composition rules, a deployment runbook, a design-QA checklist. Every change ran typecheck, lint, a production build and Playwright screenshots at two widths. Two pre-launch audits found and fixed 5 P0 and 12 P1 issues the same day, then covered security, SEO/a11y/i18n, 21 functional flows and Lighthouse (desktop 100, accessibility 94–96). Client work handled like client work: a pitch deck, two rounds of bilingual content-request forms, open items tracked by ID, review on a live preview. When the first ink design read as "too Chinese", three homepage variants shipped side by side so the client could compare real pages; they chose the ink.
