企业官网建设流程全解析

1. 从零搭一个 AI 对话页面，为什么我建议先装 TinyRobot Skills

TinyRobot Skills 是一套给 AI 编程代理用的技能包，它把 TinyRobot 组件库的用法、对话页结构、状态管理约定打包成 AI 能直接读懂的规则。你只要在 Cursor、OpenCode 这类工具里装上它，然后用自然语言描述需求，AI 生成的代码就会自动符合 TinyRobot 的组件规范，而不是给你一堆需要手动改的野生 div。它适合三类人：想快速验证 AI 对话产品形态的前端、需要给现有系统加智能助手但不想从零写 UI 的开发者、以及带团队做 AI 应用原型的技术负责人。

我试过不用 Skills 直接让 AI 写对话页，结果它给我拼了一堆自定义组件，气泡样式、输入框状态、消息流滚动全要自己调，改到第三版就乱了。后来换成 TinyRobot Skills，同样一句“生成一个 AI 聊天页面，包含对话列表和输入框”，出来的代码直接引用了 Bubble、Sender、Prompts 这些现成组件，结构清晰，改起来也快。这篇就按我实际跑通的流程，从 Skills 安装、对话页结构设计、配置片段到验证请求，一步步给你可复制的操作。

核心检索词先明确：TinyRobot Skills 使用指南，解决的是“AI 辅助搭建 AI 对话页面”这件事。你不需要先精通 TinyRobot 组件库，Skills 会替你把组件用法喂给 AI。下面所有命令和配置我都实测过，路径和参数保持原样，你照着敲就行。

2. 前置准备：TinyRobot Skills 安装与代理配置

2.1 用 skills 工具一条命令安装

最省事的方式是用skills工具安装。打开终端，在你想放技能的项目目录下执行：

npx skills add opentiny/agent-skills --skill tiny-robot-skill --agent <your-agent>

如果你用 pnpm，等价命令是：

pnpm dlx skills add opentiny/agent-skills --skill tiny-robot-skill --agent <your-agent>

<your-agent>填你的 AI 代理名称，比如cursor、opencode。不确定支持哪些代理，可以先跑不带--agent的命令，CLI 会列出支持的代理列表，你选一个或多个即可：

npx skills add opentiny/agent-skills --skill tiny-robot-skill

接着会提示你选择安装位置（项目级还是全局），确认后提示安装成功。项目级只对当前工程生效，全局则对你机器上所有项目生效，按需选。

2.2 手动克隆方式（网络受限时用）

如果 npx 拉取慢，可以用 degit 只下载指定目录，不带提交记录：

npx degit opentiny/agent-skills/skills/tiny-robot-skill <path>/tiny-robot-skill

或者用 git clone 后复制：

git clone https://github.com/opentiny/agent-skills.git cp -r agent-skills/skills/tiny-robot-skill <path>

<path>换成你 IDE 或 CLI 要求的技能存放路径，具体位置参考对应工具的官方文档。装完后在 Cursor 里输入/，如果能看到tiny-robot-skill出现在技能列表，说明加载成功。没看到就去 Cursor Settings -> Rules, Skills, SubAgents 检查，或者重启 Cursor。

2.3 给 OpenCode 接入兼容接口

如果你用 OpenCode，先装：

npm install -g opencode-ai

然后安装技能：

pnpm dlx skills add opentiny/agent-skills --skill tiny-robot-skill --agent opencode

想让 OpenCode 走自己的模型接口，编辑~/.config/opencode/opencode.json，加入兼容 OpenAI 格式的 provider：

{ "$schema": "https://opencode.ai/config.json", "provider": { "my-agents": { "npm": "@ai-sdk/openai-compatible", "name": "MyAgent", "options": { "baseURL": "https://taotoken.net/api/chat/v1", "apiKey": "你的apiKey" }, "models": { "auto": { "name": "Model Auto" } } } } }

这里 baseURL 填https://taotoken.net/api/chat/v1，apiKey 去控制台生成。保存后打开 OpenCode，输入/models选模型，往下翻能找到你填的Model Auto。选完再输入/skills选tiny-robot-skills，就可以开始提问了。这套配置三件套记牢：Base URL、Key、Model ID，缺一个都连不上。

3. 可复制配置：对话页结构设计与组件片段

3.1 对话页的三层结构

一个能用的 AI 对话页面，拆开就三层：消息展示层、输入交互层、状态管理层。TinyRobot 对应给了 Bubble（气泡）、Sender（输入框）、Prompts（提示词快捷区）这些组件。你在 Skills 里描述需求时，把这三层说清楚，AI 生成的代码就不会跑偏。

我一般这样描述：“生成一个 AI 聊天页面，顶部是消息列表用 Bubble 渲染，底部是 Sender 输入框，支持 Markdown 渲染，消息存 localStorage，多会话可切换。” Skills 会按 TinyRobot 规范输出 Vue 组件代码，包含 HTML、TypeScript、CSS 三部分。

3.2 项目初始化与主题配置片段

如果你是从空项目开始，先初始化再让 AI 生成。TinyRobot 支持主题配置，下面是一个可复制的主题配置片段，放在项目配置里：

{ "tinyRobot": { "theme": { "primaryColor": "#5e7ce0", "bubble": { "userBg": "#5e7ce0", "assistantBg": "#f5f5f5", "radius": "12px" }, "sender": { "placeholder": "输入你的问题，Enter 发送", "maxLength": 2000 } }, "storage": { "type": "localStorage", "keyPrefix": "tiny-robot-chat-" } } }

这个片段控制气泡颜色、圆角、输入框占位文案和存储前缀。你把它贴给 AI，让它按这个配置生成组件，出来的样式基本不用再调。

3.3 消息状态管理的工具函数约定

Skills 里内置了消息、对话、AI 请求相关的工具函数约定。你让 AI 生成状态管理代码时，直接说“用 TinyRobot 的消息工具函数管理消息列表”，它会生成类似这样的结构：

import { useMessage, useConversation } from 'tiny-robot'; const { messages, addMessage, updateMessage } = useMessage(); const { conversations, currentId, switchConversation } = useConversation();

这样消息的增删改和会话切换都走统一 API，不用自己维护数组。实测下来，这部分是最容易出 bug 的地方，交给 Skills 生成比手写稳。

4. 验证请求：跑通第一个对话页面

4.1 生成后先跑本地预览

代码生成完，先本地起服务看效果。假设你用 Vite，执行：

pnpm install pnpm dev

打开浏览器，你应该能看到一个带消息列表和输入框的页面。在输入框敲一句“你好”，回车，消息应该以用户气泡出现在列表里。如果气泡没出现，先看控制台报错，大概率是组件没注册或样式没引入。

4.2 验证 AI 请求链路

对话页要真正跑通，得接上模型接口。在 Skills 生成的代码里，找到 AI 请求部分，确认 baseURL 和 apiKey 配置正确。你可以用下面这个请求片段测试接口是否通：

curl https://taotoken.net/api/chat/v1/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer 你的apiKey" \ -d '{ "model": "auto", "messages": [{"role": "user", "content": "你好"}] }'

返回里有choices字段且内容正常，说明接口通。然后回到页面，发一条消息，观察是否收到 AI 回复并渲染成气泡。如果页面没反应但 curl 通，检查前端请求的 baseURL 是否写成了https://taotoken.net/api/chat/v1，以及 apiKey 有没有带Bearer前缀。

4.3 验证 Markdown 渲染与多会话

发一条带 Markdown 的消息，比如“用 Markdown 列三个前端框架”，看气泡里是否渲染成列表而不是纯文本。再点新建会话，发几条消息，刷新页面，看 localStorage 里的消息是否还在。这两步过了，一个可用的对话页原型就算跑通了。

5. 常见报错排查：401、local proxy failed 与 choices 读取失败

5.1 401 Unauthorized

最常见的是 401。原因就两个：apiKey 错了，或者请求头没带对。检查你的请求头是不是Authorization: Bearer 你的apiKey，注意 Bearer 后面有空格。如果用的是 OpenCode 配置，确认opencode.json里apiKey字段填的是控制台生成的 key，不是账号密码。key 泄露了就去控制台重新生成一个。

5.2 local proxy failed

这个报错通常出现在你本地起了代理但没配对。先确认你的请求是直接发往https://taotoken.net/api/chat/v1，没有经过额外的本地转发。如果你在 OpenCode 里配了baseURL，确保它和实际接口地址一致，不要多写或少写/v1。另外检查系统环境变量里有没有残留的代理设置，有的话清掉再试。

5.3 reading 'choices' 报错

页面报Cannot read properties of undefined (reading 'choices')，说明返回体结构和你代码里取的不一样。先看 curl 返回的 JSON 顶层有没有choices。如果没有，可能是接口地址不对或模型名不对。确认 model 字段填的是你控制台里可用的模型 ID，比如auto。如果返回体是流式的，代码里要按流式解析，不能直接取choices。

5.4 OAuth 相关报错

如果你在 Cursor 或 OpenCode 里遇到 OAuth 报错，先确认你用的是 apiKey 方式而不是 OAuth 登录方式。在 OpenCode 的opencode.json里，provider 配置用的是apiKey字段，不需要走 OAuth 流程。如果工具提示要登录，检查是不是选错了认证方式，切回 apiKey 模式即可。

5.5 技能没加载

输入/看不到tiny-robot-skill，先确认安装时选的 agent 对不对。Cursor 要选cursor，OpenCode 要选opencode。装完重启工具。还不行就去 Settings 里看 Skills 列表，手动确认技能目录在不在。项目级安装只对当前项目生效，换项目要重新装或改用全局安装。

6. 把 Skills 用顺手的几个实操建议

装好 Skills 只是第一步，用顺它有几个技巧。第一，描述需求时把组件名带上，比如“用 Bubble 渲染消息、用 Sender 做输入框”，AI 命中率更高。第二，遇到问题直接把报错原文贴给 Skills，它会分析原因并给修复代码，比你自己搜快。第三，多会话和 localStorage 这类状态逻辑，尽量让 Skills 生成，手写容易漏边界情况。

如果你要长期做 AI 对话类产品，建议把 Coding Plan 用起来，配合 Skills 做持续迭代。需要生成 key 就去 API Keys 页面，接入细节看接入文档。想先感受模型对话效果，可以直接在模型对话里试。TinyRobot Skills 的价值在于把组件规范和 AI 生成打通，你省下的不是敲代码的时间，是反复调样式和修状态 bug 的时间。跑通第一个页面后，后面加附件上传、加多轮上下文、加提示词快捷区，都是在这个结构上叠，不会推倒重来。