Argument Map Page Mockup (B5) - AI Prompt

Act as a philosophy tutor and notebook-layout designer. Make me a MOCKUP IMAGE (PNG) of an ARGUMENT MAP page for my B5 paper notebook, in the same style as my saved argument-map template. The page is for understanding the argument, and I will copy it by hand, so it must be clear, readable and realistic about how much fits on a real B5 page.
 
MY PAGE
- Source note in my vault: [FILL IN, e.g. "On the Randian Argument - Robert Nozick"]
- The question the page answers, in plain words: [FILL IN OR LET YOU CHOOSE]
- Topic chip and edge tab (one word): [FILL IN, e.g. METAETHICS / ETHICS / EPISTEMOLOGY]
- Positions to compare (2 or 3): [FILL IN OR LET YOU CHOOSE FROM THE NOTE]
- Anything to add, remove or change: [FILL IN OR LEAVE BLANK]
 
HOW TO BUILD IT
1. Read the whole source note first. Reduce it to ONE argument. Do not pull in side topics or other claims from the debate or paper.
2. Start from the reference HTML at the bottom of "60 Knowledge/60.24 AI/AI Prompts/Argument Map Page Mockup (B5) - AI Prompt.md" (also at "Misc/Documents/Stance-Dependence Argument Map - B5 Page.html"). Change the content; keep the design.
3. Build one self-contained HTML/CSS file and render it to PNG with headless Chromium (Playwright) at device_scale_factor 2, viewport 1168 x 1640. Do not use an image-generation model.
 
VISUAL SPEC (match exactly)
- Canvas 1168 x 1640 px, background #e7e3da, 70 px top / 56 px side padding. The page only: no legend or key column.
- Page: B5 (176 x 250 mm) at 6 px/mm = 1056 x 1500 px, plain paper #fdfbf5 with NO ruling and NO dots, soft drop shadow, padding 40/46/30/46 px.
- Colors: ink #1f2328, pencil (handwritten content) #3a4a6b, faint labels #8a8f98, accent #9a3b2e, accent-soft #f3e3df. One color per position, used identically in the diagram, the cards and the pressure points: blue #2f5d8a, green #3d7a4f, red #9a3b2e. The disputed row of the test table is pale yellow.
- Fonts: labels in "Carlito" (sans), uppercase, letter-spaced, faint; the title in "Bitstream Charter" bold; handwritten content in italic "Bitstream Charter" / "Caladea" in the pencil color.
- Section markers: small dark square number badges (24 px). Rows on a 36 px rhythm.
- Page furniture: accent-colored edge tab with the topic written vertically; footer line with "B5 · 176 × 250 mm · plain" left and short sources right.
 
SECTIONS (keep this order)
1. Header: topic chip, "ARGUMENT MAP", revision date, the question as the title, one source line under it.
2. The argument, laid out: numbered premises in standard form (P1, P2 or S1, S2, S3), a rule, then "∴ C". A faint right-hand column gives each line's status (conceded, never stated, page numbers). One note line: is the form valid, and so where is the real fight?
3. Where each view gets off: an inline SVG diagram whose shape matches the argument. For a two-premise argument, draw a track with premise stations and colored exit arrows for each position. For a chain argument, draw a staircase with red cracks between steps and a label on each gap. Keep it simple enough to redraw by hand.
4. The hinge: a test table that runs the key concept or distinction against 3 or 4 clear cases plus one disputed row (the case the debate is actually about). Highlight the decisive column. One note line on what the table shows.
5. Positions, one line each: 2 or 3 colored cards with the name, what it does to the argument (for example "Denies P1"), one handwritten sentence, and one test case or source.
6. Terms to keep straight: 4 short definitions in two columns.
7. Pressure points: the hardest objection to each position, color-matched, with the critic's name where it helps.
8. In one line: a boxed one-sentence takeaway.
 
CONTENT RULES
- Every quote, date and page number must come from the note or be verified against the source. If you can't verify it, leave it out.
- Be fair to every position: each card should state it as its best defenders would.
- The diagram, the cards and the pressure points must agree about which premise each view rejects.
- No emojis anywhere.
 
QUALITY CHECK BEFORE DELIVERING
- Look at the rendered PNG yourself. Fix any text overflowing a box, a cell or the page edge, labels overlapping the diagram, or an empty band of more than about 60 px above the "In one line" box.
- Check that every yes/no in the test table is defensible, and that the colors match across sections.
 
DELIVER
- Send me the PNG. If my Obsidian vault is connected, save the PNG and HTML to "Misc/Documents/<Topic> - Argument Map - B5 Page.png" (and .html).
- In one or two sentences, tell me which argument the page maps and name the sources used.

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

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<style>
  :root{
    --paper:#fdfbf5; --ink:#1f2328; --pencil:#3a4a6b; --dot:#bfc7d2; --faint:#8a8f98;
    --accent:#9a3b2e; --accent-soft:#f3e3df;
    --real:#2f5d8a; --real-soft:#e3ecf5; --anti:#3d7a4f; --anti-soft:#e2efe5; --obj:#9a3b2e; --obj-soft:#f3e3df;
    --g:36px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:#e7e3da;font-family:"Carlito","DejaVu Sans",sans-serif;color:var(--ink);width:1168px;height:1640px;padding:70px 56px}
  .page{position:relative;width:1056px;height:1500px;background-color:var(--paper);
        box-shadow:0 18px 40px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.12);padding:40px 46px 30px 46px;display:flex;flex-direction:column}
  .tab{position:absolute;right:-22px;top:210px;width:22px;height:150px;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}
  .hand{font-family:"Bitstream Charter","Caladea",serif;font-style:italic;color:var(--pencil)}
  .lab{font-size:13.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--faint);font-weight:700;display:flex;align-items:center;gap:10px}
  .lab .n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;background:var(--ink);color:#fff;font-size:13px;letter-spacing:0}
  .lab .aside{letter-spacing:0;text-transform:none;font-weight:400}
  .blk{margin-top:18px}
  /* header */
  .meta{display:flex;justify-content:space-between;align-items:center}
  .chip{font-size:14px;letter-spacing:2px;font-weight:700;background:var(--accent-soft);color:var(--accent);padding:5px 12px;border-radius:4px}
  .ptype{font-size:14px;letter-spacing:2px;font-weight:700;color:var(--faint);margin-left:14px}
  .rev{font-size:15px;color:var(--faint)}
  h1{font-family:"Bitstream Charter","Caladea",serif;font-size:34px;line-height:1.15;margin-top:12px;color:var(--ink)}
  .src{font-size:15px;color:var(--faint);margin-top:4px}
  .head{border-bottom:2.5px solid var(--ink);padding-bottom:12px}
  /* argument */
  .arg{margin-top:8px;display:grid;grid-template-columns:52px 1fr 250px;row-gap:0;align-items:center}
  .arg .pn{font-weight:700;font-size:17px;color:var(--ink);line-height:var(--g)}
  .arg .pt{font-size:21px;line-height:var(--g)}
  .arg .st{font-size:14px;color:var(--faint);line-height:var(--g);text-align:right}
  .arg .bar{grid-column:1/4;border-top:2px solid var(--ink);height:0;margin:2px 0 0 0}
  .arg .c .pt, .arg .c{color:var(--ink)}
  .note{font-size:15px;color:#555;line-height:var(--g)}
  .note b{color:var(--ink)}
  /* table */
  table{border-collapse:collapse;width:100%;margin-top:8px;background:var(--paper)}
  th{font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);font-weight:700;text-align:center;padding:0 6px;height:44px;vertical-align:bottom;line-height:1.25}
  th:first-child{text-align:left}
  th.key{color:var(--accent)}
  td{height:var(--g);font-size:19px;text-align:center;border-top:1px solid #d6dbe2}
  td:first-child{text-align:left;font-family:"Bitstream Charter",serif;font-style:italic;color:var(--pencil)}
  td.y{font-weight:700;color:var(--ink)} td.no{color:#b3b8bf}
  td.q{font-size:15px;font-family:"Carlito",sans-serif;font-weight:700}
  col.keycol{background:rgba(154,59,46,.06)}
  tr.contested td{background:rgba(255,236,190,.35)}
  /* positions */
  .pos{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:16px;margin-top:10px}
  .card{border-radius:8px;padding:10px 14px 8px;border:1.5px solid}
  .card h3{font-size:13.5px;letter-spacing:2px;text-transform:uppercase;font-weight:700;line-height:24px}
  .card .rej{font-size:14px;font-weight:700;line-height:24px;margin-bottom:2px}
  .card p{font-size:17px;line-height:27px}
  .pp{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:16px;margin-top:6px}
  .pp div{font-size:16px;line-height:26px;border-left:4px solid;padding-left:10px}
  .card .ex{font-size:14.5px;font-family:"Carlito",sans-serif;font-style:normal;color:#555;margin-top:6px;line-height:20px}
  .r{border-color:var(--real);background:rgba(227,236,245,.75)} .r h3,.r .rej{color:var(--real)}
  .a{border-color:var(--anti);background:rgba(226,239,229,.75)} .a h3,.a .rej{color:var(--anti)}
  .o{border-color:var(--obj);background:rgba(243,227,223,.75)} .o h3,.o .rej{color:var(--obj)}
  /* terms */
  .terms{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;margin-top:6px}
  .term{font-size:17px;line-height:var(--g)}
  .term b{font-family:"Carlito",sans-serif;font-style:normal;color:var(--ink);font-size:16px}
  .take{margin-top:auto;border:2px solid var(--ink);border-radius:8px;padding:10px 18px;display:flex;align-items:center;gap:16px;background:rgba(253,251,245,.9)}
  .take .t{font-size:24px;color:var(--ink)}
  .foot{margin-top:12px;display:flex;justify-content:space-between;font-size:12.5px;color:var(--faint);letter-spacing:.6px}
</style></head>
<body>
<div class="page">
  <div class="tab">METAETHICS</div>
 
  <div class="head">
    <div class="meta"><div><span class="chip">METAETHICS</span><span class="ptype">ARGUMENT MAP</span></div><span class="rev">Rev. 2026-09</span></div>
    <h1>If morality depends on a stance, is it just opinion?</h1>
    <div class="src">Andrew Wilson vs. ProphetDivinityy, Eduardo’s stream (2026)</div>
  </div>
 
  <!-- 1 argument -->
  <div class="blk">
    <div class="lab"><span class="n">1</span>The argument, laid out <span class="aside">his case, in standard form</span></div>
    <div class="arg">
      <div class="pn">P1</div><div class="pt hand">Morality is stance-dependent.</div><div class="st">conceded on stream</div>
      <div class="pn">P2</div><div class="pt hand">Anything stance-dependent is arbitrary, or not a fact.</div><div class="st">never stated, never argued</div>
      <div class="bar"></div>
      <div class="pn">∴ C</div><div class="pt hand" style="color:var(--ink)">Morality is arbitrary, or not a fact.</div><div class="st">the “just your opinion” charge</div>
    </div>
    <div class="note">The form is valid: if P1 and P2 are true, C follows. <b>So the whole debate is over which premise is false.</b></div>
  </div>
 
  <!-- 2 diagram -->
  <div class="blk">
    <div class="lab"><span class="n">2</span>Where each view gets off <span class="aside">only Andrew rides to the conclusion</span></div>
    <svg width="964" height="206" viewBox="0 0 964 206" style="margin-top:4px;display:block" font-family="Carlito, sans-serif">
      <defs>
        <marker id="ar" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#1f2328"/></marker>
        <marker id="arR" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#2f5d8a"/></marker>
        <marker id="arA" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#3d7a4f"/></marker>
        <marker id="arO" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#9a3b2e"/></marker>
      </defs>
      <!-- track -->
      <line x1="40" y1="46" x2="880" y2="46" stroke="#1f2328" stroke-width="3" marker-end="url(#ar)"/>
      <g font-size="15" font-weight="700" fill="#1f2328">
        <circle cx="200" cy="46" r="17" fill="#fdfbf5" stroke="#1f2328" stroke-width="3"/><text x="200" y="51" text-anchor="middle">P1</text>
        <circle cx="520" cy="46" r="17" fill="#fdfbf5" stroke="#1f2328" stroke-width="3"/><text x="520" y="51" text-anchor="middle">P2</text>
        <rect x="858" y="26" width="66" height="40" rx="6" fill="#1f2328"/><text x="891" y="51" text-anchor="middle" fill="#fff">C</text>
      </g>
      <g font-size="14" fill="#8a8f98">
        <text x="40" y="20">START</text>
        <text x="200" y="16" text-anchor="middle">stance-dependent?</text>
        <text x="520" y="16" text-anchor="middle">so arbitrary / not a fact?</text>
        <text x="891" y="16" text-anchor="middle">just opinion</text>
      </g>
      <text x="700" y="78" font-size="14" fill="#1f2328" text-anchor="middle" font-weight="700">Andrew: yes, yes, therefore C</text>
      <!-- exits -->
      <path d="M200,64 C200,110 120,112 70,150" fill="none" stroke="#2f5d8a" stroke-width="2.5" marker-end="url(#arR)"/>
      <path d="M206,64 C220,112 300,118 330,150" fill="none" stroke="#9a3b2e" stroke-width="2.5" marker-end="url(#arO)"/>
      <path d="M520,64 C520,110 590,118 620,150" fill="none" stroke="#3d7a4f" stroke-width="2.5" marker-end="url(#arA)"/>
      <g font-size="15" font-weight="700">
        <text x="16" y="174" fill="#2f5d8a">REALIST</text>
        <text x="270" y="174" fill="#9a3b2e">OBJECTIVIST</text>
        <text x="560" y="174" fill="#3d7a4f">ANTI-REALIST</text>
      </g>
      <g font-size="14.5" fill="#3d4148">
        <text x="16" y="196">“No, it doesn’t depend on us.”</text>
        <text x="270" y="196">“Only one input does: the choice to live.”</text>
        <text x="560" y="196">“Yes, but that doesn’t make it arbitrary.”</text>
      </g>
    </svg>
  </div>
 
  <!-- 3 hinge table -->
  <div class="blk">
    <div class="lab"><span class="n">3</span>The hinge: what “stance-dependent” can mean <span class="aside">test each sense on clear cases</span></div>
    <table>
      <colgroup><col style="width:30%"><col class="keycol"><col><col><col></colgroup>
      <tr><th>Claim</th><th class="key">Made true by an attitude<br>(liking, approving)?</th><th>Needs minds<br>to exist?</th><th>Needs a mind<br>to know?</th><th>Relative to<br>a kind of thing?</th></tr>
      <tr><td>Saturn has rings.</td><td class="no">no</td><td class="no">no</td><td class="y">yes</td><td class="no">no</td></tr>
      <tr><td>Mia is in pain.</td><td class="no">no</td><td class="y">yes</td><td class="y">yes</td><td class="no">no</td></tr>
      <tr><td>Spinach is nutritious.</td><td class="no">no</td><td class="no">no</td><td class="y">yes</td><td class="y">yes</td></tr>
      <tr><td>I like mochi.</td><td class="y">yes</td><td class="y">yes</td><td class="y">yes</td><td class="no">no</td></tr>
      <tr class="contested"><td>Slavery is wrong.</td><td class="q"><span style="color:var(--real)">R: no</span> · <span style="color:var(--anti)">A: yes</span></td><td class="q" style="color:#8a8f98">disputed</td><td class="y">yes</td><td class="q"><span style="color:var(--obj)">O: yes</span></td></tr>
    </table>
    <div class="note">Every row is a fact, including “I like mochi.” P1 only sounds true in columns 2–4, and there P2 is plainly false. <b>Only column 1 is the real question.</b></div>
  </div>
 
  <!-- 4 positions -->
  <div class="blk">
    <div class="lab"><span class="n">4</span>Three answers, one line each</div>
    <div class="pos">
      <div class="card r"><h3>Realist</h3><div class="rej">Denies P1</div><p class="hand">Some moral truths hold whatever anyone thinks of them.</p><div class="ex">Test: slave codes made legal rights that were still wrong.</div></div>
      <div class="card o"><h3>Objectivist</h3><div class="rej">Denies P1 as he means it</div><p class="hand">Choose life, and what it requires is fact, like “nutritious.”</p><div class="ex">Rand: value asks “of value to whom and for what?”</div></div>
      <div class="card a"><h3>Anti-realist</h3><div class="rej">Denies P2</div><p class="hand">Resting on what we care about isn’t resting on whim.</p><div class="ex">Test: “I want my children to live” isn’t arbitrary.</div></div>
    </div>
  </div>
 
  <!-- 5 terms -->
  <div class="blk">
    <div class="lab"><span class="n">5</span>Terms to keep straight</div>
    <div class="terms hand">
      <div class="term"><b>Stance-independent</b> &nbsp;·&nbsp; true whatever anyone’s attitude toward it</div>
      <div class="term"><b>Relational</b> &nbsp;·&nbsp; true of how two things stand (taller, nutritious)</div>
      <div class="term"><b>Arbitrary</b> &nbsp;·&nbsp; held for no reason, not “held by someone”</div>
      <div class="term"><b>Equivocation</b> &nbsp;·&nbsp; one word, two senses, one argument</div>
    </div>
  </div>
 
  <!-- 6 pressure -->
  <div class="blk">
    <div class="lab"><span class="n">6</span>Pressure points <span class="aside">where each answer is hardest to hold</span></div>
    <div class="pp hand">
      <div style="border-color:var(--real)">How do we know such facts, if evolution shaped our sense of them? <span style="font-style:normal;color:#8a8f98;font-family:Carlito">Street; Mackie</span></div>
      <div style="border-color:var(--obj)">Valuing needs life, but why is life <i>the</i> ultimate value? <span style="font-style:normal;color:#8a8f98;font-family:Carlito">Nozick, 1971</span></div>
      <div style="border-color:var(--anti)">Owes an account of deep moral disagreement and of moral progress.</div>
    </div>
  </div>
 
  <div class="take">
    <div class="lab" style="color:var(--accent)">In one line</div>
    <div class="t hand">Depending on a mind is not the same as depending on an opinion.</div>
  </div>
 
  <div class="foot"><span>B5 · 176 × 250 mm · plain</span><span>Shafer-Landau, Moral Realism (2003) · Rand, The Virtue of Selfishness (1964) · Vault: Andrew Wilson vs ProphetDivinityy</span></div>
</div>
</body></html>