The Garden Shoppe
Design & build | 2026Moodboard → DESIGN.md
A boutique plant nursery, garden tools, and furniture shop. Built to answer one question: could a moodboard become a working DESIGN.md, and could that file carry an entire site's design from a sourced aesthetic?
The experiment
An atmosphere piece: earthy, tactile, photography-forward. The success metric was prompt-to-prompt visual consistency.
Stack
Cursor, Figma, Vanilla JS, Netlify
View the live site ->
Mood Board & Styles
Warm linen paper, deep forest ink, sage green. Porca display over Anonymous Pro monospace body.
Full-bleed moody garden photography does the emotional work; type and palette stay quiet and earthy.
Creating the DESIGN.md file
Hypothesis: a moodboard inspires; a DESIGN.md constrains. I needed to learn what each encodes. The Garden Shoppe vibe code explores how a moodboard is converted into structured tokens and rules the model could build from — what a moodboard can (and can't) encode on its own.
The build
Ingesting the moodboard to create the design direction, converting it to tokens, UI components, and finally a design.md draft. I removed the moodboard and earlier refs, then rebuilt from DESIGN.md alone — and tightened the file until short prompts stayed consistent.
Prompting Process
How I prompted from the DESIGN.md to hold the aesthetic across sections.
What held: palette, type pairing, photo-forward rhythm.
What drifted until the doc got strict: spacing and button hierarchy.
Visit the live site →
More Vibe-Coded Projects
More Vibe-Coded Projects