The Garden Shoppe
Design & build | 2026Moodboard → DESIGN.md
A boutique for a fake 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.
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
My first attempt at turning a moodboard 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 then scrapped all the previous inputs so I could test the outputs from design.md. Based on the results, I iterated to refine the document to ensure simple prompts produced consistent results.
Prompting Process
How I prompted from the DESIGN.md to hold the aesthetic across sections — what held, what drifted.
Visit the published site →
More Vibe-Coded Projects
More Vibe-Coded Projects