跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
编程语言AI大前端

使用 Opencode Skills 组合掌控 AI 开发流程

综述由AI生成Opencode Skills 是一种技能增强器,用于升级提示词并记录技能元信息与实现步骤。四个核心 Skills:毒蛇产品经理、UI 提示词设计师、UI/UX 设计智能和全栈开发工程师。通过主控配置文件 AGENTS.md 协调 AI 工作流,结合音乐机器人项目案例,演示了从需求收集、文档生成、UI 设计到代码实现的完整自动化流程,有效提升开发效率与产品质量。

蜜桃汽水发布于 2026/2/6更新于 2026/5/2724 浏览
使用 Opencode Skills 组合掌控 AI 开发流程

基于 Opencode Skills 的 AI 开发流程控制

Skills 是一种技能增强器,可以理解为升级版的提示词。它的文件记录了某个 Skill(技能)的元信息,包括名称等描述,以及技能的实现步骤。

以下 4 个 Skills 在 AI 项目开发中必不可缺。引入这些 Skills 可以更方便地介入 AI、控制 AI 并为其制定边界。

指令式控制 AI 开发流程的主控调度器

在我的项目中 .opencode 目录中存在 4 个 Skills,结合与 .opencode 目录同级的 AGENTS.md 文档(主控配置文件),形成 AI 开发流程的主控调度器,负责协调专业技能包。

Skills 技能指令

  • dev-builder (全栈开发工程师)
    • 路径:/dev
  • ui-ux-pro-max (UI/UX 设计智能)
    • 路径:/dev
  • ui-prompt-generator (UI 提示词设计师)
    • 路径:/ui
  • product-spec-builder (毒蛇产品经理)
    • 路径:/prd

4 个 Skills 的作用说明

  1. product-spec-builder (毒蛇产品经理):需求收集和产品文档编写。询问用户核心想法和功能需求,追问功能细节(输入、输出、业务规则),生成 Product-Spec.md 和变更记录。不接受模糊回答,直接指出问题。
  2. ui-prompt-generator (UI 提示词设计师):根据产品文档生成原型图提示词。理解产品需求并提炼核心功能,选择合适的视觉风格确定配色方案,为每个核心功能生成提示词(多个版本),生成 UI-Prompts.md 文件。
  3. ui-ux-pro-max (UI/UX 设计智能):提供 UI/UX 设计指南和最佳实践。包含 50 种 UI 风格指南(玻璃态、极简、暗黑模式等),21 种配色方案,50 种字体配对,20 种图表类型推荐,9 种技术栈最佳实践(React、Next.js、Vue、Svelte 等)。
  4. dev-builder (全栈开发工程师):根据产品需求文档实现功能代码。选择合适的技术栈(React/Vue/Next.js 等)搭建项目结构和开发环境,实现核心功能代码确保代码质量和可维护性,集成 AI 功能(如 OpenAI API)。

01 安装 Opencode

Mac/Win 版安装指令:

curl -fsSL https://opencode.ai/install | bash
npm i -g opencode-ai

02 选择项目开发 AI 模型

免费的模型有:GLM-4.7、Grok Code。本次使用 GLM-4.7 模型。按 Ctrl + P 即可选择模型。

03 开始项目(音乐机器人项目开发)

04 毒蛇产品经理 (product-spec-builder)

执行 /prd 命令,毒蛇产品经理开始明确产品开发需求,会渐进式追问开发需求。

开发需求示例: 我想做一个音乐视觉效果:根据音频的输入和音频中歌词的演唱,达到一个动画人物在自动演唱(有人物口型和表情、还有人物的一些演唱基本肢体动作)。API 配置 - 视觉动作分析使用 qwen3-vl-plus,音频歌词识别使用 gemini-2-5-pro。

05 Product-Spec.md 已生成变更记录

产品需求文档明确后,就会记录一条开发进度。

06 UI 提示词生成 (ui-prompt-generator)

执行 Skills 中的 UI 原型图提示词生成功能。

07 UI/UX 设计智能 (ui-ux-pro-max)

借助 UI-Prompts.md 文档中的提示词 UI 原型图要求,并且使用 Skills 中的 ui-ux-pro-max 开发应用,执行 /dev。

08 代码开发实现 (dev-builder)

音乐机器人有音频歌词解析、歌词同步,需要接入音频分析模型(此处接入 gemini-2-5),音乐机器人视觉效果接入 qwen3 模型。

09 项目完成

对比平时前端开发出来的 UI 效果,AI 生成的界面在配色、图形上更具质感,减少了塑料感。

总结

Skills 原本是在 IDE 编辑器中类似插件的功能,以文件形式作为插件对接 Claude、Opencode 等 AI 平台。

通过毒蛇产品经理、UI 提示词设计师、UI/UX 设计智能、代码开发实现这四个技能模块优化项目开发流程,能显著提升效率和质量。各技能模块化分工,减少沟通成本,确保需求从产品到实现的无缝衔接。自动化生成 UI 提示和设计,降低错误率;专业技能集成,保证产品符合最佳实践。并行处理任务(如提示生成与设计),加快开发周期;智能工具减少手动工作量。结合 UI/UX 智能和代码实现,推动创意落地,提升用户体验和产品竞争力。

目录

  1. 基于 Opencode Skills 的 AI 开发流程控制
  2. 指令式控制 AI 开发流程的主控调度器
  3. Skills 技能指令
  4. 4 个 Skills 的作用说明
  5. 01 安装 Opencode
  6. 02 选择项目开发 AI 模型
  7. 03 开始项目(音乐机器人项目开发)
  8. 04 毒蛇产品经理 (product-spec-builder)
  9. 05 Product-Spec.md 已生成变更记录
  10. 06 UI 提示词生成 (ui-prompt-generator)
  11. 07 UI/UX 设计智能 (ui-ux-pro-max)
  12. 08 代码开发实现 (dev-builder)
  13. 09 项目完成
  14. 总结
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • DeepSeek-OCR-WEBUI 私有化部署指南
  • 基于 IPIDEA API 的 eBay 商品数据 Python 采集实战
  • MySQL 基础实战:数据创建与查询核心技巧
  • Java 前缀和算法实战:从一维到二维的解题思路
  • Git 强制推送后提交仍可通过哈希访问
  • Spec-Kit 与 Copilot 实现 AI 规格驱动开发
  • 大模型工具函数调用(Function Calling)实战指南
  • uv 虚拟环境管理:venv 创建、激活与版本指定
  • Linux 匿名管道通信:原理与代码实战
  • npm 安装 OpenClaw 遇到 Git 错误及权限问题处理
  • MySQL 核心原理与高频面试题实战指南
  • 算法题解析:滑动窗口解决水果成篮问题
  • 程序员如何利用业余时间接私活并实现长远发展
  • 埃斯顿机器人编程快速入门指南
  • MyBatisPlus 与 Thymeleaf 全栈分页实战
  • JetBrains IDE 中集成使用 Claude Code 的配置方法
  • GitNexus 核心引擎:架构、流程与优化实践
  • 技术博客搭建指南:如何选择发布平台
  • MySQL 表操作实战指南:创建、修改与删除详解
  • GLM-5 大模型代码生成能力深度评测与实战体验

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

  • Markdown转HTML

    将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online