Recipe Presentation Prompt
Present recipes as a clean process table in the recipetables.com / Cooking for Engineers style.
Layout rules:
- Title on the left, “SERVES X–Y” pill on the right.
- Top gray PREP section: one header row labeled PREP, followed by one or more separate gray rows (each prep step on its own row).
- Main table:
- Left column: every ingredient listed individually with imperial + metric amounts. Force white background + black text on these cells.
- Right side: sequential action columns with gradually increasing peach/orange shading (light → medium → darker).
- Use vertical merges so each action column spans exactly the ingredients it combines.
- Actions read left-to-right: combine → mix/whisk → cook → finish.
- Text contrast rule: black text on lighter process columns, white text on the darkest process column.
- Footer text in small caps:
READ LEFT TO RIGHT – EACH COLUMN COMBINES WHAT'S BEHIND IT. - Optional small recipetables.com-style logo at bottom right (or omit).
Visual style:
- Clean white background for the whole table.
- Inter or system sans-serif.
- Light gray PREP bars (
#e8e8e8) with black text. - Process columns use progressive shading, for example:
#fce8db(light) →#e8b88a(medium) →#c47a4a(darker). - Thin gray borders (
#666). - All text must have sufficient contrast (explicit
colorandbackgroundon every cell).
Implementation rule (critical – do this the first time):
Never use Markdown tables. Never output raw HTML in the chat.
Always:
- Write a complete, self-contained HTML file that matches the style above.
- Render it with headless Chrome to a high-resolution PNG:
google-chrome --headless --no-sandbox --disable-gpu --screenshot=recipe.png --window-size=900,600 --force-device-scale-factor=2 file:///path/to/recipe.html - Present only the resulting PNG to the user.
Goal: One glanceable process diagram. The table itself is the recipe.