用 Claude Code 打造代理商品质的价值 1 万美元网站

用 Claude Code 打造代理商级品质的 1 万美元网站 2026 年 7 月 20 日 · 5 分钟阅读 · 查看原文 ↗ Claude 设计 营销 自动化 代理商为一个营销网站收费 8000–12000 美元。3 周的电话。2 轮修改。1 张让你坐下来的发票。 Claude Code 一个下午就建出同一个网站。大多数人拿到的仍然是模板味十足的输出。下面是原因——以及确切的解法。 标准做法之所以失败，是因为人们敲下"给我建一个漂亮的网站"，然后祈祷。Claude 默认回到安全牌：Inter 字体、紫色渐变、3 张功能卡片。这是一个业余的网站，而你几乎拿不到任何回报。那种 1 万美元的质感来自约束，而不是感觉。 第一部分——装载设计大脑（15 分钟） Claude 的默认品味是一个 500 美元的模板：Inter 字体、紫色渐变、3 张功能卡片。Skills 能修好这一点。一个 skill 只是一个带 SKILL.md 文件的文件夹，Claude 在设计之前会先读它。 先安装 Claude Code： 打开你的终端，运行：npm install -g @anthropic-ai/claude-code 运行：claude - 用你的账号登录。 现在加入这 2 个 skill： 到 GitHub 上的 anthropics/skills 仓库，下载 frontend-design 文件夹。 拿一个 UI/UX 规则集 skill（ui-ux-pro-max 是流行的那一个，也在 GitHub 上）。 在你的项目里创建一个文件夹：.claude/skills/ 把两个 skill 文件夹都丢进去。结构看起来像：.claude/skills/frontend-design/SKILL.md 重启 Claude Code。输入 /skills，或者直接问"你有什么 skills"——两个都应该显示出来。 或者直接让 Cloud 帮你下载这些 skills——把链接发给他们就行。 把这段粘贴进 Claude Code install github. com/anthropics/skills/tree/main/skills/frontend-design install github. com/nextlevelbuilder/ui-ux-pro-max-skill 就这些。不用 API，不用配置。Claude 现在会在每一个设计决策之前先检查这些规则。 第二部分——偷方向（20 分钟） 形容词没用。"做得高级一点"什么都产出不了。截图有用。 打开 Awwwards 和 Dribbble。搜索你的细分领域："SaaS landing"、"portfolio"、"law firm"。 挑 3 个网站。不是 10 个——3 个。参考越多，模型越乱。 给每个网站截首屏（hero）、1 个内容区、以及页脚。总共 9 张截图。 把它们存进你的项目文件夹，命名为 ref-1.png、ref-2.png、ref-3.png。 在 Claude Code 里，把文件拖进去，或用路径引用它们，并加上这行原话："Match the typography scale, spacing rhythm, and motion of these references. Do not copy the layouts." "不要复制"这一部分很重要。没有它，Claude 会克隆参考 1，你会得到一个打擦边球的"山寨货"。 第三部分——构建提示词（写 5 分钟，跑 6 分钟） 一条提示词，5 个块。把括号填上： 受众："这个网站是为 [每次拍摄收费 2000 美元以上的自由摄影师] 做的。" 那 1 个动作："每个页面都推向 [预约一次通话]。一个 CTA，反复出现。" 参考："用 ref-1.png、ref-2.png、ref-3.png 作为品质标尺。" 技术栈："Astro、Tailwind，部署到 Cloudflare Pages。静态、快速、无 CMS。" 禁用清单："禁用：紫色渐变、用 emoji 当图标、用 Inter 当展示字体、图库占位图、一切居中的布局。" 把 5 个块作为 1 条消息全部粘贴过去。第一个可用版本会在 4–6 分钟内出来。 1. 受众："这个网站是为每次拍摄收费 2000 美元以上的自由摄影师做的。" 2. 那 1 个动作："每个页面都推向预约一次通话。一个 CTA，反复出现。" 3. 参考："用 ref-1.png、ref-2.png、ref-3.png 作为品质标尺。" 4. 技术栈："Astro、Tailwind，部署到 Cloudflare Pages。静态、快速、无 CMS。" 5. 禁用清单："禁用：紫色渐变、用 emoji 当图标、用 Inter 当展示字体、图库占位图、一切居中的布局。" 它会做到 70%。这是预期之内的——没人一版就交付。 第三部分之后，你就有了网站的第一个版本。 第四部分——打磨环节（1–2 小时，这才是那 1 万美元的部分） 代理商为这个阶段开掉项目 40% 的账单。按顺序跑 3 遍，作为 3 条独立消息： 第 1 遍——只做字体："审查每一个标题和正文的大小。建立一套严格的字号刻度。修好行高和字距。别的什么都别碰。" 第 2 遍——只做间距："逐区审计垂直节奏。在感觉拥挤的地方把留白加倍。别的什么都别碰。" 第 3 遍——只做动效："加上滚动显现和悬停状态。克制。200–300 毫秒。不要任何弹跳。" 为什么要分开：一次性要全部三样，Claude 会把一个维度做好、另外两个做烂。 然后是移动端检查："把每个页面在 375px 宽度下给我看一遍，修掉坏掉的地方。"你 60% 以上的流量是手机。代理商也是最后才查这个——只是他们不告诉你。 如果有任何你不喜欢的地方，让 Cloud 去修。 附上一张截图，描述你想看到的样子。 生活小技巧：想给网站加动画，你只需发一个参考网站，让他们做一个类似的东西。 第五部分——上线（15 分钟，0 美元/月） 运行：git init、commit、推到一个新的 GitHub 仓库。Claude Code 会替你完成这些，只要你开口。 去 Cloudflare Pages → 创建项目 → 连接仓库。 构建命令：npm run build。输出目录：dist。部署。 在 Cloudflare 仪表盘里加上你的域名——DNS 几分钟内生效。 网站上线。免费托管。代理商要收 150 美元/月来照看同样的东西。 现实的进阶路径：第 1 个网站要 6 小时，看起来值 3000 美元 第 3 个要 3 小时，看起来值 7000 美元 到第 5 个，你就有了一条 2 小时的流水线，和一个能以代理商价格成交客户的 portfolio。 代理商卖的是 3 周的过程。 那个过程一直只是 1 个下午。 结果： 你最终会拿到一个扎实的网站——不是完美的。 第一版总有毛边。也许移动端布局需要再弄。也许某个动画感觉不对。 这就是过程。 上线。每天找一件事去改进。重复。 这就是好网站变成优秀网站的方式。标签：# X # Claude # 设计 # 营销 # 自动化 # 增长 相关文章 如何构建一个 reddit 销售系统（完整指南） 给我搭一个 hermes agent。这是 hermes 的网站：https://nousresearch.com Reddit Claude 营销 自动化