如果你直接丢一句话给 Claude让它帮你生成一个网页那么大概率你最后拿到的会是一个“能用但也就只是能用”的结果。比如你只给它这样一条提示Code a landing page of a SaaS service called Roxy that offers security solution for small business你会发现这种页面确实能完成基础功能结构完整信息也算齐甚至第一眼看上去还挺像那么回事。可问题也很明显——它太普通了普通到几乎一眼就能看出那股“AI自动生成”的味道。它不难看但也绝对谈不上出彩更别说让人记住。但这种局面完全可以避免。只要方法对Claude 不仅能写出更精致、更成熟的网页还能把那种模板感、拼装感、流水线感明显压低。做出来的设计也会更难被人一眼贴上“这是 AI 搞出来的”标签。下面这 5 个办法基本就是我验证过、而且确实有效的做法。1. 先写 CLAUDE.md当你准备开始一个新的网页项目时第一件事不是让 Claude 立刻写页面而是先创建一个CLAUDE.md文件。原因很简单CLAUDE.md往往是 Claude 在项目中最先读取的文件。它决定了 Claude 对这个项目的“第一印象”也决定了它后续做设计、写代码时会沿着什么方向理解你的需求。所以这个文件不能只是随便写两句说明而应该尽可能完整地覆盖项目背景。比如项目目标是什么、要服务谁、打算用什么技术栈、设计风格偏向什么、哪些事情绝对不能做……这些都应该提前交代清楚。如果你想让最终网页别再透着那种廉价的通用模板味那么CLAUDE.md里至少要把下面这些内容想明白、写进去。1明确要求它优先使用frontend-designskillClaude 有一套内建机制叫 Skills。你可以把它理解成针对特定任务场景的一组强化指令。Claude 在接到任务后通常会先查看自己有没有合适的 skill再决定如何执行。而在网页设计、前端生成这件事上我们最想要的显然是 Claude 在前端编码方面尽可能“进入状态”。所以最直接的做法就是明确要求它调用专门的前端设计 skill也就是frontend-design。你可以在CLAUDE.md里直接写## DO THIS FIRST **Invoke frontend-design skill before generating any code.** Do it every time you want to code front-end. In every session. Never skip this step.这段话的重点不只是“告诉它用这个 skill”而是把它写成强约束每一次、每一个 session、永远不要跳过。因为只要你不写死它就很容易回到那种默认、宽泛、通用的生成模式里。有几点顺手提醒一下首先你得确认自己的 Claude 里已经安装了frontend-design。你可以直接问它show me what skills you have如果它给你的列表里没有frontend-design那就执行下面这条命令来安装/plugin install frontend-designclaude-code-plugins这个命令会把frontend-design全局安装到系统里也就是说不只是当前项目之后所有项目都能调用它。当然也要知道什么时候该用官方现成的frontend-design什么时候才值得自己再造一个前端设计 skill。大多数时候官方这个已经够用了覆盖 95% 的常规需求问题不大。只有当你的视觉系统极其特殊或者你要求 Claude 在所有网页里都稳定执行某些独有的品牌规则时才有必要考虑自定义 skill。不过说实话即便是这种情况很多时候你也不一定真要额外造 skill。只要在CLAUDE.md里把定制约束写明白往往也够了。2. 把视觉参考图放进项目目录别只靠嘴说风格要给它“看样板”在前端设计这件事上视觉参考的作用比很多人想象中都更大。你可以自己截一些真实网页的截图作为灵感来源也可以去 Behance、Dribbble 这类网站上挑那些你觉得做得很成熟、很顺眼的设计概念把它们保存下来。关键不是“参考图多不多”而是你要把这些图真正变成 Claude 能读取、能对照、能执行的上下文。最直接的做法就是在项目里专门建一个目录。比如我自己习惯叫它web_design_references然后在CLAUDE.md里把使用规则写清楚。比如可以写成这样## Visual references - The folder web_design_references contains visual references I want you to use when creating web pages - If you see images in this folder: match layout structure, colors, spacing, typography choices from the provided examples when coding our web page. - If no reference images are provided: design from scratch, following the rules provided below in the ‘Anti-Generic Design Guardrails’ section - When you finish coding the page, capture a page screenshot of the page you’ve generated and compare it against the references provided in the folder web_design_references. Find and fix any mismatches. Do at least two rounds of comparison and fix. Keep all screenshots you capture in the folder screenshots这里最重要的不只是“参考这些图”而是要明确告诉它去对齐这些图的布局结构、色彩关系、留白方式、字体选择。这样Claude 在做设计时就不会只围绕文字提示胡乱发挥而是会努力向某种具体的视觉结果靠近。不过有个经验很值得强调参考图别贪多。尽量不要超过 2 张理想状态下甚至只给 1 张。因为参考图一多Claude 反而更容易“平均化理解”——最后把几种风格拼在一起做成一个谁都不像、但看起来更像 AI 混出来的页面。参考越少它越容易对照也越容易做视觉校准。3. 一定要用 screenshot loop别只让它生成还要让它自己审自己这一招特别关键也是很多人忽略的地方。在上一部分的规则里其实已经埋了这个动作当 Claude 完成页面后不是马上结束而是要求它先截图再拿截图去和参考图比较发现不一致的地方再继续改。这个动作本质上就是 screenshot loop。你可以把它理解成一种“自我视觉复检机制”。具体指令可以像这样写- When you finish coding the page, capture page screenshot of the page youve generated and compare it against references provided in the folder web_design_references. Find and fix any mismatches. Do at least two rounds of comparison and fix. Keep all screenshots you capture in png format in the the folder screenshots这套方法的价值在于它能明显减少你手动来回改页面的次数。原本的流程通常是Claude 先生成一版你看着不满意再告诉它这里太普通、那里不够高级、留白不对、配色太俗、排版太散。改一轮后再继续看再继续提。整个过程很容易陷入没完没了的人工拉扯。而 screenshot loop 的思路是把视觉审查的一部分提前交给 Claude 自己去做。它先产出再截图再对照再修正如此反复几轮最后交到你手上的版本通常会成熟得多。另外别忘了让它把每一轮截图都保存在项目里的单独文件夹中。比如screenshots这样做有两个好处其一你可以回头检查它到底是怎么一步步调整的其二如果某一轮改得反而更差你也能比较容易让它回退到之前更合适的状态。很多时候网页从“普通”到“顺眼”差的恰恰不是从 0 到 1 的生成能力而是从 1 到 1.5 的那几轮细修。而 screenshot loop恰好就是帮你把这几轮细修制度化。4. 填写“反通用设计准则”部分如果你真想尽可能压掉网页里的通用感、模板感和默认风格那就一定要单独写一个“反泛化设计护栏”部分。之所以叫 Guardrails是因为它本质上是在给 Claude 立规矩哪些东西不能碰哪些廉价套路不能再出现哪些默认写法一旦用了页面就会立刻变得很像 AI 拼出来的。这里的内容最好结合你的技术栈来写。比如我自己做网页常用的是 React Tailwind CSS所以我列出来的这些规则主要就是针对 React/Tailwind 项目里最常见的“审美事故”。可以直接写成这样## Anti-Generic Design Guardrails - **Colors:** Never use default Tailwind palette (blue-500, indigo-600, etc.). Always define and use custom design tokens from tailwind.config (e.g. brand.primary). Avoid raw hex values in JSX. - **Typography:** Never use a single font (font-sans) everywhere. Pair fonts intentionally (font-display for headings, font-body for text). Apply tight tracking (tracking-[-0.03em]) for headings and generous line-height (leading-[1.7]) for body text. - **Shadows:** Never use default utilities like shadow-md or shadow-lg. Use layered, color-tinted shadows defined in the theme. - **Gradients backgrounds:** Avoid flat fills (bg-white, bg-gray-100). Use layered gradients, overlays, or subtle textures. Prefer custom gradients via arbitrary values instead of Tailwind presets. - **Animations:** Never use transition-all. Only animate transform and opacity. Use explicit utilities (transition-transform, transition-opacity) and controlled durations. Prefer spring-like motion when using animation libraries. - **Component styling:** Avoid long, unstructured className strings in JSX. Extract reusable components and variants. Use composition patterns (clsx, cva) instead of duplicating styles. - **Interactive states:** Every interactive element must include hover, focus-visible, and active states. No exceptions. - **Images:** Never use raw images without treatment. Always add overlays (e.g. gradient), blending, or color tint to integrate them into the design. - **Spacing layout:** Avoid inconsistent spacing. Use a consistent spacing scale (px-6, py-12, gap-4). Prefer grid-based layouts over ad-hoc stacking. - **Anti-patterns:** Avoid generic UI patterns like bg-white shadow-md rounded-lg, default Tailwind look, missing states, or flat, depth-less layouts.这一段看上去像是在写工程规范但它真正解决的其实是设计同质化问题。因为大量 AI 生成网页之所以一眼“很 AI”恰恰就是因为它们总会滑向那些最常见、最保险、也最无聊的组合白底、圆角、浅阴影、蓝色按钮、一套系统字体、上中下三段式布局再加一些没什么节制的 Tailwind 默认样式。功能上没毛病视觉上却毫无辨识度。而有了这段 GuardrailsClaude 至少会被强迫绕开这些最常见的廉价捷径。它不一定立刻就能做出惊艳设计但至少首先不会再那么像批量产出的模板货。5. 单独准备品牌资产目录风格不能只靠“感觉”要靠资产把它钉住每个品牌都有自己的视觉语言。所以当你把CLAUDE.md基本写完之后下一步就应该把品牌相关的核心资产也一并塞进项目里。因为只有这样Claude 才不至于每次都按“通用 SaaS 审美”来猜你的品牌应该长什么样。这些品牌资产可以包括很多内容logo、品牌色板、字体规则、图标风格、语气和文案风格指南等等。凡是你希望 Claude 在设计时真正参考的都应该让它有地方可读。我一般会单独建一个目录比如my_brand_assets有了这些资产之后你就可以用两种方式把它们喂给 Claude。第一种是在CLAUDE.md里直接引用这个目录。比如你可以专门写一个 Visual Style 部分明确规定 Claude 该怎么调用这些品牌素材## Vistyle Style When you need company logo for web page use my_brand_assets/roxy_logo.png第二种则是在你和 Claude 的具体交互里直接把这些资产带进上下文。比如你在让它细化某个页面 section或者改某个组件时可以直接在提示里点名这些文件让它按照品牌资产来调整。这种做法特别适合局部优化。比如主页 hero 区要更像品牌或者 CTA 按钮想更贴近现有视觉体系这时候直接引用资产往往比写一大段抽象描述更有效。把这 5 个办法真正用起来网页会发生什么变化现在我们就把上面这 5 个办法真正落到一个 landing page 项目里。这一次还是用同样的需求不改题目不换任务Code a landing page of a SaaS service called Roxy that offers security solution for small business在展示 Claude 最终生成结果之前我先把整个项目结构和最后版CLAUDE.md的内容准备好方便你对照参考。接着我依旧使用同一条 prompt让 Claude 去写这个页面。先来看它在没有启用 screenshot loop的情况下给出的结果这一版其实已经明显比文章开头那个“纯文字提示直接生成”的版本强不少了。因为这次它已经启用了frontend-designskill也参考了我给出的 style guide 和视觉参考图所以整体结构、风格一致性、细节感都会更像一个认真设计过的页面。但即便如此它仍然还是有点“太普通”。说白了就是你能感觉到它在努力往好看靠可最终还是停在了一个很安全、很泛化的位置上。它比最差那版好很多却还没有真正脱离“AI味”。然后Claude 开始执行 screenshot loop。也就是生成页面、截图、和参考图比较、找差异、继续修再截图、再比较、再修。到了第二版效果就明显不一样了。至少在我看来这一版已经顺眼得多。它不只是“完成了任务”而是真正开始往更细腻、更成熟、更像设计师做过一轮视觉收敛的方向靠近。最后很多人以为Claude 生成网页总是很普通是因为它设计能力不行。但我越来越觉得问题不完全在这里。更准确地说Claude 不是做不出更好的设计而是如果你不给它足够清晰的环境、规则、参考和反馈机制它就会天然滑向那个最安全、最保守、最像平均值的结果。因为那样最稳也最不容易“犯错”。可稳定往往也意味着平庸。所以如果你想让 Claude 真正做出不那么“像 AI”的网页靠的不是一句更玄的 prompt而是把整个上下文搭好先用CLAUDE.md定框架再用 skill 拉高起点用参考图给方向用 screenshot loop 逼它细修用 guardrails 掐掉廉价套路再用品牌资产把页面气质钉住。当这些东西同时到位之后Claude 做出来的网页才更有可能摆脱那种“看起来像对了但又哪里都不够对”的尴尬感。最后精通 React 面试从零到中高级CSS终极指南Vue 设计模式实战指南20个前端开发者必备的响应式布局深入React:从基础到最佳实践完整攻略python 技巧精讲React Hook 深入浅出CSS技巧与案例详解vue2与vue3技巧合集全栈AI·探索涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏案例驱动实战学习点击二维码了解更多详情。