编程语言AI大前端
使用 Opencode Skills 组合掌控 AI 开发流程
Opencode Skills 是一种技能增强器，用于升级提示词并记录技能元信息与实现步骤。本文介绍了四个核心 Skills：毒蛇产品经理、UI 提示词设计师、UI/UX 设计智能和全栈开发工程师。通过主控配置文件 AGENTS.md 协调 AI 工作流，结合音乐机器人项目案例，演示了从需求收集、文档生成、UI 设计到代码实现的完整自动化流程，有效提升开发效率与产品质量。
Opencode Skills 是一种技能增强器，用于升级提示词并记录技能元信息与实现步骤。本文介绍了四个核心 Skills：毒蛇产品经理、UI 提示词设计师、UI/UX 设计智能和全栈开发工程师。通过主控配置文件 AGENTS.md 协调 AI 工作流，结合音乐机器人项目案例，演示了从需求收集、文档生成、UI 设计到代码实现的完整自动化流程，有效提升开发效率与产品质量。
Skills 是一种技能增强器，可以理解为升级版的提示词。它的文件记录了某个 Skill（技能）的元信息，包括名称等描述，以及技能的实现步骤。
以下 4 个 Skills 在 AI 项目开发中必不可缺。引入这些 Skills 可以更方便地介入 AI、控制 AI 并为其制定边界。
在我的项目中 .opencode 目录中存在 4 个 Skills，结合与 .opencode 目录同级的 AGENTS.md 文档（主控配置文件），形成 AI 开发流程的主控调度器，负责协调专业技能包。
/dev/dev/ui/prdProduct-Spec.md 和变更记录。不接受模糊回答，直接指出问题。UI-Prompts.md 文件。Mac/Win 版安装指令：
curl -fsSL https://opencode.ai/install | bash
npm i -g opencode-ai
免费的模型有：GLM-4.7、Grok Code。本次使用 GLM-4.7 模型。按 Ctrl + P 即可选择模型。
执行 /prd 命令，毒蛇产品经理开始明确产品开发需求，会渐进式追问开发需求。
开发需求示例： 我想做一个音乐视觉效果：根据音频的输入和音频中歌词的演唱，达到一个动画人物在自动演唱（有人物口型和表情、还有人物的一些演唱基本肢体动作）。API 配置 - 视觉动作分析使用 qwen3-vl-plus，音频歌词识别使用 gemini-2-5-pro。
产品需求文档明确后，就会记录一条开发进度。
执行 Skills 中的 UI 原型图提示词生成功能。
借助 UI-Prompts.md 文档中的提示词 UI 原型图要求，并且使用 Skills 中的 ui-ux-pro-max 开发应用，执行 /dev。
音乐机器人有音频歌词解析、歌词同步，需要接入音频分析模型（此处接入 gemini-2-5），音乐机器人视觉效果接入 qwen3 模型。
对比平时前端开发出来的 UI 效果，AI 生成的界面在配色、图形上更具质感，减少了塑料感。
Skills 原本是在 IDE 编辑器中类似插件的功能，以文件形式作为插件对接 Claude、Opencode 等 AI 平台。
通过毒蛇产品经理、UI 提示词设计师、UI/UX 设计智能、代码开发实现这四个技能模块优化项目开发流程，能显著提升效率和质量。各技能模块化分工，减少沟通成本，确保需求从产品到实现的无缝衔接。自动化生成 UI 提示和设计，降低错误率；专业技能集成，保证产品符合最佳实践。并行处理任务（如提示生成与设计），加快开发周期；智能工具减少手动工作量。结合 UI/UX 智能和代码实现，推动创意落地，提升用户体验和产品竞争力。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online