用AionClaw开发网站必须先完成原型阶段，它不支持拖拽建站，但能将自然语言描述的页面结构、模块、字段和跳转逻辑自动转化为可运行的HTML/CSS/JS骨架文件，并生成带业务语义的组件代码，为后续开发提供明确边界与复用基础。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用 AionClaw 做网站开发，不能跳过原型阶段直接写代码——它不提供可视化拖拽建站功能，但能帮你把“页面结构、内容模块、跳转逻辑”这些原型要素自动整理成可执行的 HTML/CSS/JS 骨架文件，并基于真实需求生成带业务语义的组件代码。这一步做完，后续编码才有明确边界和复用基础。
先用自然语言描述网站结构
打开 AionClaw 主界面，在对话框输入：“我要做一个企业官网，包含首页、产品列表页、单个产品详情页、关于我们页、联系表单页。首页要有轮播图、三个核心服务卡片、客户案例滚动区；联系页需含姓名、邮箱、电话、留言四个字段，提交后跳转成功页。”
这一步必须说清页面数量、每页核心模块、字段名称和交互流向。如果只说“做个官网”，AionClaw 会按通用模板生成，后续改起来反而更费劲。
让 AionClaw 输出原型清单与路径映射
等 AI 返回结果后，检查它是否生成了完整的页面清单（含 URL 路径）、各页面的 DOM 结构层级说明、以及表单字段与后端接收参数的对应关系。例如：【contact.html 必须包含 id="contact-form" 的 form 标签，action 属性值为 /api/v1/submit，method 为 POST】。
若缺失路径或字段绑定说明，立刻追问：“请补全所有页面的 HTML 文件名、静态资源引用路径、表单提交接口地址和请求方法。” 这是后续代码生成能否对齐前后端的关键前提。
生成可运行的静态原型文件
确认原型清单无误后，输入指令：“根据以上结构，生成一套完整可本地预览的静态网站文件，包含 index.html、products.html、product-detail.html、about.html、contact.html，所有 CSS 写在 style.css 中，JS 行内初始化轮播和表单验证。”
AionClaw 会打包为 ZIP 并提示下载路径。解压后双击 index.html 即可查看真实渲染效果——不是截图，是真正可点击跳转、表单可输入、响应式布局生效的原型。
注意：此时所有 JS 仅做基础交互，不连真实 API。如需模拟提交反馈，它会在 contact.html 底部插入一段 fetch() 示例代码并注释说明替换位置。
从原型到代码的三步转换
第一步：打开 products.html → 复制其中“服务卡片”的 HTML 结构 → 在 AionClaw 输入：“把这个卡片结构封装成 Vue 3 的 SFC 组件，props 接收 title、desc、icon，使用 Composition API。”
第二步：打开 contact.html → 找到表单区域 → 输入：“用 React 18 函数组件重写这个表单，集成 Formik 和 Yup 做校验，提交时调用 /api/v1/submit 接口。”
第三步：回到 AionClaw 技能市场 → 搜索“Tailwind CSS 生成器” → 安装 → 对着原型截图上传 → 选择“生成响应式导航栏代码” → 粘贴进你的 layout.tsx。
