Notebook Page Mockup (B5) - AI Prompt

Act as a notebook-layout designer. Make me a MOCKUP IMAGE (PNG) of a page for my B5 paper notebook, in the same style as my saved talking-point template. The mockup is something I will copy by hand, so it must be clear, readable and realistic about how much fits on a real B5 page.
 
MY PAGE
- Page type: [talking point / reading notes / topic index / debate prep / weekly review / OTHER]
- Topic tag (one or two words, uppercase on the page): [FILL IN]
- Entry number: [FILL IN OR LEAVE BLANK]
- Statement or subject for the page: [FILL IN — for talking points, write it in the words people actually say it]
- My position or angle: [FILL IN OR LEAVE OPEN]
- Example content: [fill it with a realistic worked example / leave the lines blank as a template]
- Anything to add, remove or change in the sections: [FILL IN OR LEAVE BLANK]
 
HOW TO BUILD IT
1. Use the reference template if you can reach it: "60 Knowledge/60.24 AI/AI Prompts/Notebook Page Mockup (B5) - AI Prompt.md" (HTML at the bottom) or "Misc/Documents/Talking Points - B5 Page Template.html" in my Obsidian vault. Start from that HTML and change the content; do not redesign from scratch unless the page type needs different sections.
2. Build it as one self-contained HTML/CSS file and render it to PNG with a headless browser (Playwright/Chromium) at device_scale_factor 2. Viewport 1640 x 1640.
3. Do not use an image-generation model; text must be crisp and exact.
 
VISUAL SPEC (match exactly)
- Canvas: 1640 x 1640 px, background #e7e3da, the page on the left and a legend column (430 px) on the right, 44 px gap, 70 px top / 56 px side padding.
- Page: B5 (176 x 250 mm) at 6 px/mm = 1056 x 1500 px, paper #fdfbf5, soft drop shadow, padding 40/46/36/46 px.
- Ruling: 7 mm lines = 42 px, drawn with a repeating-linear-gradient in #c9d3e0. All written content sits on these lines.
- Colors: ink #1f2328, pencil (handwritten content) #3a4a6b, faint labels #8a8f98, accent #9a3b2e, accent-soft #f3e3df, cue-column rule #d9a79d.
- Fonts: labels in "Carlito" (sans), uppercase, letter-spaced, faint; handwritten-style content in italic "Bitstream Charter" / "Caladea" serif in the pencil color.
- Section markers: numbered circular badges (26 px, accent fill, white number), matching numbers in the legend.
- Page furniture: accent-colored edge tab sticking out of the right edge with the topic tag written vertically; footer line "B5 · 176 × 250 mm · 7 mm ruling" left and "Index → p. 2" right.
 
SECTIONS FOR A TALKING-POINT PAGE (keep this order)
1. Header: entry number (#07 style), topic tag chip, "Rev. YYYY-MM · Used N×" on the right, then the statement in large handwritten style inside accent quote marks; thick ink rule under it.
2. Cues column (210 px, left, accent-pink vertical rule): one or two trigger words per move, aligned with the response lines.
3. Response: five labeled moves in the left margin (ACKNOWLEDGE, REFRAME, POINT, PROOF, QUESTION; label width 112 px so nothing overlaps), 80-120 words total, then a right-aligned word count and speaking time (about 150 words per minute).
4. Backup "only if pushed": two facts, each with a short source and year in small faint text.
5. "If they say … → I say …": two-column grid (THEIR COMEBACK / MY ONE-LINER), two filled rows plus one blank row.
6. Their strongest case: the opposing side's best argument in one sentence.
7. After use: "what landed · what didn't", three blank lines.
8. Links: related entry numbers and the vault note name.
 
LEGEND (right column)
- Title "Talking-point page for a B5 notebook" (or the page type), a one-line subtitle, then items 1-8, each with the number badge, a bold heading and a two-to-three-sentence explanation of how to use that section.
- End with a "Notebook setup" tip: reserve pages 1-2 as a topic index, number entries rather than pages, color-tab page edges by topic.
 
CONTENT RULES
- Every fact, statistic or quote in the example must be real and verified. Search for it, and show the source and year on the page. If you can't verify something, leave it out rather than guess.
- The response paragraph should sound spoken, not written: concede first, end on a question, no jargon.
- The steelman must be a fair version of the other side, not a straw man.
- No emojis anywhere.
 
QUALITY CHECK BEFORE DELIVERING
- Look at the rendered PNG yourself. Fix any overlapping labels, text running past a line or the page edge, text not sitting on the ruling, or a large empty band at the bottom of the page (add blank lines or a Links section instead).
- Check the legend numbers match the page numbers.
- Check that the word count and speaking time are accurate.
 
DELIVER
- Send me the PNG. If my Obsidian vault is connected, also save the PNG to "Misc/Documents/<Page Title> - B5 Page Template.png" and the HTML beside it.
- In one or two sentences, tell me what's on the page and list any facts with their sources.

from playwright.sync_api import sync_playwright
import os
with sync_playwright() as p:
    b = p.chromium.launch()
    pg = b.new_page(viewport={'width': 1640, 'height': 1640}, device_scale_factor=2)
    pg.goto('file://' + os.path.abspath('mockup.html'))
    pg.wait_for_timeout(300)
    pg.screenshot(path='mockup.png')
    b.close()

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<style>
  :root{
    --paper:#fdfbf5; --ink:#1f2328; --pencil:#3a4a6b; --rule:#c9d3e0; --faint:#8a8f98;
    --accent:#9a3b2e; --accent-soft:#f3e3df; --line:42px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:#e7e3da;font-family:"Carlito","DejaVu Sans",sans-serif;color:var(--ink);
       width:1640px;height:1640px;display:flex;gap:44px;padding:70px 56px;align-items:flex-start}
  .page{position:relative;width:1056px;height:1500px;background:var(--paper);
        box-shadow:0 18px 40px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.12);padding:40px 46px 36px 46px;
        display:flex;flex-direction:column}
  .tab{position:absolute;right:-22px;top:210px;width:22px;height:120px;background:var(--accent);
       border-radius:0 6px 6px 0;color:#fff;font-size:13px;letter-spacing:2px;writing-mode:vertical-rl;
       display:flex;align-items:center;justify-content:center;font-weight:700}
  .num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
       background:var(--accent);color:#fff;font-size:15px;font-weight:700;flex:none}
  .label{font-size:14px;letter-spacing:2.2px;text-transform:uppercase;color:var(--faint);font-weight:700;
         display:flex;align-items:center;gap:10px}
  .hand{font-family:"Bitstream Charter","Caladea",serif;font-style:italic;color:var(--pencil)}
  /* header */
  .head{border-bottom:2.5px solid var(--ink);padding-bottom:14px}
  .meta{display:flex;justify-content:space-between;align-items:center}
  .meta .left{display:flex;gap:18px;align-items:center}
  .entry{font-size:30px;font-weight:700}
  .topic{font-size:15px;letter-spacing:2px;font-weight:700;background:var(--accent-soft);color:var(--accent);
         padding:5px 12px;border-radius:4px}
  .rev{font-size:16px;color:var(--faint)}
  .statement{margin-top:12px;font-size:31px;line-height:1.2}
  .statement .q{color:var(--accent);font-family:"Caladea",serif;font-size:40px;line-height:0;vertical-align:-10px}
  /* body */
  .body{display:flex;margin-top:16px;border-bottom:1.5px solid #9aa3ad}
  .cues{width:210px;border-right:2px solid #d9a79d;padding-right:14px}
  .main{flex:1;padding-left:18px}
  .colhead{height:34px}
  .lines{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--line) - 1px),var(--rule) calc(var(--line) - 1px),var(--rule) var(--line));}
  .move{display:flex;gap:10px;font-size:21px;line-height:var(--line)}
  .move b{font-family:"Carlito",sans-serif;font-style:normal;color:var(--accent);font-size:15px;letter-spacing:1.5px;
          text-transform:uppercase;width:112px;flex:none;font-size:13.5px;letter-spacing:1.2px}
  .cue{font-size:19px;line-height:var(--line);color:var(--pencil);font-family:"Bitstream Charter",serif;font-style:italic}
  .wc{font-size:14px;color:var(--faint);text-align:right;line-height:30px}
  /* boxes */
  .sec{margin-top:18px}
  .sec .lines{margin-top:6px}
  .row{font-size:19px;line-height:var(--line)}
  .src{color:var(--faint);font-style:normal;font-family:"Carlito",sans-serif;font-size:16px}
  .grid{display:grid;grid-template-columns:1fr 1.35fr;column-gap:22px}
  .grid .h{font-size:13px;letter-spacing:2px;color:var(--faint);font-weight:700;line-height:28px}
  .blank{height:var(--line)}
  .foot{margin-top:auto;display:flex;justify-content:space-between;font-size:13px;color:var(--faint);letter-spacing:1px}
  /* legend */
  .legend{width:430px;padding-top:6px}
  .legend h1{font-size:30px;line-height:1.15;margin-bottom:6px}
  .legend .sub{font-size:17px;color:#555;margin-bottom:26px;line-height:1.4}
  .item{display:flex;gap:14px;margin-bottom:22px}
  .item h3{font-size:18px;margin-bottom:3px}
  .item p{font-size:15.5px;line-height:1.42;color:#3d4148}
  .tip{margin-top:26px;border-top:1.5px solid #bdb7aa;padding-top:16px;font-size:15px;line-height:1.45;color:#3d4148}
  .tip b{color:var(--ink)}
</style></head>
<body>
<div class="page">
  <div class="tab">HOUSING</div>
 
  <!-- 1 header -->
  <div class="head">
    <div class="meta">
      <div class="left"><span class="num">1</span><span class="entry">#07</span><span class="topic">HOUSING</span></div>
      <span class="rev">Rev. 2026-09 &nbsp;·&nbsp; Used 3×</span>
    </div>
    <div class="statement hand"><span class="q">“</span>Rent control makes housing affordable.<span class="q">”</span></div>
  </div>
 
  <!-- 2 + 3 body -->
  <div class="body">
    <div class="cues">
      <div class="colhead label"><span class="num">2</span>Cues</div>
      <div class="lines">
        <div class="cue">rents brutal</div>
        <div class="cue">&nbsp;</div>
        <div class="cue">who gets helped?</div>
        <div class="cue">&nbsp;</div>
        <div class="cue">insiders vs. newcomers</div>
        <div class="cue">SF 1994: −15%</div>
        <div class="cue">&nbsp;</div>
        <div class="cue">fewer units → cheaper?</div>
        <div class="cue">&nbsp;</div>
      </div>
    </div>
    <div class="main">
      <div class="colhead label"><span class="num">3</span>Response &nbsp;<span style="letter-spacing:0;text-transform:none;font-weight:400">acknowledge · reframe · point · proof · question</span></div>
      <div class="lines hand">
        <div class="move"><b>Acknowledge</b><span>You're right that rents in a lot of cities are brutal,</span></div>
        <div class="move"><b></b><span>and people getting priced out are really hurting.</span></div>
        <div class="move"><b>Reframe</b><span>The question is whether capping rents creates more</span></div>
        <div class="move"><b></b><span>affordable homes or protects whoever already has one.</span></div>
        <div class="move"><b>Point</b><span>It helps current tenants but shrinks the supply everyone</span></div>
        <div class="move"><b>Proof</b><span>else competes for: after San Francisco expanded it in 1994,</span></div>
        <div class="move"><b></b><span>covered landlords cut rental supply by about 15 percent.</span></div>
        <div class="move"><b>Question</b><span>If fewer apartments exist, how does that make housing</span></div>
        <div class="move"><b></b><span>cheaper for the next person looking?</span></div>
      </div>
      <div class="wc">~95 words · about 35 seconds spoken</div>
    </div>
  </div>
 
  <!-- 4 backup -->
  <div class="sec">
    <div class="label"><span class="num">4</span>Backup &nbsp;<span style="letter-spacing:0;text-transform:none;font-weight:400">only if pushed</span></div>
    <div class="lines hand">
      <div class="row">• Tenant mobility −20%; landlords' rental supply −15%. <span class="src">Diamond, McQuade &amp; Qian, AER 2019</span></div>
      <div class="row">• 36 of 40 economists polled disagreed it improved affordability. <span class="src">IGM Forum, Feb 2012</span></div>
    </div>
  </div>
 
  <!-- 5 comebacks -->
  <div class="sec">
    <div class="label"><span class="num">5</span>If they say … → I say …</div>
    <div class="grid" style="margin-top:6px">
      <div class="h">THEIR COMEBACK</div><div class="h">MY ONE-LINER</div>
    </div>
    <div class="lines hand">
      <div class="grid row"><div>“It still helps the people it covers.”</div><div>Agreed. It helps insiders and costs outsiders.</div></div>
      <div class="grid row"><div>“So what's your answer?”</div><div>Help renters directly without shrinking supply.</div></div>
      <div class="grid row"><div>&nbsp;</div><div>&nbsp;</div></div>
    </div>
  </div>
 
  <!-- 6 steelman -->
  <div class="sec">
    <div class="label"><span class="num">6</span>Their strongest case</div>
    <div class="lines hand">
      <div class="row">Stability matters: it keeps long-time residents from being displaced.</div>
    </div>
  </div>
 
  <!-- 7 debrief -->
  <div class="sec">
    <div class="label"><span class="num">7</span>After use &nbsp;<span style="letter-spacing:0;text-transform:none;font-weight:400">what landed · what didn't</span></div>
    <div class="lines"><div class="blank"></div><div class="blank"></div><div class="blank"></div></div>
  </div>
  <div class="sec">
    <div class="label"><span class="num">8</span>Links &nbsp;<span style="letter-spacing:0;text-transform:none;font-weight:400">related entries · vault note</span></div>
    <div class="lines hand"><div class="row">See #03 (zoning), #12 (minimum wage) · Vault: Rent Control - Evidence</div></div>
  </div>
 
  <div class="foot"><span>B5 · 176 × 250 mm · 7 mm ruling</span><span>Index → p. 2</span></div>
</div>
 
<div class="legend">
  <h1>Talking-point page<br>for a B5 notebook</h1>
  <div class="sub">One statement per page. Example entry shown; the layout is what to copy.</div>
 
  <div class="item"><span class="num">1</span><div><h3>Header</h3><p>Entry number, topic tag and revision date. Write the statement in the words you actually hear it, so you recognize it in conversation. The use count shows which entries earn their place.</p></div></div>
  <div class="item"><span class="num">2</span><div><h3>Cue column</h3><p>One or two trigger words per move. Cover the paragraph and rebuild it from the cues alone; that is how it moves from the page into memory.</p></div></div>
  <div class="item"><span class="num">3</span><div><h3>The response</h3><p>Five moves, 80–120 words. Concede first to lower their guard, end with a question so it stays a conversation. Write it in pencil; it gets rewritten most.</p></div></div>
  <div class="item"><span class="num">4</span><div><h3>Backup</h3><p>Two facts held in reserve, each with source and year so you can defend it and know when it goes stale.</p></div></div>
  <div class="item"><span class="num">5</span><div><h3>Comebacks</h3><p>Pre-load the two or three replies you always get. Leave a blank row for the one that surprises you.</p></div></div>
  <div class="item"><span class="num">6</span><div><h3>Steelman</h3><p>Their best case in one sentence. If you can't write it, you're not ready to answer it.</p></div></div>
  <div class="item"><span class="num">7</span><div><h3>Debrief</h3><p>After a real conversation, note what worked and revise the paragraph.</p></div></div>
  <div class="item"><span class="num">8</span><div><h3>Links</h3><p>Cross-reference related entries and the full research note in your vault, where the long-form evidence lives.</p></div></div>
 
  <div class="tip"><b>Notebook setup:</b> reserve pages 1–2 as a topic index, number entries rather than pages, and color-tab the page edges by topic so you can flip to one in seconds.</div>
</div>
</body></html>