Prompt Details
Model
(claude-4-8-opus)
Token size
2,068
Example input
[Ratio]: 16:9
[Topic]: make
Example output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide_01</title>
<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; }
html, body { background: #0a0a0a; }
.stage {
width: 1080px; height: 1350px;
background: #F3ECDD; color: #1E2A44;
font-family: 'Source Serif 4', Georgia, serif;
position: relative; overflow: hidden;
}
/* 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;
}
/* 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;
}
/* masthead title */
.masthead {
position: absolute; top: 130px; left: 56px;
z-index: 10;
}
.masthead .l1, .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;
}
.masthead .l2 { margin-left: 120px; margin-top: -18px; }
.masthead .l2 .gold { color: #B89B6A; }
/* gold hairline under title */
.title-rule {
position: absolute; top: 760px; left: 56px; width: 660px;
height: 1px; background: #B89B6A; z-index: 10;
}
/* 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;
}
/* 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;
}
.byline .role { color: #B89B6A; }
</style>
</head>
<body>
<div class="stage">
<img class="cover-photo" src="photos/01_cover_reading_room_korkmaz.jpg" alt="">
<div class="kicker">Habits & Growth</div>
<div class="masthead">
<span class="l1">grow</span>
<span class="l2"><span class="gold">slow</span></span>
</div>
<div class="title-rule"></div>
<div class="deck">
The quiet arithmetic of getting one percent
better — repeated until small choices
become a life you recognize.
</div>
<div class="byline"><span class="role">Edited by</span> The Daily Margin</div>
</div>
</body>
</html>
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
3
Views
CLAUDE-4-8-OPUS
Broadsheet · Cream & Navy — a 7-slide editorial carousel system. Type one sentence and get clean, render-ready HTML for all 7 slides: masthead cover, hero
number, photo+statement, inline SVG donut chart, DON'T slide, inverted navy flip, and a comment-CTA. Navy + cream + gold, high-contrast serifs, no
gradients. Pick 4:5 / 1:1 / 9:16 / 16:9. Photos drop in as swappable placeholders. Works in Claude (Opus) or ChatGPT — paste into chat, render each slide
to PNG. Only [Topic] + [Ratio] to fill
...more
Added 1 week ago
