# Dyad 自定义 API 配置：用自己的模型生成作品集原型

本题提供本站手写作品集参考和可运行检查；未安装 Dyad、未发送模型请求，示意参数不表示已连通某个模型。

## 本地运行

需要 Node.js 20+，本参考工程没有 npm 第三方运行依赖。

```sh
npm ci --ignore-scripts
npm run check
npm run dev
```

服务只绑定 127.0.0.1:8456；修改端口可运行 `PORT=8457 npm run dev`。W03 与 W11 包含随包本地 React 18.3.1 UMD 运行库及许可，前者 hash 路由不需要服务器路径回退。

## 七步操作

### 1. 整理作品集输入，而非只说“高级一点”

打开 brief.json 与 index.html。练习人物“林序”和三件项目均为虚构资料，明确指定两栏桌面布局、单栏手机布局、三件作品标题、邮箱跳转和图片比例。先保留输入，再让 AI 建站。

```sh
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 没有预置一个保证可用的模型。

```sh
cat provider.example.json
```

### 4. 先检验配置，再提交完整页面要求

先用不含私人代码的最小请求确认鉴权、模型、响应和费用，再把 prompt.md 与 brief.json 交给 Dyad。本站尚未执行这一步，所以不提供成功响应截图或模型运行耗时。

### 5. 用原创参考页核对内容和链接

参考页是本站直接编写的验收目标，不是模型生成结果。核对“潮汐书店”“纸间工作室”“北岸摄影”各出现一次，联系按钮可打开邮件草稿；模型产物应由你另存并按同一要求验收。

```sh
npm run dev
```

### 6. 缩到手机宽度检查阅读顺序

先看导航是否换行，再看简介、作品、联系的顺序。图片不得挤压成细条；手机单栏保留文字和入口。用浏览器真实查看，而不是用截图尺寸证明响应式正常。

### 7. 保存实际模型与交付记录

运行离线检查后，把自己的模型名、Dyad 版本、生成时间及失败项填入 run-record.template.json。离线通过仅证明这个参考工程，不证明自定义 API、模型生成或外部发布已经完成。

```sh
node verify.mjs
```

## 输入与许可

虚构业务、客户、活动及几何插图均为本站原创教学输入；参考源码采用 MIT（见 LICENSE）。不是 Dyad/bolt.diy/screenshot-to-code UI 或模型输出。不包含真实 API 密钥、账号、发布 URL 或客户资料。

官方依据：
- https://www.dyad.sh/docs/guides/ai-models/custom-models

查询词仅为任务意图，不是已验证 Google 月搜索量或抖音指数。