opencode 安装 ui-ux-pro-max 与 frontend-ui-ux 技能：配置文件骨架与验证动作

1. opencode 装技能前先搞清楚它到底缺什么opencode 本身是个终端里的 AI 编码工具写逻辑、跑测试、改文件都挺顺但它默认没有「前端审美」这回事。你让它写个登录页它给你一坨能跑但丑得离谱的 div你让它配个色它翻来覆去就是 #333 加 #fff。这不是模型不行是它缺一套专门管视觉的技能包。ui-ux-pro-max 和 frontend-ui-ux 就是补这块的。前者偏设计系统装完能拿到 50 多套设计样式、161 种配色方案、57 种字体搭配还有 10 大类规则指南后者偏前端实现管的是布局、组件结构、响应式这些落地的事。两个一起装一个出方案一个落地配合起来才完整。这篇面向的是已经在用 opencode、但被前端产出质量卡住的开发者。我会给出可复制的配置文件骨架说明技能声明和路径字段怎么写装完怎么用一次调用验证生效最后把 TaoToken 的统一 Key 通道接进来省得你每个模型单独配一遍。先说清楚技能安装靠的是npx skills add这条命令它会把技能仓库拉到本地并注册到 opencode 的技能目录。装完必须重启 opencode否则新技能不会加载——这是最容易踩的坑很多人装完直接开新会话发现没反应以为装失败了。2. 装之前先把 TaoToken 的通道接好opencode 要调模型就得有 API Key。如果你同时用 Claude、GPT、Gemini 好几个模型每个都去官网申请 Key、分别配 base_url管理起来很烦。TaoToken 做的是统一通道一个 Key 走所有模型base_url 指向同一个地址opencode 这边只配一次。接入位置在官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册后在控制台生成 Key。API 地址是 https://taotoken.net/api 注意这个不带 UTM 参数配置里填这个就行。opencode 的模型配置一般放在项目根目录或用户目录下的配置文件里。你需要填两个字段baseURL指向 TaoToken 的 API 地址apiKey填你生成的 Key。这样 opencode 发请求时走的就是统一通道后面装技能、跑验证都不受影响。注意Key 不要硬编码进提交到 git 的文件里。建议用环境变量读取配置文件里写process.env.TAOTOKEN_API_KEY这种形式本地跑的时候在 shell 里 export 一下。如果你还没生成 Key去控制台页面 https://taotoken.net/console 建一个。接入文档在 https://taotoken.net/doc 里面有各工具的配置示例opencode 的写法可以对照着改。3. 两个技能的安装命令与配置文件骨架安装本身不复杂两条命令。ui-ux-pro-max 的安装命令是npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-maxfrontend-ui-ux 的安装命令是npx skills add https://github.com/code-yeongyu/oh-my-opencode --skill frontend-ui-ux两条命令跑完技能文件会落到 opencode 的技能目录里。但光有文件还不够opencode 需要一份配置告诉它「有哪些技能可用、路径在哪」。这就是配置文件骨架的作用。opencode 的技能声明通常写在opencode.json或opencode.jsonc里结构大致是这样{ skills: { ui-ux-pro-max: { enabled: true, path: ./skills/ui-ux-pro-max, description: 专业 UI 设计能力含配色、字体、样式规则 }, frontend-ui-ux: { enabled: true, path: ./skills/frontend-ui-ux, description: 前端布局与组件实现技能 } } }关键字段说明enabled控制是否加载path指向技能实际落地的目录description是给模型看的说明写清楚技能干什么模型才知道什么时候调用它。路径字段最容易写错——npx skills add默认装到用户级目录如果你在项目里写相对路径得确认技能文件确实在那个位置。不确定的话先跑一次npx skills list看装到哪了再回填路径。如果你用的是全局配置路径可能是~/.opencode/skills/ui-ux-pro-max这种绝对路径。两种都行关键是路径要对得上。配置改完重启 opencode。这一步不能省技能注册是在启动时读配置完成的热加载不生效。4. 验证技能是否真的生效装完重启怎么确认技能被加载了最直接的办法是发一次带技能名的调用看模型有没有按技能的方式回应。在 opencode 里输入这样一段ulw 请和我一起用头脑风暴方式遵循 Superpowers 流程采用 TDD 方式实现下面的应用。必须使用 ui-ux-pro-max 和 frontend-ui-ux 技能来完成视觉设计工作。 明天吃什么是一个以抽签 美食探险的风格随机生成一个明天吃什么的应用。 需包含 1、推荐菜名可本地/全球随机但需能在实际生活中找到 2、食运签名菜品背后的绝佳寓意 3、推荐理由结合菜品本身发散推荐理由 风格整体需美观、有仪式感符合美食氛围有食物 emoji 和音效带惊喜感。这里有个细节必须使用 ui-ux-pro-max 和 frontend-ui-ux 技能来完成视觉设计工作这句话不能省。opencode 不会自动去翻技能列表你得在 prompt 里点名它才会去调。我试过不写这句模型就按默认方式写配色和布局明显没有技能加持。如果技能生效你会看到模型在回应里提到配色方案、字体搭配、设计规则这些内容产出的页面结构也会更讲究。如果它完全没提技能还是老样子那大概率是配置没读到或者没重启。验证通过后后续正常开发就可以直接用了。想单独验证模型能力可以去模型对话页面 https://taotoken.net/models 试一下同一个 prompt对比有没有技能时的输出差异。5. 装完没反应这几个地方挨个查技能没加载最常见的原因是没重启 opencode。配置文件改了但进程没重启读的还是旧配置。关掉重开一次。路径写错path字段指向的目录里没有技能文件。跑npx skills list确认实际安装位置把路径改成对的。相对路径和绝对路径都支持但别混着写。prompt 里没点名技能opencode 不会主动调用技能你得在指令里明确写「必须使用 xxx 技能」。少了这句技能装了也白装。两个技能冲突ui-ux-pro-max 管设计、frontend-ui-ux 管实现正常不冲突。但如果两个技能对同一个文件有不同规则模型可能会犹豫。建议在 prompt 里说清楚分工比如「视觉设计用 ui-ux-pro-max布局实现用 frontend-ui-ux」。API Key 没配好技能加载和模型调用是两回事。技能装好了但 Key 无效模型请求会失败看起来像技能没生效。先去控制台确认 Key 状态再检查配置文件里的baseURL和apiKey。版本不匹配技能仓库更新后本地旧版本可能和当前 opencode 不兼容。重新跑一次npx skills add拉最新版。排查顺序建议从「重启」开始再到「路径」最后查「prompt 写法」。大部分问题出在前两步。6. 长期用下去把 Key 和技能管理固定下来如果你只是偶尔写个页面装完技能、配好 Key 就够用了。但如果你打算长期用 opencode 做前端开发建议把两件事固定成习惯。一是 Key 管理。TaoToken 的统一通道好处是一个 Key 走所有模型但 Key 本身要保管好。别写死在代码里用环境变量或者本地.env文件.env记得加进.gitignore。需要换模型时只改配置里的模型名Key 和 base_url 不用动。二是技能版本。ui-ux-pro-max 和 frontend-ui-ux 都在 GitHub 上维护隔段时间会更新配色库和规则。定期跑一次npx skills add重新拉取保持和最新版一致。更新后同样要重启 opencode。如果你要跑长期的编码任务或者 Agent 流程可以考虑 Coding Plan 这类方案把模型调用和额度管理统一起来地址在 https://taotoken.net/coding-plan 。接入方式和单次调用一样都是走同一个 API 通道。技能装好只是起点真正省时间的是把「点名技能」写进你的常用 prompt 模板里。每次开新项目直接套模板模型就知道该调哪些技能不用你反复提醒。