如何将 Claude 编写的代码转化为实际服务
防止设计碎片化
Claude 生成的 HTML 文件起初看起来不错,但一旦页面超过 3 个,修改就会变成一场噩梦。为了修改一个字号而去打开 10 个文件简直是浪费时间。请将代码进行模块化拆分。
- 创建项目文件夹。将 CSS 放在 /assets/css,图片放在 /assets/img,布局放在 /components 中。
- 文件名请仅使用小写字母和连字符,例如 main-header.html。这能减少 Claude 对路径产生误解的可能性。
- 在主 HTML 的 标签中放入 ,并在中央统一管理样式。
这样做之后,以后只需修改一次头部文件,修改内容就会立即应用到所有页面。无需再在反复修改文件上浪费时间。
使用 CSS 变量固定调色板
不要在每个组件中直接输入颜色代码。当你想更改按钮颜色时,不必去翻阅成千上万行代码。请改用 CSS 变量。
- 打开 /assets/css/global.css 文件。
- 定义 3 个核心颜色,例如 :root { --main-color: #000000; --sub-color: #ffffff; }。
- 在编写样式时,使用类似 background-color: var(--main-color); 的方式。
以后如果品牌颜色发生变化,只需 3 秒钟修改一个文件即可。所有页面的按钮颜色会同时更新。这比每次手动调整设计要高效得多。
在本地环境中即时确认
如果反复经历“修改代码 -> 回到浏览器 -> 刷新页面”的过程,专注力会很容易被打断。请安装 VS Code 的 Live Server 插件。
- 在 VS Code 中安装 Live Server,并点击底部的 Go Live 按钮。
- 在浏览器中打开网站,点击鼠标右键 -> 选择“检查”打开开发者工具。
- 在 Elements 标签页中即时修改边距或字号。看到满意的效果后,直接将修改后的数值复制到 CSS 文件中即可。
无需刷新页面,实时查看视觉变化。这能将设计修改的时间缩短一半。
强制 Claude 遵守规范
Claude 每次响应请求时生成的代码风格都可能不同。请在开始对话前就定好规则。在项目根目录下创建一个 CLAUDE.md 文件。
- 在 CLAUDE.md 中记录 CSS 变量规则和要使用的文件夹结构。
- 将常用的按钮或卡片样式定义为 XML 格式(例如:...)。
- 当要求 Claude 编写新页面时,只需加上一句:“请遵守 CLAUDE.md 中的规则编写”。
AI 随意乱写代码的情况将显著减少。
使用 Vercel 进行自动部署
不要为服务器设置或复杂的环境配置而烦恼。使用 Vercel,只需上传代码,网站即可直接运行。
- 将代码推送到 GitHub。
- 在 Vercel 网站上连接你的 GitHub 账号并创建项目。
- 之后每次将代码上传到 GitHub,Vercel 都会在 45 秒内反映更改并更新网站。
你无需亲自管理服务器。域名地址会自动生成,如果出现问题,可以随时回滚到之前的版本。现在就开始上传你的代码吧。