AI · no-code · aesthetic
Build a pretty "morning dashboard" web page with Claude (no coding)
The exact prompt that gets Claude to build a gorgeous pink daily-brief page — one file, all fake data, made to look luxe in a slow scroll.
Okay, real talk: you know that gorgeous pink "morning dashboard" you've seen float across your feed — the one with the weather, the little to-do list, the inbox, all sitting on soft candy stripes? You don't need an app for that, and you definitely don't need to know how to code. It's just one HTML file, and Claude will build the whole thing for you. It's honestly the perfect first "I made a web page" moment.
Quick thing to know: this version uses all FAKE data — invented names, made-up meetings, pretend emails. That's on purpose. It means it's safe to share, safe to film, and safe to remix into your own aesthetic without exposing anything real. Below is exactly how I think about building one, plus the copy-paste prompt that does the heavy lifting.
The morning dashboard prompt
Paste this into Claude or ChatGPT Build me a single self-contained HTML file (all CSS inline in the file, no external resources except Google Fonts) — a personal "morning dashboard" web page. It must look premium and feminine, and be TALL enough to scroll through slowly (a screen recording will scroll it). All data must be FAKE — invented names, companies and numbers — nothing real. Do not include any real person, client, or company name. THE LOOK (exact): - Background: soft [COLOR] vertical candy stripes (very subtle, two close-value hex shades alternating), generous whitespace, max content width ~1150px centered. - Typography: elegant high-contrast serif for headings (Cormorant Garamond, weights 600/700 + italic) and a clean sans (Inter) for body text. - Palette: cream card surfaces, a deep accent color, a soft/lighter version of that accent, a warm gold accent, a pale chip color, and a sage green for positive pills. Rounded corners (18px), soft accent-tinted shadows. No harsh colors. SECTIONS, top to bottom: 1. Header: "Good morning," on one line, "[YOUR NAME]." Below it in italic serif — big (~56px). Top-right: a small dark chip in letterspaced small caps with the date. 2. Weather card: deep accent-colored card, white serif text with the city, temp, condition, and one advice line. 3. "Your day" card (cream): a status pill top-right (e.g. "NO MEETINGS"); 3 calendar rows with times and fake events. 4. "To-do list" card: 6 rows, each with a round checkbox, task text, and a pill tag on some rows (priority / deadline / quick-win colors). Invent 6 fake tasks. 5. "Inbox highlights" card: 4 fake email rows — sender name, bold subject, one-line preview, small time stamp, a "REPLY" pill on two of them. Invent fake senders and companies. 6. "[Chat app]" card: 3 fake DM rows with colored avatar dots, name, message preview. 7. "Notes & ideas" card: 3 short bullet ideas. 8. Footer line, centered, small italic serif, with a tiny gold accent symbol. DETAILS: every card has a small letterspaced small-caps label above it in the soft accent color. Add a subtle gold accent symbol next to two or three headings. Rows have generous padding and thin dividers. The page should total roughly 3–4 viewport-heights tall so scrolling it looks luxurious. No JavaScript needed. Output ONE complete HTML file I can save and open in Chrome.
How to use it
Copy the whole prompt above and paste it into Claude (it's the best at building these little html pages).
Fill in the three brackets: [color] for your palette (or just describe it — "sage green and terracotta instead of pink and berry"), [your name], and [chat app]. That's the whole setup.
Claude will hand you one block of code. Copy all of it, paste it into a plain text file, and save it as dashboard.html — then double-click to open it in your browser. That's your page.
Don't love something? Just tell Claude in plain words: 'make the stripes softer,' 'add a water tracker card,' 'more gold.' It'll hand you a fresh file. Keep going until it's yours.
To film it, open the file and do a slow screen-record scroll from top to bottom — the tall layout is built exactly for that.