Code · Claude Sonnet 5.5
The website in the brief, following the skill: its pages
The website in the brief, following the skill: its pages, a shared design system, and data for each collection in Content.md, with the wired hero image. Reference (Brief.md): # Site brief - **Site:** Miradouro, a specialty coffee roaster in Lisbon that sells small-batch beans and writes a journal about roasting, brewing and the city. - **For:** Coffee lovers in Lisbon and beyond who want fresh, well-roasted beans and like to learn how to brew them better at home. - **Pages:** Home, Shop, Journal, About - **Voice:** Warm and unhurried. Short, friendly sentences that read like a barista chatting over the counter. - **Look:** Cream paper backgrounds, a serif with italics, and one terracotta accent, like a well-worn recipe card. Reference (Content.md): # Content ## Coffees Fields: name, price, origin, roast level, tasting notes, photo, description ## Journal posts Fields: title, date, cover photo, summary, body Add a collection for anything that repeats on the site. Reference (site-with-cms SKILL.md): --- name: site-with-cms description: Plans a website whose content lives in collections people can edit, with pages that read from them and a design system they share. Use for blogs, shops, portfolios, directories and any site with repeating content. --- # Site with a CMS ## Read first Brief.md for the site, its pages and its voice; Content.md for the collections and their fields; the hero image and reference wired in. ## Content - Each collection from Content.md becomes data with the fields it lists, and at least six real-sounding entries in the brief's voice. - Every entry has a slug, a title and a short summary; images get descriptive alt text. - Lists show the newest or featured entries first; each entry gets its own page from one detail template. ## Pages - Home: a hero that says what the site is, the featured entries, and one call to action. - A list page per collection, with filters if a field has a few values (a category, a tag). - A detail page per entry, from the collection's fields. - One shared design system: the type scale, colours, spacing and components every page uses. ## Look - Follow the wired reference's layout and mood without copying its brand; the brief's palette, with one accent colour. - Two typefaces at most and one type scale (e.g. 64 / 40 / 24 / 16) shared by every page; spacing on an 8 px grid. - The hero image large in the hero, never boxed small; collection pictures at one shape in a grid. ## Avoid Content typed straight into pages that should come from a collection, lorem ipsum, and pages that each invent their own style.
Meng To@shadownessguy0097- Model
- Claude Sonnet 5.5
- Made by
- Meng To
- Shared
- Likes
- 0
Use its prompt, turn it into a video or a 3D model, or find more like it in Fil. Fil is invite-only for now: without an invitation, Open in Fil shows the waitlist.
