跳到主要内容

用 Claude 快速交付一个漂亮、前沿的网站

进阶

你可以在一次坐下的时间里，把一句话的想法变成一个已部署、确实好看的网站。诀窍不在于堆更多提示词——而在于恰当的提示词脚手架，加上一套快速的技术栈和一个紧凑的打磨循环。本页就是这份配方。

What you'll learn
  • 选对载体：用 Artifacts 即时生成应用，还是用 Claude Code 生成一个真正可部署的代码仓库
  • 用 Anthropic 的前端美学系统提示词，击败默认的“AI 平庸感”
  • 用下方的 Steps 跑一遍从想法到部署的完整工作流
  • 照搬可复制粘贴的构建与精修提示词，让它们读起来像资深产品设计师下的简报
  • 打磨排版、动效与响应式——然后部署到 Vercel、Netlify 或 GitHub Pages

先选定你的载体​

两条非常不同的快速路径，取决于你最终想要什么：

  • Claude Artifacts —— 描述一个应用，Claude 就会在聊天内部渲染出一个实时、自包含的 React/HTML 制品。零配置、可分享链接，非常适合原型、内部工具、计算器和落地页样稿。默认情况下，制品运行的是自包含逻辑；它可以通过 MCP 访问外部服务，但它不是一个属于你的代码仓库。
  • Claude Code + 一个框架 —— Claude 在你的机器上并行地搭建并编辑一个真正的代码库（Next.js / Astro / Tailwind / shadcn/ui），由你提交并部署。当你想拥有、扩展并真正交付这个东西时，就走这条路。
Pro tip
  • 先在 Artifact 里用 60 秒把外观原型做出来，然后让 Claude Code 把它重建为一个真正的 Next.js + Tailwind 代码仓库。你既能即时获得反馈，又能拿到一个可部署的代码库。
  • Claude Design（Anthropic Labs，研究预览版）增加了一块可视化画布和一套持久的设计系统，并能交接给 Claude Code——如果你常驻在设计工具里，这会很有用。

区分“出色”与“平庸”的那一件事​

在默认状态下，Claude 会收敛到社区所称的 “AI 平庸感”（AI slop）：Inter 字体、白底上的紫色渐变、三张圆角均匀的卡片。Anthropic 自家的前端美学手册直言不讳地说明了原因——而解法是明确地点名你在意的维度以及要避免的默认选项。

反平庸速查表
Term shown.
1 / 4

最高杠杆的动作，是在构建开始时粘贴 Anthropic 的 <frontend_aesthetics> 区块（或你自己的 DESIGN.md），让模型在写下第一行 CSS 之前就知道要避开什么。

反平庸系统区块（在任何 UI 构建前粘贴）

<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>

从想法到部署上线的网站​

Guided walkthrough1 of 6
  1. 在一条消息里告诉 Claude：这是个什么网站、有哪些版块、面向谁，以及一个明确命名的美学方向（例如“温暖的编辑风，像 Notion 碰上一本印刷杂志”）。含糊的简报只会产出含糊的网站。

写出读起来像资深设计师下简报的构建提示词​

以一个具体的专业角色开场，能可观地提升产出质量并降低波动。要对美学、技术栈和状态都说得很具体。

一次成型构建：一个真正的 Next.js + Tailwind + shadcn 网站

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.

即时 Artifact 原型（聊天内，零配置）

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.

精修：消灭那股平庸感

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.

让它显得“值钱”的打磨​

Pro tip
  • 排版是最便宜的升级：一款有辨识度的 Google 字体 + 标题与正文之间 3 倍以上的字号跨度，会立刻读出“经过设计”的感觉。
  • 动效：把功夫投到一个出色的瞬间（用 animation-delay 编排的加载）上，而不是十个微小的悬停效果。
  • 响应式：明确要求 Claude 处理移动端、长文本、空、加载和错误状态——它默认会跳过这些。
  • 层次感：层叠的 CSS 渐变，或一层细微的颗粒/图案，每一次都胜过纯平背景。
  • 记住 Claude 看不到自己的产出——粘贴一张截图或描述哪里不对，让精修循环得以收敛。
Watch out
  • 单说“做得漂亮一点”效果欠佳——这在提示词上等同于默认值。要点名美学方向、字体策略，以及要避免的默认选项。
  • 做真实网站时，别让一条巨型提示词一次性把所有东西都建出来；配合 DESIGN.md 逐版块进行更可控，也更省 token。
  • 把 AI 生成的营销说辞、统计数据和模板化文案都当作草稿——发布前先核实。

几分钟内部署​

  • Vercel —— 最适配 Next.js。接上 GitHub 仓库；每次推送都会自动构建并部署，且每个分支都有预览 URL。
  • Netlify —— 与框架无关，同样是 git 推送即部署的流程，且静态托管额度慷慨。
  • GitHub Pages —— 直接从仓库提供免费静态托管；搭配静态导出（Next.js 的 output: "export"，或一次 Astro 构建）即可得到一个零成本的上线网站。（本站正是这样发布的。）

接通部署

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.

自测一下​

自测一下

0/4
  1. 你想在 60 秒内拿到一个上线、可分享、零配置的原型。该选哪个载体？
  2. 按照 Anthropic 的前端美学指引，下列哪一项是要避免的、典型的“AI 平庸感”默认值？
  3. 在众多提示词/会话之间保持网站外观一致，推荐的做法是什么？
  4. Anthropic 建议把你的动效预算花在哪里，才能带来最大愉悦感？
Key takeaways
  • 选好载体：用 Artifacts 做即时原型，用 Claude Code + 框架做一个属于自己、可部署的网站。
  • 通过点名美学方向、字体策略与要避免的默认值来击败“AI 平庸感”——粘贴 Anthropic 的 frontend_aesthetics 区块。
  • 固化一份 DESIGN.md，让外观在各会话之间保持一致，就像 CLAUDE.md 之于代码那样。
  • 以资深设计师的角色来提示，逐版块构建，并要求那些被跳过的状态（移动端、加载、空、错误）。
  • 把动效预算花在一次编排好的加载上；通过 git 推送部署到 Vercel/Netlify，或以静态导出部署到 GitHub Pages。

资料来源与延伸阅读​