发表于 2025-11-13 · 更新于 2026-05-13

AI Agent & SKILL

约定

Claude Code 的一些实用技巧，让我的编码更轻松：

（将这些添加到你的 CLAUDE .md 文件中）

“在编写任何代码之前，请先描述你的方案并等待批准。如果需求不明确，在编写任何代码之前务必提出澄清问题。”

2.“如果一项任务需要修改超过 3 个文件，请先停下来，将其分解成更小的任务。”

3.“编写代码后，列出可能出现的问题，并建议相应的测试用例来覆盖这些问题。”

4.“当发现bug时，首先要编写一个能够重现该bug的测试，然后不断修复它，直到测试通过为止。”

5.“每次我纠正你之后，就在 CLAUDE .md 文件中添加一条新规则，这样就不会再发生这种情况了。”

Claude Code 专家级提示词教程：提升您的 AI 编程效率

一、AI编程工具

安装开源OpenCode (SST团队)，告别付费Claude Code (Anthropic)

二、Agent Skills 安装方式

介绍哪些是值得的SKILL前，我们先介绍SKILL的安装方式

1、为单agent安装（不推荐）

例：如果只为opencode安装，建议存放位置：**open ~/.config/opencode/skills**

1.1、三方的SKILL

以安装 anthropics/skills 为例：

直接告诉opencode，请安装 https://github.com/anthropics/skills，然后其会自动进行以下操作：
下载所有 17 个技能的 SKILL.md 文件
同步全部技能目录（含支持文件）到 .opencode/skills/
安装 opencode-agent-skills 插件增强技能管理
但安装 superpowers 的时候，其好像就不是放在 .opencode/skills/目录下

1.2、自己的SKILL：手动软链接（简单）

# 注意：原文件不能使用相对路径，会导致无法正确链接，及显示原身失败，必须使用绝对路径
# 注意：原文件不能使用相对路径，会导致无法正确链接，及显示原身失败，必须使用绝对路径
# 注意：原文件不能使用相对路径，会导致无法正确链接，及显示原身失败，必须使用绝对路径

# 克隆仓库后链接整个 AI-qskills 目录（必须使用绝对路径）
ln -s "/Users/用户名/Project/AI/AI-qskills" ~/.config/opencode/skills/ai-qskills

# 或者链接单个 skill
ln -s "/Users/用户名/Project/AI/AI-qskills/life-reply-crush" ~/.config/opencode/skills/life-reply-crush

2、为所有agent安装（推荐）

但是我们的SKILL需要在多个agent中使用。所以推荐使用skill管理器。

下载skill管理器 https://github.com/xingkongliang/skills-manager/releases ，并安装。

遇到右键打开，还是提示**”应用已损坏，无法打开。你应该将它移到废纸篓。”**，则改为在终端运行以下命令

1	xattr -cr /Applications/skills-manager.app

2.1、三方的SKILL

出名的SKILL，可通过从榜单中安装，如 obra/superpowers

从榜单安装

不出名的可以通过Git安装

从Git安装

2.2、自己的SKILL

从本地安装

三、Agent Skills（智能体技能）

Agent Skills（智能体技能）介绍

skill来源：

在线市场：Skills Marketplace
skill管理器中

1、Superpowers

obra/superpowers

Superpowers 构建了一个端到端的开发流程：
第一阶段：头脑风暴（brainstorming）当你说”我想做一个 X 功能”时，AI 不会直接写代码。它会像苏格拉底式对话一样，一次问一个问题，帮你厘清真正的需求。设计方案分 200-300 字的小节呈现，每节都要你确认”看起来对吗”。
第二阶段：工作区隔离（using-git-worktrees）设计确认后，AI 会创建一个新的 git 分支和 worktree，确保开发环境隔离，不污染主分支。
第三阶段：编写计划（writing-plans）把设计拆解成 2-5 分钟的小任务。每个任务都有精确的文件路径、完整的代码片段、验证步骤。目标是让”一个没有判断力、没有项目背景、讨厌写测试的热情初级工程师”也能执行。
第四阶段：子代理驱动开发（subagent-driven-development）这是 v4.0 的重大创新。主代理为每个任务派遣一个”新鲜”的子代理（没有上下文污染），实现任务后进行两阶段审查：
规格符合性审查：代码是否完全符合需求规格？是否多做了？少做了？
代码质量审查：只有规格审查通过后才进行。检查代码是否干净、测试覆盖是否足够
审查是循环的：发现问题→修复→再审查，直到通过。
第五阶段：收尾（finishing-a-development-branch）所有任务完成后，验证测试、呈现选项（合并/创建 PR/保留/丢弃），清理 worktree。

2、anthropics/skills 建议全装

2.1. anthropics/skill-creator

2.2. anthropics/frontend-design

2.3. anthropics/docx 、 anthropics/xlsx 、anthropics/pptx

不装的话，到时候生成文档95%以上会出问题

3、find-skills — 帮助发现和安装 agent skills

4、planning-with-file 选择其中的 planning-with-file-en 即可

5、ui-ux-pro-max-skill vs frontend-design

frontend-design 398.4k ↑
ui-ux-pro-max-skill 158.7k ↑

5.1 区别

frontend-design 理论上可以生成完整页面，但它的设计哲学决定了它并不擅长做这件事，或者说，它“不想”做这件事。

它的设计哲学是：“一页有一个惊艳的焦点就够了，其他地方保持克制”。

问题	说明
风格一致性风险	`frontend-design` 每次生成都倾向于“选一个惊艳的方向并贯彻到底”。如果让它一次性生成整个页面，它会为每个模块都注入强烈个性，容易导致页面“每个地方都在抢眼”，缺乏视觉节奏和层次感。
整页生成质量不稳定	第三方评测显示，`frontend-design` 在“实现可执行性”上的评分偏低（50%），因为它的指导偏“设计哲学宣言”而非“可执行的代码模式”。换句话说，它更擅长讲“怎么做才美”，而不是“怎么写才完整”。
模块扩展能力有限	当你让它“扩展现有Hero到整个页面”时，它需要保持Hero的独特性同时补充其他模块。这不是它的设计初衷——它更适合“从零创造一个惊艳的Hero”，而非“基于已有风格补充剩余部分”。

对比维度	`frontend-design`	`ui-ux-pro-max-skill`
擅长的事	创造惊艳的视觉焦点（Hero区域）	生成一整套完整的设计系统
整页生成能力	有，但容易风格过载	强，自带“行业规范+完整模块”模板
风格一致性保障	依赖单次prompt的发挥	通过设计系统强制执行
模块扩展	需要手动保持风格统一	自动分析已有风格并补全
适用场景	独立页面/核心视觉模块	完整页面/多页面项目

5.2 正确工作流的逻辑链

1. frontend-design 生成惊艳的 Hero（确定“视觉灯塔”）
                    ↓
2. 把 Hero 代码给 ui-ux-pro-max（让它“抄作业”）
                    ↓
3. ui-ux-pro-max 分析 Hero 的风格特征
   （颜色、字体、圆角、间距、动效模式）
                    ↓
4. ui-ux-pro-max 基于分析结果，匹配行业规则
   （金融/医疗/宠物服务等）
                    ↓
5. ui-ux-pro-max 生成剩余模块
   （服务展示、评价、预约表单、页脚等）
                    ↓
6. 最终：Hero 保持惊艳 + 全页面风格统一 = 成品

核心洞察：frontend-design 负责“定调”，ui-ux-pro-max 负责“铺开”。前者是创意总监，后者是执行团队。

5.3 使用举例

场景：为一家高端宠物店设计预约网站

假设我们的目标是让用户预约“猫咪洗护”或“狗狗美容”服务。

方案一：组合拳 (先frontend-design，后ui-ux-pro-max)

这个方案的目的是先定惊艳调性，再补全整体结构。

序	步骤描述	直接对AI说：	预期效果
1	用 `frontend-design` 打造视觉焦点	“请使用 `frontend-design` 技能，为一家高端宠物美容店的官网首页设计Hero区域。需要采用柔和、有机的“Biophilic Design”（亲生物设计）风格，使用圆润的Organic Shapes（有机形态）和温暖的 earth tone（大地色系），重点突出“预约”按钮。”	AI会为你生成一个极具高级感和亲和力的头部区域，视觉冲击力强，足以让用户记住这个品牌。
2	用 `ui-ux-pro-max` 扩展为完整页面（在Hero代码生成后）	“很好，请保留上面的Hero风格，现在调用 `ui-ux-pro-max` 技能，帮我把这个页面扩展为完整的官网首页。需要补全以下模块：服务项目展示（猫咪洗护、狗狗美容）、优势特点、用户评价、页脚。这是一个宠物服务行业，请确保整体设计系统与Hero部分100%统一。”	AI会分析第一步Hero代码中的色彩、圆角、字体等风格要素，并以此为基础生成一套完整的设计系统，然后用于搭建整个页面。最终页面既有惊艳的头部，又有规整、专业的下半部分。

方案二：单独使用 (仅用 ui-ux-pro-max)

如果你想让AI直接从零生成一个结构完整、风格正确的页面，可以直接这样问：

“请使用 ui-ux-pro-max 技能，为一个宠物美容服务设计完整的官网首页。风格要求‘活泼、亲和’，需要包含Hero区、服务项目、关于我们和预约按钮，使用HTML+Tailwind实现。”

你会看到：AI会先进行一系列“思考”，调用内部的搜索脚本，精确匹配“宠物服务”行业的推荐方案，然后生成一个配色（如温暖的奶油色、浅木色）、布局和字体都非常专业且符合行业预期的完整页面。你可能还会在回复中看到类似“正在搜索产品类型‘pet service’…”的过程信息。它的整体完成度很高，但第一个Hero区域的惊艳感可能不如frontend-design单独产出的效果。

6、agent-browser 浏览器自动化

agent-browser

1	npx skills add vercel-labs/agent-browser@agent-browser -g -y

dvlproadの博客