Design framework
A library of web page designs, layouts, and voices, written to be consumed by AI coding agents. Pick the ones you want, and name them in your prompt.
Pick a design, a layout, and a voice. This generates a DESIGN.md — copy it, or save it, into your
project's repo root. Agents look for DESIGN.md by default, so this points them at the right
combination without you having to name it in every prompt.
Designs
What it looks like — colour, type, spacing, and the styling of every component. Each demo is a kitchen sink: the same components, in the same order, so designs can be compared directly.
learn
A Duolingo-inspired learning interface: dark navy surfaces, green action buttons, rounded forms, and a friendly rhythm built around momentum and progress.
material-design
Google's Material Design with the classic Material Design 2 blue. Tonal surfaces, elevation with shadow, fully rounded buttons, and Roboto typography. Colorful but systematic.
playful
Bright, cheerful, energetic. A vibrant purple and orange palette with generous rounded corners that brings joy to every interaction.
slate
A calm, neutral product UI. Cool greys, one blue accent, restrained depth. The design equivalent of getting out of the way.
warm-paper
Editorial and reading-first. Warm off-white paper, soft near-black ink, serif for content, sans for UI chrome. One muted oxblood accent. Minimal chrome, generous rhythm, 16px body text.
Layouts
Where everything goes — regions, sizes, scroll behaviour, and responsive rules.
Each demo is a wireframe: greyscale, with <placeholder> labels marking what belongs where.
app-shell
Viewport-locked application shell. Fixed sidebar, fixed top bar, one scrolling content pane.
centered-doc
Single-column centered document. The page scrolls as a whole; no viewport-locking.
document-editor
A centred writing surface with a collapsible document tree on the left and a contextual inspector on the right. The document is the interface.
social-feed
Three-column viewport-locked social media layout. Fixed top nav, fixed sidebars, scrolling center feed with constrained max-width content.
split-inbox
Three-pane list-detail layout with independent scroll regions. Left folder rail, middle item list, right detail pane. Viewport-locked shell with a navigation-stack transformation on mobile.
Voices
How it speaks — attributes, mechanics, vocabulary, and the actual strings a product says. Each demo is a string sink: the same writing situations, in the same order, in greyscale, so voices can be compared line for line.
plain-spoken
Warm but direct. An expert peer explaining something clearly and then stopping. No jargon, no hype, no hedging — and no coldness either.
upbeat
Warm and encouraging. Notices when something goes well, softens it when something doesn't, and assumes the reader might be new here rather than expert at this.