Prompt Details
Model
(claude-4-8-opus)
Token size
1,919
Example input
[Ratio]: 4:5
[Topic]: Deep work: focus over the theatre of looking busy
Example output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,600;1,700&family=Cormorant+Garamond:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap" rel="stylesheet"><style>*{box-sizing:border-box;margin:0;padding:0}#s1 *{box-sizing: border-box; margin: 0; padding: 0;}#s1, #s1{background: #0a0a0a;}#s1 .stage{width: 1080px; height: 1350px;
background: #F3ECDD; color: #1E2A44;
font-family: 'Source Serif 4', Georgia, serif;
position: relative; overflow: hidden;}#s1 /* full-bleed cover photo */
.cover-photo{position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
filter: sepia(0.12) saturate(0.85);
z-index: 1;}#s1 /* top-right kicker */
.kicker{position: absolute; top: 70px; right: 80px;
font-family: 'Cormorant Garamond', serif; font-weight: 600;
font-size: 28px; letter-spacing: 0.34em; text-transform: uppercase;
color: #F3ECDD; text-align: right; z-index: 10;}#s1 /* masthead title */
.masthead{position: absolute; top: 130px; left: 56px;
z-index: 10;}#s1 .masthead .l1, #s1 .masthead .l2{font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700;
font-size: 300px; line-height: 0.80; letter-spacing: -0.03em;
color: #F3ECDD; display: block;}#s1 .masthead .l2{margin-left: 120px; margin-top: -18px;}#s1 .masthead .l2 .gold{color: #B89B6A;}#s1 /* gold hairline under title */
.title-rule{position: absolute; top: 760px; left: 56px; width: 660px;
height: 1px; background: #B89B6A; z-index: 10;}#s1 /* standfirst lower-left */
.deck{position: absolute; top: 980px; left: 80px; max-width: 520px;
font-family: 'Source Serif 4', serif; font-weight: 400;
font-size: 34px; line-height: 1.45; color: #F3ECDD; text-align: left;
z-index: 10;}#s1 /* byline */
.byline{position: absolute; top: 1180px; left: 80px;
font-family: 'Cormorant Garamond', serif; font-weight: 600;
font-size: 22px; letter-spacing: 0.28em; text-transform: uppercase;
color: #F3ECDD; z-index: 10;}#s1 .byline .role{color: #B89B6A;}#s2 *{box-sizing: border-box; margin: 0; padding: 0;}#s2, #s2{background: #0a0a0a;}#s2 .stage{width: 1080px; height: 1350px;
background: #F3ECDD; color: #1E2A44;
font-family: 'Source Serif 4', Georgia, serif;
position: relative; overflow: hidden;}#s2 /* top hairline + kicker, #s2 pinned */
.top-rule{position: absolute; top: 110px; left: 72px; right: 72px;
height: 1px; background: #1E2A44;}#s2 .kicker{position: absolute; top: 150px; left: 0; right: 0;
text-align: center;
font-family: 'Cormorant Garamond', serif; font-weight: 600;
font-size: 24px; letter-spacing: 0.30em; text-transform: uppercase;
color: #1E2A44;}#s2 /* centered stack */
.stack{position: absolute; inset: 110px 72px 72px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;}#s2 .num{font-family: 'Playfair Display', serif; font-weight: 800;
font-size: 420px; line-height: 0.86; letter-spacing: -0.03em;
color: #1E2A44; text-align: center;}#s2 .num .unit{font-size: 120px; color: #B89B6A;
vertical-align: super; margin-left: 6px;}#s2 .stmt{font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600;
font-size: 76px; line-height: 1.05; color: #1E2A44;
text-align: center; margin-top: 28px;}#s2 .stmt .gold{color: #B89B6A;}#s2 .sub{font-family: 'Source Serif 4', serif; font-weight: 400;
font-size: 30px; line-height: 1.5; color: #2A2A2A;
text-align: center; max-width: 720px; margin-top: 30px;}#s2 .accent-rule{width: 120px; height: 1px; background: #B89B6A; margin-top: 44px;}#s3 *{box-sizing: border-box; margin: 0; padding: 0;}#s3, #s3{background: #0a0a0a;}#s3 .stage{width: 1080px; height: 1350px;
background: #F3ECDD; color: #1E2A44;
font-family: 'Source Serif 4', Georgia, serif;
position: relative; overflow: hidden;}#s3 .top-rule{position: absolute; top: 110px; left: 72px; right: 72px;
height: 1px; background: #1E2A44;}#s3 .kicker{position: absolute; top: 64px; left: 0; right: 0; text-align: center;
font-family: 'Cormorant Garamond', serif; font-weight: 600;
font-size: 24px; letter-spacing: 0.30em; text-transform: uppercase;
color: #1E2A44;}#s3 .photo-plate{position: absolute; top: 150px; left: 50%; transform: translateX(-50%);
width: 936px; height: 620px; border: 1px solid #1E2A44; overflow: hidden;}#s3 .photo-plate img{width: 100%; height: 100%; object-fit: cover; display: block;
filter: sepia(0.10) saturate(0.85);}#s3 .caption{position: absolute; top: 800px; left: 0; right: 0; text-align: center;
font-family: 'Cormorant Garamond', serif; font-weight: 600;
font-size: 20px; letter-spacing: 0.26em; text-transform: uppercase;
color: #B89B6A;}#s3 .stmt{position: absolute; top: 870px; left: 0; right: 0; text-align: center;
font-family: 'Playfair Display', serif; font-weight: 700;
font-size: 74px; line-height: 1.04; color: #1E2A44;}#s3 .stmt .gi{font-style: italic; color: #B89B6A;}#s3 .sub{position: absolute; top: 1130px; left: 50%; transform: translateX(-50%);
width: 820px; text-align: center;
font-family: 'Source Serif 4', serif; font-weight: 400;
font-size: 28px; line-height: 1.5; color: #2A2A2A;}#s4 *{box-sizing: border-box; margin: 0; padding: 0;}#s4, #s4{background: #0a0a0a;}#s4 .stage{width: 1080px; height: 1350px;
background: #F3ECDD; color: #1E2A44;
font-family: 'Source Serif 4', Georgia, serif;
position: relative; overflow: hidden;}#s4 .title{position: absolute; top: 150px; left: 0; right: 0; text-align: center;
font-family: 'Playfair Display', serif; font-weight: 700;
font-size: 84px; line-height: 1.0; color: #1E2A44;}#s4 .title .gold{color: #B89B6A;}#s4 .subhead{position: absolute; top: 280px; left: 0; right: 0; text-align: center;
font-family: 'Cormorant Garamond', serif; font-weight: 600;
font-size: 24px; letter-spacing: 0.18em; text-transform: uppercase;
color: #2A2A2A;}#s4 .donut-wrap{position: absolute; top: 380px; left: 50%; transform: translateX(-50%);
width: 520px; height: 520px;}#s4 .donut-wrap svg{display: block;}#s4 /* illustration in donut center (2nd required illustration, #s4 as-is on cream) */
.donut-ill{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 150px; height: 188px; object-fit: contain;
opacity: 0.92;}#s4 .legend{position: absolute; top: 950px; left: 50%; transform: translateX(-50%);
width: 560px;}#s4 .legend-row{display: flex; align-items: center;
padding: 7px 0;}#s4 .legend-row .disc{width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; margin-right: 18px;}#s4 .legend-row .cat{font-family: 'Cormorant Garamond', serif; font-weight: 600;
font-size: 34px; letter-spacing: 0.04em; text-transform: uppercase;
color: #1E2A44; flex: 1 1 auto;}#s4 .legend-row .val{font-family: 'Cormorant Garamond', serif; font-weight: 700;
font-size: 34px; color: #1E2A44; text-align: right; flex: 0 0 auto;}#s4 .source{position: absolute; bottom: 96px; left: 0; right: 0; text-align: center;
font-family: 'Source Serif 4', serif; font-style: italic; font-weight: 400;
font-size: 20px; color: #B89B6A;}#s5 *{box-sizing: border-box; margin: 0; padding: 0;}#s5, #s5{background: #0a0a0a;}#s5 .stage{width: 1080px; height: 1350px;
background: #F3ECDD; color: #1E2A44;
font-family: 'Source Serif 4', Georgia, serif;
position: relative; overflow: hidden;}#s5 .top-rule{position: absolute; top: 110px; left: 72px; right: 72px;
height: 1px; background: #1E2A44;}#s5 .dont-label{position: absolute; top: 140px; left: 50%; transform: translateX(-50%);
background: #1E2A44; color: #F3ECDD;
font-family: 'Cormorant Garamond', serif; font-weight: 700;
font-size: 30px; letter-spacing: 0.32em; text-transform: uppercase;
padding: 12px 28px;}#s5 .photo-plate{position: absolute; top: 230px; left: 50%; transform: translateX(-50%);
width: 880px; height: 560px; border: 1px solid #1E2A44; overflow: hidden;}#s5 .photo-plate img{width: 100%; height: 100%; object-fit: cover; display: block;
filter: sepia(0.12) saturate(0.85);}#s5 .strike{position: absolute; top: 230px; left: 50%; transform: translateX(-50%);
width: 880px; height: 560px; z-index: 5; pointer-events: none;}#s5 .stmt{position: absolute; top: 850px; left: 0; right: 0; text-align: center;
font-family: 'Playfair Display', serif; font-weight: 700;
font-size: 70px; line-height: 1.06; color: #1E2A44;}#s5 .stmt .gi{font-style: italic; color: #B89B6A;}#s5 .sub{position: absolute; top: 1110px; left: 50%; transform: translateX(-50%);
width: 820px; text-align: center;
font-family: 'Source Serif 4', serif; font-weight: 400;
font-size: 28px; line-height: 1.5; color: #2A2A2A;}#s5 .sub .fix{font-style: italic; color: #1E2A44;}#s6 *{box-sizing: border-box; margin: 0; padding: 0;}#s6, #s6{background: #0a0a0a;}#s6 .stage{width: 1080px; height: 1350px;
background: #14203A; color: #F3ECDD;
font-family: 'Source Serif 4', Georgia, serif;
position: relative; overflow: hidden;}#s6 .top-rule{position: absolute; top: 130px; left: 72px; right: 72px;
height: 1px; background: #F3ECDD;}#s6 .stmt{position: absolute; top: 360px; left: 0; right: 0; text-align: center;
font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700;
font-size: 132px; line-height: 1.0; letter-spacing: -0.02em;}#s6 .stmt .l1{color: #F3ECDD; display: block;}#s6 .stmt .l2{color: #B89B6A; display: block;}#s6 .stmt .l3{color: #F3ECDD; display: block;}#s6 .stmt .dot{color: #B89B6A;}#s6 .sub{position: absolute; top: 820px; left: 50%; transform: translateX(-50%);
width: 740px; text-align: center;
font-family: 'Source Serif 4', serif; font-weight: 400;
font-size: 32px; line-height: 1.5; color: #E7DEC9;}#s6 .ill{position: absolute; top: 950px; left: 50%; transform: translateX(-50%);
width: 360px; height: 450px; object-fit: contain;
filter: invert(1) sepia(0.2);}#s6 .bottom-rule{position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%);
width: 120px; height: 1px; background: #B89B6A;}#s7 *{box-sizing: border-box; margin: 0; padding: 0;}#s7, #s7{background: #0a0a0a;}#s7 .stage{width: 1080px; height: 1350px;
background: #F3ECDD; color: #1E2A44;
font-family: 'Source Serif 4', Georgia, serif;
position: relative; overflow: hidden;}#s7 .top-rule{position: absolute; top: 110px; left: 72px; right: 72px;
height: 1px; background: #1E2A44;}#s7 .kicker{position: absolute; top: 64px; left: 0; right: 0; text-align: center;
font-family: 'Cormorant Garamond', serif; font-weight: 600;
font-size: 24px; letter-spacing: 0.30em; text-transform: uppercase;
color: #1E2A44;}#s7 .photo-plate{position: absolute; top: 150px; left: 50%; transform: translateX(-50%);
width: 680px; height: 380px; border: 1px solid #1E2A44; overflow: hidden;}#s7 .photo-plate img{width: 100%; height: 100%; object-fit: cover; display: block;
filter: sepia(0.12) saturate(0.85);}#s7 .question{position: absolute; top: 580px; left: 0; right: 0; text-align: center;
font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700;
font-size: 96px; line-height: 1.0; color: #1E2A44;}#s7 .question .gold{color: #B89B6A;}#s7 .cta-bar{position: absolute; top: 920px; left: 50%; transform: translateX(-50%);
background: #1E2A44; padding: 18px 32px;
display: flex; align-items: center;}#s7 .cta-bar .label{font-family: 'Cormorant Garamond', serif; font-weight: 600;
font-size: 18px; letter-spacing: 0.30em; text-transform: uppercase;
color: #F3ECDD;}#s7 .cta-bar .divider{width: 1px; height: 40px; background: #F3ECDD; margin: 0 22px;}#s7 .cta-bar .brand{font-family: 'Playfair Display', serif; font-weight: 700;
font-size: 40px; color: #F3ECDD;}#s7 .prompt{position: absolute; top: 1060px; left: 0; right: 0; text-align: center;
font-family: 'Source Serif 4', serif; font-weight: 400;
font-size: 30px; color: #2A2A2A;}#s7 .prompt .brand{font-style: italic; color: #B89B6A;}#s7 .bottom-rule{position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%);
width: 120px; height: 1px; background: #B89B6A;}</style>
</head>
<body>
<div class="stage">
<img class="cover-photo" src="photos/placeholder.jpg" alt="A lamp-lit desk left undisturbed for hours of focused work">
<div class="kicker">Focus & Output</div>
<div class="masthead">
<span class="l1">work</span>
<span class="l2"><span class="gold">deep</span></span>
</div>
<div class="title-rule"></div>
<div class="deck">
The case for fewer hours spent well —
against the comfortable theatre of being
forever, visibly busy.
</div>
<div class="byline"><span class="role">Edited by</span> The Quiet Hour</div>
</div>
</body>
</html>
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
1
Views
CLAUDE-4-8-OPUS
Generates a 7-slide editorial broadsheet carousel: monumental navy serif on a cream stage, hairline rules, one rationed gold accent. One self-contained HTML file (cover · hero number · inline SVG chart · photo · DON’T · inverted · comment CTA) — render each slide to PNG. Pick any ratio (4:5 / 1:1 / 9:16 / 16:9).
...more
Added 1 week ago
