OpenCode Skills 使用指南
📅 生成时间：2026-05-18 📦 已安装 Skills：32 个
目录
已安装 Skills 列表
1. Impeccable（前端设计反模式词典）
- 作者：Paul Bakaus（前 Google 工程师）
- GitHub：25.6K⭐
- 子技能数量：1
- 核心功能：审查修复前端设计，避免 AI 生成的廉价感
2. Taste Skill（设计品味控制）
- 作者：leonxlnx
- GitHub：15.9K⭐
- 子技能数量：12
- 核心功能：3 参数控风格，从零设计方案
- 包含子技能：
- brandkit（品牌套件）
- industrial-brutalist-ui（工业粗野主义）
- gpt-taste（GPT 风格）
- image-to-code（截图转代码）
- imagegen-frontend-mobile（移动端生成）
- imagegen-frontend-web（Web 端生成）
- minimalist-ui（极简主义）
- full-output-enforcement（完整输出）
- redesign-existing-projects（重新设计项目）
- high-end-visual-design（高端视觉设计）
- stitch-design-taste（拼接风格）
- design-taste-frontend（前端设计品味）
3. Anthony Fu Skills（Vue/Vite 生态）
- 作者：Anthony Fu（Vue/Vite 核心维护者）
- GitHub：4.8K⭐
- 子技能数量：17
- 核心功能：Vite/Vue/Pinia 框架最佳实践
- 包含子技能：
- antfu, nuxt, pinia, pnpm, slidev, tsdown
- turborepo, unocss, vite, vitepress, vitest
- vue, vue-best-practices, vue-router-best-practices
- vue-testing-best-practices, vueuse-functions, web-design-guidelines
4. 高德地图 Amap Skills
- 作者：高德官方 + 社区
- 子技能数量：1
- 核心功能：高德地图 JSAPI v2.0 开发、POI 搜索、路径规划
5. UI-UX-Pro-Max（UI/UX 知识库）
- 版本：v2.2.3
- 子技能数量：1
- 核心功能：67 种 UI 风格 + 161 套调色板 + 57 组字体搭配
CMD 命令行使用方法
启动 OpenCode CLI
# 进入项目目录
cd your-project-path
# 启动 opencode
opencode
使用 Skills 的方式
方式一：自动触发（推荐）
直接用自然语言描述你的需求，Skills 会自动激活：
# Taste Skill 自动触发
帮我设计一个 SaaS 仪表盘页面
# Anthony Fu Skills 自动触发
帮我配置 Vite 项目，使用 Vue 3 + TypeScript
# 高德地图自动触发
帮我接入高德地图，实现 POI 搜索功能
# UI-UX-Pro-Max 自动触发
做一个玻璃拟态风格的登录页面
方式二：命令手动触发
使用斜杠命令手动调用特定 Skill：
# Impeccable 命令
/impeccable audit # 审查现有 UI
/impeccable polish # 打磨细节
/impeccable critique # 设计批判
/impeccable animate # 添加动画
/impeccable colorize # 重新配色
/impeccable harden # 加固设计一致性
/impeccable distill # 简化过度设计
/impeccable normalize # 规范化
# UI-UX-Pro-Max 命令
/ui-ux-pro-max # 触发 UI/UX 知识库
方式三：参数调节（Taste Skill）
Taste Skill 支持 3 个参数调节设计风格：
# 参数说明
DESIGN_VARIATION: 1-10 # 1=保守居中，10=不对称大胆
MOTION_INTENSITY: 1-10 # 1=简单 hover，10=磁吸滚动动画
VISUAL_DENSITY: 1-10 # 1=宽松奢华，10=紧凑仪表盘
# 使用示例
帮我设计一个页面，DESIGN_VARIATION=7，MOTION_INTENSITY=5，VISUAL_DENSITY=3
OpenCode 桌面版使用方法
启动桌面版
- 双击桌面快捷方式或从开始菜单启动 OpenCode Desktop
- 打开你的项目文件夹
使用 Skills 的方式
方式一：在对话框中直接输入
桌面版的对话框支持与 CLI 相同的自然语言触发：
# 输入示例
帮我设计一个现代化的电商首页
方式二：使用斜杠命令
在对话框中输入斜杠命令：
/impeccable audit
方式三：通过 Skills 面板
- 点击左侧边栏的 Skills 图标
- 浏览已安装的 Skills 列表
- 点击想要使用的 Skill
- 在弹出的对话框中输入需求
桌面版特有功能
- 实时预览：生成的 UI 可以在内置浏览器中实时预览
- 截图反馈：可以截图当前页面，让 AI 基于截图优化
- 历史记录：所有 Skill 调用都有历史记录，方便回溯
各 Skill 详细使用说明
Impeccable 使用场景
| 场景 | 命令 | 说明 |
|---|---|---|
| 审查现有 UI | /impeccable audit | 检查设计问题 |
| 打磨细节 | /impeccable polish | 优化间距、颜色、字体 |
| 设计批判 | /impeccable critique | 获取设计建议 |
| 添加动画 | /impeccable animate | 添加交互动效 |
| 重新配色 | /impeccable colorize | 优化配色方案 |
| 加固一致性 | /impeccable harden | 统一设计语言 |
| 简化设计 | /impeccable distill | 去除过度设计 |
| 规范化 | /impeccable normalize | 统一规范 |
Taste Skill 使用场景
| 场景 | 触发方式 | 说明 |
|---|---|---|
| 从零设计 | "帮我设计一个..." | 自动生成完整设计方案 |
| 风格切换 | "换成极简风格" | 切换设计风格 |
| 参数调节 | "动效多一点" | 调整设计参数 |
Anthony Fu Skills 使用场景
| 场景 | 触发方式 | 说明 |
|---|---|---|
| Vite 配置 | "帮我配置 Vite" | Vite 最佳实践 |
| Vue 组件 | "写一个 Vue 组件" | Vue 3 最佳实践 |
| 路由设计 | "设计 Vue Router" | 路由架构建议 |
| 状态管理 | "用 Pinia 管理状态" | Pinia 使用规范 |
| 测试编写 | "写 Vitest 测试" | 测试最佳实践 |
高德地图 Skills 使用场景
| 场景 | 触发方式 | 说明 |
|---|---|---|
| 地图初始化 | "接入高德地图" | 地图配置 |
| POI 搜索 | "搜索附近的餐厅" | 地点搜索 |
| 路径规划 | "规划驾车路线" | 导航功能 |
| 地理编码 | "地址转坐标" | 坐标转换 |
UI-UX-Pro-Max 使用场景
| 场景 | 触发方式 | 说明 |
|---|---|---|
| 风格选择 | "玻璃拟态风格" | 67 种 UI 风格 |
| 配色方案 | "SaaS 配色" | 161 套调色板 |
| 字体搭配 | "推荐字体组合" | 57 组字体搭配 |
| UX 优化 | "优化无障碍" | 99 条 UX 指南 |
常见问题
Q1: Skills 没有自动触发怎么办？
A: 尝试以下方法：
- 确保已重启 OpenCode
- 使用更明确的关键词（如"设计"、"配置"、"接入"）
- 使用斜杠命令手动触发
Q2: 如何查看已安装的 Skills？
A:
# CLI 方式
npx skills list
# 桌面版
点击左侧边栏的 Skills 图标
Q3: Skills 安装在哪里？
A:
- 全局 Skills：
C:\Users\{用户名}\.skills\ - 项目级 Skills：
{项目目录}\.opencode\skills\ - Agents Skills：
C:\Users\{用户名}\.agents\skills\
Q4: 如何卸载 Skills？
A:
npx skills remove {skill-name}
Q5: Skills 之间会冲突吗？
A: 不会。Skills 是独立的能力模块，可以同时使用。例如：
- 先用 Taste Skill 生成设计方案
- 再用 Impeccable 审查优化
Q6: 网络问题导致安装失败怎么办？
A: 手动安装：
cd C:\Users\{用户名}\.skills
git clone https://github.com/{owner}/{repo}.git {skill-name}
推荐工作流
前端页面设计流程
1. 使用 Taste Skill 生成初始设计
→ "帮我设计一个 SaaS 仪表盘"
2. 使用 Impeccable 审查优化
→ /impeccable audit
3. 使用 UI-UX-Pro-Max 优化细节
→ "优化配色和字体"
4. 使用 Anthony Fu Skills 确保代码质量
→ "用 Vue 3 最佳实践重构"
Vue 项目开发流程
1. 使用 Anthony Fu 初始化项目
→ "用 Vite + Vue 3 + TypeScript 创建项目"
2. 使用 Taste Skill 设计 UI
→ "设计项目管理页面"
3. 使用 Anthony Fu 编写组件
→ "写一个数据表格组件"
4. 使用 Vitest 编写测试
→ "为组件写单元测试"
技能速查表
| 需求 | 推荐 Skill | 触发词 |
|---|---|---|
| 设计页面 | Taste Skill | "设计"、"创建页面" |
| 审查设计 | Impeccable | /impeccable audit |
| Vue 开发 | Anthony Fu | "Vue"、"Vite"、"Pinia" |
| 地图功能 | Amap Skills | "地图"、"定位"、"导航" |
| UI 风格 | UI-UX-Pro-Max | "风格"、"配色"、"字体" |
祝你使用愉快！ 🚀
