Promptify logoPromptify
← All guides

Worked example

Website theme grab, written out in full

This page shows what a website theme grab actually produces, using a fictional but realistic B2B scheduling product as the source. Everything below is text you can read without running the tool — the layout order, the palette, the type scale, and the finished prompt.

What the tool reads from a page

A theme grab is not a screenshot description. The analysis reads the page's HTML in document order, resolves the CSS custom properties the site declares, samples the colours that are actually painted rather than the ones merely defined, and — in layout and both modes — compares that reading against a full-page rendering so section order matches what a visitor sees.

Three modes

Layout returns structure only: the blocks, their order, and how each one is composed. Theme returns the design system: colour roles, typography, spacing, radius, borders and component styling. Both merges them into a single build brief, which is what most people want.

Step 1 — the layout reading

Blocks come back in document order, never reordered by importance:

  1. Sticky header, 64px tall: wordmark left, four text links centre, one filled button right.
  2. Hero: left column with a two-line headline, one supporting sentence and two buttons; right column with a product screenshot on a soft shadow.
  3. Logo strip: five greyscale customer marks on one row, centred.
  4. Feature row: three equal cards, hairline borders, small line icon above each heading.
  5. Split section: full-bleed dark band, image left, three-item checklist right.
  6. Testimonial: single centred quote, author name and role beneath.
  7. Pricing: two columns, the second visually promoted with a border and a badge.
  8. FAQ: six collapsed accordion rows on a narrow measure.
  9. Closing call to action: one line of copy, one button, centred.
  10. Footer: four columns of links plus a legal row.

Step 2 — the theme reading

Colour roles

Every value is assigned a job, which is what stops a rebuild drifting: page background #FAFAFA, surface #FFFFFF, primary text #111111, secondary text #4B5563, hairline border #E5E7EB, single accent #1F6FEB, dark band #0B1220. No gradients, one accent only.

Typography

One grotesque family across the page. Display 52px/1.1 semibold, section heading 28px/1.3 semibold, card heading 18px/1.4 medium, body 16px/1.6 regular, caption 13px/1.5 in secondary text. Letter-spacing tightens slightly at display size only.

Spacing and components

88px vertical rhythm between sections, 24px card padding, 10px radius, 1px hairline borders, buttons 40px tall with 16px horizontal padding, and one shadow used only on the hero panel.

Step 3 — the finished prompt

Both mode output

Create a desktop landing page based on the following guidelines. Sections in order: sticky 64px header (wordmark, four links, one filled button); hero with a two-line left-aligned headline, one supporting sentence, primary and secondary buttons, and a product screenshot panel on the right; a centred strip of five greyscale logos; a three-column feature row with hairline-bordered cards and small line icons above each heading; a full-bleed dark band with an image left and a three-item checklist right; a single centred testimonial with author and role; a two-column pricing block with the second column promoted by a border and a badge; a six-row collapsed FAQ accordion on a narrow measure; a centred closing call to action with one line of copy and one button; a four-column footer with a legal row. Type: one grotesque family — display 52px at 1.1 semibold, section headings 28px at 1.3, card headings 18px at 1.4, body 16px at 1.6, captions 13px. Palette: #FAFAFA page, #FFFFFF surfaces, #111111 primary text, #4B5563 secondary text, #E5E7EB hairline borders, #0B1220 dark band, single #1F6FEB accent used for the primary button and links only. 88px vertical rhythm, 24px card padding, 10px radius, 40px buttons, one soft shadow on the hero panel only. No gradients, no decorative illustration, no second accent colour.

How to adapt it

Change one variable at a time. Removing the dark band lightens the whole page. Raising the rhythm from 88px to 120px reads as more premium. Swapping the grotesque for a serif display with the same scale turns a SaaS page into an editorial one without touching the layout. The list of sections is the part you should keep intact — it is the reason the rebuild resembles the source.

When you are ready, run a real page through the website theme grab, or read the poster grab example next.