### [Claude 网站教程：用 AI 完成页面规划、代码生成与上线检查](https://alyyhw.com/article/3135)

**Published:** 2026-07-27T14:23:42

**Author:** AI菜鸟网

**Excerpt:** 用 Claude 协助完成网站需求拆解、页面代码、调试和上线验收。

Claude 可以降低网站开发的沟通和试错成本，但不能替代需求确认、代码审查和上线检查。

## 一、从页面清单开始

列出页面、用户动作、数据来源和权限边界，把“做一个网站”拆成首页、列表、详情、登录态和错误页。

## 二、先结构后样式

1.  建立信息架构和组件清单。
2.  确定数据结构、接口输入和空状态。
3.  先完成静态结构，再补交互和视觉。
4.  一次只提交一个小改动并立即验证。

![Claude网站开发流程示意图](https://login.alyyhw.com/wp-content/uploads/2026/07/inline-website.jpg)

## 三、适合交给 Claude 的任务

组件拆分、表单校验、重复代码重构、测试用例补充和错误解释，都适合让 Claude 先给方案。涉及权限、支付和用户数据时必须人工审查。

```
请只修改登录表单组件：保持字段名和接口不变；增加空值、格式和提交中状态；不修改其他文件；输出修改说明和测试清单。
```

## 四、上线前检查

| 检查项 | 验证方式 |
| --- | --- |
| 响应式 | 桌面、平板、手机分别检查 |
| 链接  | 导航、按钮和旧页面逐一访问 |
| 错误态 | 空数据、网络失败、未登录状态可读 |
| 安全  | 密钥不进前端，权限不依赖隐藏按钮 |

让 Claude 参与每一步，但保留清晰的变更边界和回滚点，网站上线会更可控。

**Tags:** AI工作流, AI编程, Claude, 个人网站, 网站管理

**Categories:** AI编程

---