展开本页目录
开始前准备什么
- 下载独立练习包，使用 Node.js 20+；参考源码没有 npm 第三方依赖，React 库仅 W03/W11 随包提供。
- 在自己的独立目录中运行；所有业务和身份均为虚构教学数据。
- 目标 App、模型、账号授权与外部发布需按本页真实边界另行操作；不使用真实客户资料练习。
- 整理作品集输入，而非只说“高级一点”
- 在 Settings 添加自定义供应商
- 添加可用的精确 Model ID
- 先检验配置，再提交完整页面要求
- 用原创参考页核对内容和链接
- 缩到手机宽度检查阅读顺序
- 保存实际模型与交付记录
独立原创源码、输入、逐步说明、运行脚本和真实本地检查；不含账号密钥或模型权重。
包含七步具体操作、来源与本题未执行范围。
真实执行本题纯函数/结构断言，不代替目标 App、模型、权限或发布测试。
离线 npm ci、check、build 与 HTTP 内容类型回读结果。
1. 整理作品集输入，而非只说“高级一点”
打开 brief.json 与 index.html。练习人物“林序”和三件项目均为虚构资料，明确指定两栏桌面布局、单栏手机布局、三件作品标题、邮箱跳转和图片比例。先保留输入，再让 AI 建站。
bash
node verify.mjs
2. 在 Settings 添加自定义供应商
根据官方 Custom Models，在 Settings → AI Providers 选择 Add Custom Provider，给供应商一个稳定 ID 和显示名，再填供应商提供的 API Base URL。不要把完整 chat/completions 路径重复拼接到基址，也不要把真实密钥写进本站练习包。
3. 添加可用的精确 Model ID
在该供应商页面选择 Add Custom Model。Model ID 必须与账户实际支持的标识相同，显示名称不能替代它。最大输出和上下文按所选模型文档填写；本页的 provider.example.json 没有预置一个保证可用的模型。
bash
cat provider.example.json4. 先检验配置，再提交完整页面要求
先用不含私人代码的最小请求确认鉴权、模型、响应和费用，再把 prompt.md 与 brief.json 交给 Dyad。本站尚未执行这一步，所以不提供成功响应截图或模型运行耗时。
5. 用原创参考页核对内容和链接
参考页是本站直接编写的验收目标，不是模型生成结果。核对“潮汐书店”“纸间工作室”“北岸摄影”各出现一次，联系按钮可打开邮件草稿；模型产物应由你另存并按同一要求验收。
bash
npm run dev
6. 缩到手机宽度检查阅读顺序
先看导航是否换行，再看简介、作品、联系的顺序。图片不得挤压成细条；手机单栏保留文字和入口。用浏览器真实查看，而不是用截图尺寸证明响应式正常。
7. 保存实际模型与交付记录
运行离线检查后，把自己的模型名、Dyad 版本、生成时间及失败项填入 run-record.template.json。离线通过仅证明这个参考工程，不证明自定义 API、模型生成或外部发布已经完成。
bash
node verify.mjs
来自 verification.json、clean-room.json 的真实本地检查排版；仅证明本站参考工程，未运行目标 App/模型/外部发布。
横向滑动查看细节，或打开原图放大对照。
怎样确认已经完成
- 三件作品各出现一次，联系按钮能打开正确邮件草稿。
- 手机单栏保留简介、作品、联系顺序，图片比例正常。
- 记录实际Dyad模型连接/生成状态；手写参考页不作模型成果。
常见问题
一句话生成网站能直接当作品集交付吗？
可以作为起点，但作品、联系方式、移动端和图片授权仍需逐项检查。本文用原始需求和手写参考页提供明确验收目标。
本地AI建站时源代码都留在本机吗？
Dyad 项目在本地；选择远程模型时，请求中的代码和文字会发送给该模型服务。不要据“本地”推断数据绝不外发。