最近在尝试用 Claude 快速搭建产品展示页时发现一个很明显的分水岭同样一句“帮我做一个落地页”有人得到的是一堆带默认字体、花哨渐变和毫无留白的“模板站”有人得到的是干净、克制、有呼吸感的现代页面。差别不在模型能力而在于我们有没有把“好看”翻译成 AI 能执行的设计约束。这篇文章就围绕 Claude 设计能力展开分享一套从环境准备、提示词设计到完整落地页实战的操作流程。内容包含 Claude Code 的安装配置、设计 Skill 的使用思路、可复制的 HTML/CSS 页面代码以及安装和构建过程中的常见问题排查。无论是刚接触 AI 编程的开发者还是想提升生成页面质量的工程师都可以按步骤跟练。1. Claude 设计能力的价值与边界1.1 为什么用 Claude 做网站设计Claude 这类大语言模型本质上不是设计工具而是一个“能理解自然语言并生成代码”的协作对象。它不会像 Figma 那样拖拽画板但它能根据一段描述产出完整的 HTML/CSS、React 组件甚至 Tailwind 样式。对开发者来说这意味着从“想到一个页面”到“看到一个可点击的原型”时间可以压缩到几分钟。真正让 Claude 区别于模板生成器的是它对设计语言的理解能力。你可以在提示词里定义主色、字体层级、圆角大小、阴影强度、区块间距。Claude 会把这些抽象约束映射到具体的 CSS 变量和组件结构上。也就是说它能把“安静、专业、现代”这类主观感受翻译成 font-size、padding、border-radius 这些可量化参数。1.2 什么是 Claude Code 和 Design SkillClaude Code 是 Anthropic 推出的终端编程助手支持在终端里直接让 Claude 读写项目文件、执行命令、修复问题。相比网页版它更适合工程场景你可以把整个项目目录交给它让它批量生成组件、修改样式、跑构建并排查报错。而“Design Skill”在最近的技术社区里更多指一种可复用的提示词模板或规则文件。你可以把一段设计规范比如“主色为 #4F46E5正文使用系统字体栈卡片圆角 16px区块上下留白 96px”保存成 Skill 或项目规则。后续每次让 Claude 生成页面时它都会先读取这段规则再开始输出代码。这样一来视觉风格就不会因为换了一个会话而漂移。1.3 适用场景与不适合的场景Claude 适合用来做产品落地页、后台管理界面、营销活动页、组件库初稿、个人项目 demo。这些场景对视觉要求较高但结构相对清晰AI 生成的代码稍作调整就能用。不适合的场景也要说清楚复杂交互动效、强品牌视觉系统、需要严格设计规范的大型项目不能完全依赖 AI。Claude 可以生成代码骨架和视觉草案但最终的设计决策、品牌调性、无障碍细节仍然需要人来把关。2. 环境准备安装与配置 Claude Code要用好 Claude 设计网页建议从 Claude Code 入手因为它能直接操作文件后续迭代效率比网页版高很多。下面按步骤完成安装与配置。2.1 检查 Node.js 与 npmClaude Code 的安装依赖 npm所以先确认本机是否安装了 Node.js。node -v npm -v如果提示命令不存在需要先安装 Node.js。建议选择 Node.js 18 或更高版本具体以 Claude Code 官方文档要求为准。安装完成后重新打开终端再执行上面的命令验证。npm 是 Node.js 自带的包管理器不需要单独安装。但如果你平时使用其他包管理器比如 pnpm、yarn也可以保留本文以 npm 为例。2.2 安装 Claude Code在终端中执行下面的全局安装命令npm install -g anthropic-ai/claude-code安装完成后验证是否成功claude --version如果你不想全局安装也可以直接用 npx 方式运行适合临时体验npx anthropic-ai/claude-code这里有一个常见坑在 Windows 上执行claude时可能会看到“无法将‘claude’项识别为 cmdlet、函数、脚本文件或可运行程序的名称”。这通常是因为 npm 全局安装目录没有配置到系统的 PATH 环境变量中。可以先执行下面的命令查看全局目录npm config get prefix拿到路径后把该目录添加到系统环境变量 Path 里然后重新打开终端。2.3 配置 API Key 与登录Claude Code 需要登录 Anthropic 账号或配置 API Key。你需要在 Anthropic 官网控制台创建 API Key然后在终端设置环境变量。在终端中临时设置export ANTHROPIC_API_KEY你的API KeyWindows PowerShell 下可以写成$env:ANTHROPIC_API_KEY你的API Key更推荐的方式是写入当前 shell 的配置文件比如~/.bashrc或~/.zshrc避免每次打开终端都重新设置。需要注意的是API Key 属于敏感信息不要提交到 Git 仓库也不要随便贴到公开平台。如果你的网络环境比较特殊需要确保终端能够正常访问 Anthropic 服务。这里的常见表现是登录时一直转圈或提示连接失败应该先排查网络连通性而不是反复重装。2.4 在 VS Code 中使用 Claude CodeClaude Code 可以在 VS Code 的终端里直接运行。打开 VS Code按下Ctrl调出集成终端然后执行claude即可。除了终端模式你也可以关注 Claude 官方是否提供桌面版或 VS Code 扩展。新工具的集成方式变化较快建议以官方文档为准。核心思路是只要终端能运行claude编辑器集成基本就是同一套命令不需要额外配置。3. 真正“漂亮”的设计提示词怎么写很多人让 AI 生成的页面不好看问题通常不在 AI而在提示词太笼统。下面几个方法可以直接复用。3.1 把“好看”翻译成可执行的设计约束如果你只写“做一个漂亮的产品落地页”Claude 会按照训练数据里的平均值来生成结果就是“模板感”很强。正确的做法是给它具体的视觉关键词。举个例子从“好看”变成浅色背景整体干净克制主色调为青蓝色强调色不要超过两种标题使用大号粗体正文保持小号浅灰卡片使用大圆角阴影要轻区块之间留足空间不要让内容挤在一起这些约束会让 Claude 的输出变得具体。它可以根据这些条件推断出 padding、margin、color、border-radius 的合理取值。3.2 用设计 Token 统一视觉语言设计 Token 是设计系统里的基础变量。Claude 生成页面时如果直接用写死的颜色和间距后续调整会非常痛苦。更好的方式是让它在 CSS 中使用变量。我通常会这样要求 AI颜色变量--color-bg、--color-surface、--color-text、--color-primary间距变量--space-4、--space-8、--space-16圆角变量--radius-md、--radius-lg阴影变量--shadow-card这样做的好处是后期换主题或调整风格只需要改动变量值而不需要逐个元素去改。对 AI 来说变量命名越清晰它生成代码时也越不容易跑偏。3.3 组件化拆解页面结构不要试图让 AI 在一个提示词里生成整个复杂网站。更好的方式是把页面拆成组件导航栏、Hero 区、功能卡片、数据展示区、CTA、页脚。先让 Claude 生成整体页面骨架再按照组件逐一优化。比如第一轮让生成“导航栏和 Hero 区”确认视觉满意后再继续生成“功能卡片区”。这样做有两个好处一是每个组件都能得到足够注意力二是出现问题方便定位修复。3.4 建立视觉检查清单Claude 生成页面后你可以用一条检查清单让它自检。例如是否有足够的留白文字和背景的对比度是否足够不同层级的标题是否区分明显卡片阴影是否过重移动端断点是否做了适配把这条清单写进提示词可以让 Claude 在输出前先自我评估一轮减少反复沟通的成本。4. 实战生成一个现代产品落地页下面用一个完整案例展示全流程。我们让 Claude 生成一个“云笔记 SaaS”产品落地页使用单文件 HTML CSS不依赖框架双击即可打开预览。4.1 明确目标与页面结构页面目标为云笔记产品生成一个现代感较强的营销落地页用来展示产品功能和数据。页面结构如下导航栏Logo、菜单、注册按钮Hero 区产品标语、副标题、按钮功能特性区三张卡片数据展示区三组数据CTA 区引导注册页脚版权信息4.2 给 Claude 的提示词模板打开终端进入一个空目录运行claude然后输入下面的提示词请为我生成一个“云笔记 SaaS”产品落地页使用单文件 HTML CSS内联样式不依赖任何网络资源。 设计要求 1. 背景色使用 #F7F8FB卡片背景 #FFFFFF主色 #4F46E5正文 #111827次要文字 #6B7280。 2. 标题字号 48px 左右正文 16px行高 1.7。 3. 卡片圆角 16px阴影浅不要使用明显的外发光。 4. 区块上下留白至少 80px内容居中最大宽度 1120px。 5. 使用系统字体栈避免引入网络字体。 6. 包含导航栏、Hero、三个功能卡片、数据展示、CTA、页脚。 7. 需要做移动端适配768px 以下卡片改为单列。 8. 不需要外部 JavaScript不需要图片。 请直接输出完整 HTML 文件。这段提示词里包含了背景色、间距、圆角、字体、断点等关键约束Claude 生成的结果会明显更可控。4.3 完整 HTML/CSS 代码下面是一份符合上述要求的参考实现。你可以保存为index.html直接用浏览器打开。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title云记 NoteFlow - 让记录更专注/title style :root { --bg: #F7F8FB; --surface: #FFFFFF; --text: #111827; --text-secondary: #6B7280; --primary: #4F46E5; --primary-light: #EEF2FF; --border: #E5E7EB; --radius-lg: 16px; --radius-md: 10px; --shadow: 0 8px 24px rgba(17, 24, 39, 0.06); --space-section: 96px; --font-sans: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); color: var(--text); background: var(--bg); line-height: 1.7; } .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .navbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; } .navbar .logo { font-weight: 700; font-size: 20px; } .navbar nav a { color: var(--text); text-decoration: none; margin-left: 24px; } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 10px 20px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; } .btn-primary { background: var(--primary); color: #fff; } .btn-secondary { background: var(--surface); color: var(--primary); border-color: var(--border); } .hero { padding: 96px 0 72px; text-align: center; } .hero .badge { display: inline-block; background: var(--primary-light); color: var(--primary); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; } .hero h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.2; margin: 24px 0 16px; letter-spacing: -0.02em; } .hero p { font-size: 18px; color: var(--text-secondary); max-width: 640px; margin: 0 auto 32px; } .hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .features { padding: var(--space-section) 0; } .features h2 { text-align: center; font-size: 32px; margin-bottom: 48px; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .card { background: var(--surface); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); border: 1px solid var(--border); } .card .icon { width: 48px; height: 48px; background: var(--primary-light); color: var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; margin-bottom: 16px; } .card h3 { font-size: 20px; margin-bottom: 8px; } .card p { color: var(--text-secondary); font-size: 15px; } .stats { padding: 64px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stats .grid { grid-template-columns: repeat(3, 1fr); text-align: center; } .stat h3 { font-size: 40px; color: var(--primary); } .stat p { color: var(--text-secondary); } .cta { padding: var(--space-section) 0; text-align: center; } .cta h2 { font-size: 32px; } .cta p { color: var(--text-secondary); margin: 12px auto 32px; max-width: 480px; } .footer { padding: 32px 0; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 14px; text-align: center; } media (max-width: 768px) { .grid { grid-template-columns: 1fr; } .navbar nav { display: none; } .hero { padding: 64px 0 48px; } } /style /head body div classcontainer header classnavbar div classlogo云记 NoteFlow/div nav a href#features功能/a a href#stats数据/a a href#cta开始使用/a /nav a classbtn btn-primary href#cta免费注册/a /header section classhero span classbadge全新 2.0 上线/span h1让每一次记录都变得轻松有序/h1 p云记是一款面向个人与小型团队的云端笔记工具支持 Markdown、多端同步、离线访问与团队协作。/p div classactions a classbtn btn-primary href#cta立即免费使用/a a classbtn btn-secondary href#features了解更多/a /div /section /div section classfeatures idfeatures div classcontainer h2功能特性/h2 div classgrid div classcard div classiconMD/div h3Markdown 实时编辑/h3 p左侧编辑右侧预览支持代码块、公式、任务列表写作体验流畅。/p /div div classcard div classiconTAG/div h3多级标签与目录/h3 p用标签和文件夹管理笔记支持全文搜索和历史版本回退。/p /div div classcard div classiconSYNC/div h3多端实时同步/h3 pWeb、桌面端与移动端自动同步离线时也可以继续编辑。/p /div /div /div /section section classstats idstats div classcontainer div classgrid div classstat h310W/h3 p全球创作者用户/p /div div classstat h399.9%/h3 p同步可用性 SLA/p /div div classstat h315ms/h3 p平均打开响应时间/p /div /div /div /section section classcta idcta div classcontainer h2准备好开始你的记录之旅了吗/h2 p无需下载客户端打开浏览器即可使用。注册即享 7 天专业版体验。/p a classbtn btn-primary href#免费注册账号/a /div /section footer classfooter div classcontainer © 2025 NoteFlow. 保留所有权利。 /div /footer /body /html这份代码虽然没有使用 JavaScript 和图片但通过 CSS 变量、网格布局、间距控制和浅阴影已经能呈现一个相对完整的现代产品页。整个页面只有单一 HTML 文件方便你后续让 Claude 在此基础上继续增加组件。4.4 本地运行与预览如果只是本地预览直接双击index.html即可。但如果你想模拟真实访问路径可以在项目目录启动一个静态服务器。比如使用 Pythonpython3 -m http.server 8080或者使用 Node.js 的npx servenpx serve .启动后访问http://localhost:8080就能在浏览器中看到页面效果。4.5 让 Claude 继续迭代优化第一版页面可能还不够完美比如按钮缺少悬浮态、移动端菜单没有展开效果、页面缺少品牌个性。这时继续在 Claude Code 中追加需求请基于当前 index.html 做以下优化 1. 给导航栏增加吸顶效果背景改为半透明白色并加上轻微阴影。 2. 按钮增加 hover 状态主按钮 hover 时背景稍微变深。 3. 功能卡片 hover 时向上移动 4px阴影稍微加深让交互更有反馈。 4. 页面滚动到锚点位置时增加平滑滚动效果。 5. 将 Hero 区的标题主色改为品牌色增强视觉重点。 请直接输出完整代码不要省略。这样一轮轮迭代页面会越来越接近你想要的效果。记住AI 生成的页面不是一次到位的设计本身就是一个“生成-检查-修改”的循环。5. 常见问题与排查思路结合我自己的使用经验和社区常见提问下面整理几个高频问题。问题现象常见原因解决思路claude命令无法识别npm 全局目录不在 PATH执行npm config get prefix将目录加入系统 PATH重启终端Claude Code 安装很慢或超时网络到 npm 官方源不稳定可以临时切换 npmmirror 镜像源安装完成后再改回error: failed to build dlib本地缺少 Python 编译工具链安装 Visual Studio Build Tools 或对应平台的编译依赖再重试pnpm run build产物在 Nginx 无法访问Nginx root 指向不对或缺少 try_files检查dist目录路径、权限和 SPA fallback 配置Claude 生成的页面布局“不好看”提示词只写“好看”没有给出设计约束补充配色、字号、间距、圆角、阴影等设计 TokenClaude Code 总是连接失败网络不通或 API Key 配置错误检查网络连通性确认环境变量ANTHROPIC_API_KEY是否生效AI 生成了很多外部字体和图片链接没有做资源限制在提示词中明确要求“不依赖网络资源”或“仅使用系统字体”其中“命令无法识别”和“构建失败”属于环境类问题只要按表格里的思路排查大多数可以解决。设计效果不理想的问题则需要回到提示词本身不要反复说“再好看一点”而是明确说出你想调整的颜色、间距或组件结构。6. 最佳实践与工程建议6.1 把设计规范沉淀进项目如果你正在用 Claude Code 维护一个长期项目建议把设计规范写进项目根目录的CLAUDE.md或类似的项目规则文件中。只要 Claude Code 在启动时能读取这个文件后续每次生成代码它都会自动参考里面的设计约束。内容可以包括品牌色和功能色字体层级间距与圆角规范常用组件风格禁止使用的样式这样团队里的成员用同一套规则生成页面视觉一致性会明显提高。不过要留意工具版本差异具体支持情况以官方文档为准。6.2 生成代码需要人工审计AI 生成的代码可以当作初稿但不能直接视为生产可用代码。每次生成后需要人工检查几个关键点是否包含外部请求或第三方依赖是否有明显的 XSS 风险比如把用户输入直接渲染成 HTMLCSS 是否过度复杂导致首屏加载慢组件是否考虑了键盘访问和屏幕阅读器Claude 生成页面速度快但设计决策和安全性仍然需要开发者负责。6.3 多环境验证与可访问性不要只在 Chrome 桌面端预览。建议在 Firefox、Safari 以及移动端设备上各看一遍重点检查布局是否错乱、字体是否正确渲染、按钮是否容易点击。可访问性方面至少关注三点文字和背景的对比度是否达到 WCAG AA 标准图片是否有alt文本交互元素是否可以用键盘操作。这些要求可以直接写进提示词让 Claude 在生成阶段就处理掉一部分问题。6.4 安全与合规在真实项目中如果页面包含登录、支付、用户数据展示AI 生成的代码只能作为前端原型后端接口、权限控制、数据校验必须由开发者重新实现。生产环境变更前先在测试环境验证并确保有备份和回滚方案。另外不要使用有版权风险的图片、字体、图标资源。Claude 如果生成了一些外部链接一定要确认来源是否可靠、是否允许商用。最稳妥的做法是使用系统字体栈和开源图标库。7. 总结与下一步这篇文章从 Claude 的能力边界出发介绍了 Claude Code 的安装配置、设计提示词的写法、完整的落地页生成案例以及常见问题排查思路。你实际动手时可以先从单文件 HTML 页面开始练习把“背景色、间距、圆角、字体、断点”这些约束写进提示词然后不断迭代。下一步建议学习 Tailwind CSS 或 React把 Claude 生成的静态页面迁移到组件化项目里。你还可以把这次用到的设计 Token 整理成自己的模板以后再用 Claude 时输入提示词的成本会越来越低。设计这件事没有标准答案但让 AI 按你的规则输出是提升效率最直接的一条路。