본문으로 건너뛰기

Ship a Beautiful, Cutting-Edge Site Fast with Claude

중급

You can go from a one-line idea to a deployed, genuinely good-looking site in a single sitting. The trick isn't more prompts — it's the right prompt scaffolding plus a fast stack and a tight polish loop. This page is the recipe.

What you'll learn
  • Pick the right surface: Artifacts for instant apps vs. Claude Code for a real, deployable repo
  • Beat the 'AI slop' default with Anthropic's frontend-aesthetics system prompt
  • Run a from-idea-to-deployed workflow with the Steps below
  • Steal copy-paste build and refine prompts that read like a senior product designer briefed them
  • Polish typography, motion, and responsiveness — then deploy to Vercel, Netlify, or GitHub Pages

Pick your surface first​

Two very different fast paths, depending on what you want at the end:

  • Claude Artifacts — describe an app and Claude renders a live, self-contained React/HTML artifact inside the chat. Zero setup, shareable link, perfect for prototypes, internal tools, calculators, and landing-page mockups. By default an artifact runs self-contained logic; it can reach external services through MCP, but it isn't a repo you own.
  • Claude Code + a framework — Claude scaffolds and edits a real codebase (Next.js / Astro / Tailwind / shadcn/ui) on your machine, in parallel, that you commit and deploy. This is the path when you want to own, extend, and ship the thing.
Pro tip
  • Prototype the look in an Artifact in 60 seconds, then tell Claude Code to rebuild it as a real Next.js + Tailwind repo. You get instant feedback AND a deployable codebase.
  • Claude Design (Anthropic Labs, research preview) adds a visual canvas and a persistent design system, with a handoff into Claude Code — useful if you live in a design tool.

The one thing that separates great from generic​

Left to its defaults, Claude converges on what the community calls "AI slop": Inter font, a purple gradient on white, three evenly-rounded cards. Anthropic's own frontend-aesthetics cookbook is blunt about why — and the fix is to explicitly name the dimensions you care about and the defaults to avoid.

Anti-slop cheatsheet
Term shown.
1 / 4

The highest-leverage move is to paste Anthropic's <frontend_aesthetics> block (or your own DESIGN.md) at the start of a build so the model knows what to avoid before it writes a line of CSS.

Anti-slop system block (paste before any UI build)

<frontend_aesthetics>
You converge toward generic, "on-distribution" output — the "AI slop" aesthetic. Avoid it.
Typography: choose a distinctive, beautiful font (NOT Inter/Roboto/Arial). Use it decisively.
Color & theme: commit to ONE cohesive aesthetic via CSS variables; dominant colors + sharp accents, not a timid even palette. No purple-gradient-on-white.
Motion: prioritize one orchestrated page-load with staggered reveals over scattered micro-interactions. CSS-only for HTML; Motion for React.
Backgrounds: build atmosphere/depth with layered gradients or patterns — never a flat solid.
Make unexpected, context-specific choices. Think outside the box.
</frontend_aesthetics>

From idea to deployed site​

Guided walkthrough1 of 6
  1. In one message give Claude: what the site is, the sections, the audience, and ONE named aesthetic direction (e.g. 'warm editorial, like Notion meets a print magazine'). Vague briefs produce vague sites.

Build prompts that read like a senior designer briefed them​

Opening with a specific professional role measurably raises output quality and cuts variance. Be concrete about the aesthetic, the stack, and the states.

One-shot build: a real Next.js + Tailwind + shadcn site

You are a senior product designer + frontend engineer.
Build a Next.js (App Router) + Tailwind + shadcn/ui marketing site for <PRODUCT>.
Aesthetic: <ONE named direction, e.g. "editorial minimalism, Linear/Stripe energy">.
Typography: one distinctive display face + one mono/sans for body — NOT Inter.
Sections: hero, social proof, 3 feature blocks, pricing, FAQ, footer.
Requirements: fully responsive (mobile-first), dark mode, one orchestrated
page-load animation with staggered reveals, accessible (WCAG AA contrast).
Write DESIGN.md first with the color/type/spacing tokens, then build.
Scaffold files in parallel; show me the tree, then implement.

Instant Artifact prototype (chat, no setup)

Create an interactive Artifact: a single-page landing for <IDEA>.
Make it genuinely beautiful, not generic AI slop — distinctive font (not Inter),
a committed color theme via CSS variables, layered gradient background,
and a staggered fade-in on load. Mobile-responsive. Self-contained HTML/React.

Refine: kill the generic feel

Critique this UI as a senior product designer and list the 5 "AI default"
fingerprints it still has (font, spacing, color, layout cliché, motion).
Then redesign it around ONE bold aesthetic choice. Increase type contrast
(weight + size extremes), commit to a dominant color with a sharp accent,
and replace scattered hover effects with one orchestrated entrance.

Polish that makes it look expensive​

Pro tip
  • Typography is the cheapest upgrade: a distinctive Google Font + a 3x+ size jump between display and body instantly reads 'designed'.
  • Motion: invest in ONE great moment (an orchestrated load with animation-delay) rather than ten tiny hovers.
  • Responsiveness: explicitly ask Claude to handle mobile, long text, empty, loading and error states — it skips these by default.
  • Depth: layered CSS gradients or a subtle grain/pattern beat a flat background every time.
  • Remember Claude can't see its own output — paste a screenshot or describe what's wrong so the refine loop converges.
Watch out
  • 'Make it beautiful' alone underperforms — it's the prompt equivalent of the default. Name the aesthetic, the font policy, and the defaults to avoid instead.
  • Don't let one giant prompt build everything in one shot for a real site; section-by-section with a DESIGN.md is more controllable and uses tokens better.
  • Treat AI-generated marketing claims, stats, and stock copy as drafts — verify before you publish.

Deploy in minutes​

  • Vercel — best fit for Next.js. Connect the GitHub repo; every push auto-builds and deploys with preview URLs per branch.
  • Netlify — framework-agnostic, same git-push-to-deploy flow, generous static hosting.
  • GitHub Pages — free static hosting straight from the repo; pair it with a static export (Next.js output: "export", or an Astro build) for a zero-cost live site. (This very site is published this way.)

Wire up deployment

Set up this repo for deployment:
1. Add a sensible .gitignore and a README with run/build/deploy steps.
2. Configure a production build (static export if targeting GitHub Pages).
3. Give me the exact steps to connect Vercel (or Netlify) for auto-deploy on push,
 and a GitHub Actions workflow as a fallback. Don't commit any secrets.

Check yourself​

Check yourself

0/4
  1. You want a live, shareable prototype in 60 seconds with zero setup. Which surface?
  2. Per Anthropic's frontend-aesthetics guidance, which is a tell-tale 'AI slop' default to avoid?
  3. What is the recommended way to keep a site's look consistent across many prompts/sessions?
  4. Where does Anthropic suggest spending your motion budget for maximum delight?
Key takeaways
  • Choose the surface: Artifacts for instant prototypes, Claude Code + framework for an owned, deployable site.
  • Beat 'AI slop' by naming the aesthetic, the font policy, and the defaults to avoid — paste Anthropic's frontend_aesthetics block.
  • Persist a DESIGN.md so the look stays consistent across sessions, just like CLAUDE.md does for code.
  • Role-prompt as a senior designer, build section-by-section, and demand the skipped states (mobile, loading, empty, error).
  • Spend motion budget on one orchestrated load; deploy via git-push to Vercel/Netlify or a static export to GitHub Pages.

Sources & further reading​