Prompt Lab
Developer notes
Give this to the builder you use and it returns today's store listing as a page you can ship for a plugin, an app, a template, or any single product that lives in a marketplace. Swap the product and the screenshots for your own.
Build a one-page website for a single tool sold or shared through a marketplace (a plugin, an app, a template, a workflow). Page archetype: a web-native app store listing, laid out the way a marketplace presents one product: header lockup, screenshot rail, information table, shelves of entries, developer notes, footer. Do not build a generic template; follow this structure exactly.
Ground: a saturated marigold, #F4A927, flat, with no texture except a fine diagonal hairline hatch (1px lines of the ink colour at 9 percent, repeating every 9px at 45 degrees) confined to the header band. Cards and panels are warm cream #FFF3DC with a 1px hairline border at 14 percent ink and 16px radius; a second cream #FBE9C8 for inset notes and tags. Ink is deep indigo #1B1A2F, secondary text #3A3850, small labels dark ochre #5A3C0E. The one cool colour is cobalt #1531A6, used only for the primary button, links, and link hover (#0E2382); italic prose uses a softer #3C4E8C. One coral dot #E4573D inside the app icon. No gradients, no glow, no white.
Type: Zilla Slab 700 for the headline (62px desktop, line-height 1.04, tracking -0.012em), section titles, and entry titles; Public Sans 400 for all body prose at 19px with line-height 1.7 in a 68ch measure; IBM Plex Mono 400 and 500 for the version tag, dates, labels, captions' small heads, and the notes block. The logic: a sturdy slab for the product name and shelf titles against a plain humanist sans for reading, the way a store sets its titles heavy and its descriptions quiet.
Top bar: brand left, three text links right with a 2px underline on hover. Hairline below.
Header band (full width, hatched): a three-column grid of a 128px app icon (ink rounded square, 28px radius, one drawn mark inside, the page's only shadow), a title block, and a primary button. Title block: a filled ink version tag in mono uppercase (for example No. 134) beside a one-line developer sentence in 15.5px, then the headline at 20ch max width, then a 21px deck at 62ch. The button is one real link in cobalt with white text, 9px radius, a small arrow icon. Nothing else in the header.
Screenshot rail: a heading row (24px slab title left, a short 15px instruction right), then a flex row of three to five figures at 560px wide (84vw on phones) in a horizontally scrolling container with scroll-snap-type x mandatory, scroll-snap-align start on each figure, scroll-padding-inline equal to the page margin, a thin visible scrollbar, a focus stop with a label, and the row bleeding past the container edge. Each figure: a cream frame with 10px padding and 14px radius around a 3:2 image with aspect-ratio set, and a caption below with a mono uppercase small head and one sentence of real content. Images must be real or generated art with no readable text.
Information table: a cream panel with a heading row (title left, mono label Information right), then a definition list in a 180px plus 1fr grid where each row is a mono uppercase label and a value separated by hairlines: the idiom name in 28px slab, an italic one-line summary, a short paragraph, and a row of mono tags on the second cream.
Shelves: each section opens with a shelf header: a mono kicker over a 32px slab title on the left, a small See sources link on the right, and a 2px ink rule under both. Below it a cream panel with no top border holding one or more entries separated by hairlines. Each entry: a 23px slab title, a mono date line, one to three paragraphs, and optionally a Why it matters note on the second cream with a mono head.
Design note: a cream panel in a 1fr plus 320px grid, text left with a mono kicker and 30px title, a square image right with a caption.
Developer notes (prompt or code block): a full-width ink panel with cream text, a heading row with the title and a mono label, an intro paragraph, the pre block at 14.5px mono on a slightly lighter ink #25243B, and a Works in line of links.
Footer: a three-cell previous, index, next row between hairlines, then a short colophon in 15.5px.
Guardrails: body text never below 18px; line-height at least 1.6; small labels at least 12.5px and WCAG AA against their actual surface; no justified text; radius 5 to 16px, nothing pill-shaped; one shadow only, on the icon; no accent left-border stripes; no fake toggles, ratings, search fields, or carousel dots; hover and focus states on every link at about 150ms; a prefers-reduced-motion guard; semantic landmarks and no skipped heading levels.
