498 lines
18 KiB
HTML
498 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Waza — 把工程师的习惯变成 Claude 可执行的技能</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
|
||
background: #f8f9fb;
|
||
color: #1d1d1f;
|
||
line-height: 1.8;
|
||
padding: 2rem;
|
||
}
|
||
.container { max-width: 860px; margin: 0 auto; }
|
||
|
||
/* Header */
|
||
.header {
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||
color: #fff;
|
||
padding: 3rem 2.5rem;
|
||
border-radius: 16px;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.header h1 { font-size: 2rem; margin-bottom: 0.5rem; }
|
||
.header .meta { font-size: 0.85rem; opacity: 0.7; }
|
||
.header .meta span { margin-right: 1.5rem; }
|
||
|
||
/* Sections */
|
||
h2 {
|
||
font-size: 1.4rem;
|
||
margin: 2.5rem 0 1rem;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 2px solid #e5e7eb;
|
||
color: #1a1a2e;
|
||
}
|
||
h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; color: #333; }
|
||
p, li { margin-bottom: 0.8rem; }
|
||
ul, ol { padding-left: 1.5rem; }
|
||
|
||
/* TL;DR */
|
||
.tldr {
|
||
background: linear-gradient(135deg, #eef2ff, #e0e7ff);
|
||
border-left: 4px solid #4f46e5;
|
||
padding: 1.2rem 1.5rem;
|
||
border-radius: 0 12px 12px 0;
|
||
margin: 1rem 0;
|
||
}
|
||
.tldr blockquote {
|
||
font-style: italic;
|
||
color: #3730a3;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
/* Mnemonic Card */
|
||
.mnemonic-card {
|
||
background: #fffbeb;
|
||
border: 2px dashed #f59e0b;
|
||
border-radius: 12px;
|
||
padding: 1.2rem 1.5rem;
|
||
margin: 1rem 0;
|
||
}
|
||
.mnemonic-card strong { color: #92400e; font-size: 1.1rem; }
|
||
.mnemonic-card table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 0.8rem;
|
||
}
|
||
.mnemonic-card th, .mnemonic-card td {
|
||
text-align: left;
|
||
padding: 0.5rem 0.8rem;
|
||
border-bottom: 1px solid #fef3c7;
|
||
}
|
||
.mnemonic-card th { background: #fef3c7; color: #92400e; }
|
||
|
||
/* Fission Section */
|
||
.fission-section {
|
||
background: #fef2f2;
|
||
border-left: 4px solid #dc2626;
|
||
padding: 1.5rem;
|
||
border-radius: 0 12px 12px 0;
|
||
margin: 1.5rem 0;
|
||
}
|
||
.fission-section h3 { color: #991b1b; }
|
||
.fission-section blockquote {
|
||
font-style: italic;
|
||
color: #7f1d1d;
|
||
border-left: 3px solid #fca5a5;
|
||
padding-left: 1rem;
|
||
margin: 0.5rem 0;
|
||
}
|
||
|
||
/* Code blocks */
|
||
pre {
|
||
background: #1e1e2e;
|
||
color: #cdd6f4;
|
||
padding: 1.2rem 1.5rem;
|
||
border-radius: 10px;
|
||
overflow-x: auto;
|
||
margin: 1rem 0;
|
||
font-size: 0.9rem;
|
||
}
|
||
code { font-family: "JetBrains Mono", "Fira Code", monospace; }
|
||
:not(pre) > code {
|
||
background: #e5e7eb;
|
||
padding: 0.15rem 0.4rem;
|
||
border-radius: 4px;
|
||
font-size: 0.85em;
|
||
color: #7c3aed;
|
||
}
|
||
|
||
/* Tables */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 1rem 0;
|
||
}
|
||
th { background: #f3f4f6; font-weight: 600; }
|
||
th, td {
|
||
text-align: left;
|
||
padding: 0.6rem 0.8rem;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
|
||
/* ASCII diagram */
|
||
.ascii-diagram {
|
||
background: #1e1e2e;
|
||
color: #a5b4fc;
|
||
padding: 1.5rem;
|
||
border-radius: 10px;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 0.8rem;
|
||
white-space: pre;
|
||
overflow-x: auto;
|
||
line-height: 1.5;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
/* Mermaid container */
|
||
.mermaid-container {
|
||
background: #fff;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
margin: 1rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Details / FAQ */
|
||
details {
|
||
background: #fff;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 10px;
|
||
padding: 0.8rem 1.2rem;
|
||
margin: 0.6rem 0;
|
||
}
|
||
details[open] { border-color: #4f46e5; }
|
||
details summary { cursor: pointer; font-weight: 600; }
|
||
details p { margin-top: 0.8rem; color: #555; }
|
||
details pre { margin-top: 0.5rem; }
|
||
|
||
/* Search bar */
|
||
.search-bar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: #f8f9fb;
|
||
padding: 0.8rem 0;
|
||
}
|
||
.search-bar input {
|
||
width: 100%;
|
||
padding: 0.8rem 1.2rem;
|
||
border: 2px solid #e5e7eb;
|
||
border-radius: 10px;
|
||
font-size: 1rem;
|
||
outline: none;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.search-bar input:focus { border-color: #4f46e5; }
|
||
|
||
/* Hidden class for search filter */
|
||
.hidden { display: none !important; }
|
||
|
||
/* Footer */
|
||
.footer {
|
||
margin-top: 3rem;
|
||
padding-top: 1.5rem;
|
||
border-top: 1px solid #e5e7eb;
|
||
font-size: 0.85rem;
|
||
color: #888;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Self-test */
|
||
.self-test {
|
||
background: #f0fdf4;
|
||
border: 1px solid #bbf7d0;
|
||
border-radius: 12px;
|
||
padding: 1.2rem 1.5rem;
|
||
margin: 1rem 0;
|
||
}
|
||
.self-test ol li { margin-bottom: 0.6rem; }
|
||
|
||
@media (max-width: 600px) {
|
||
body { padding: 1rem; }
|
||
.header { padding: 2rem 1.5rem; }
|
||
.header h1 { font-size: 1.5rem; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container" id="content-area">
|
||
|
||
<!-- Search Bar -->
|
||
<div class="search-bar">
|
||
<input type="text" id="search-input" placeholder="搜索当前页面内容..." />
|
||
</div>
|
||
|
||
<!-- Header -->
|
||
<div class="header">
|
||
<h1>Waza：把工程习惯变成 Claude 可执行的技能</h1>
|
||
<div class="meta">
|
||
<span>作者：叫我小杨同学的小码酱</span>
|
||
<span>日期：2026-04-17</span>
|
||
<span>标签：Claude Code / Skills / 工程习惯</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块 0: TL;DR -->
|
||
<h2>核心摘要</h2>
|
||
<div class="tldr">
|
||
<p><strong>一句话核心</strong>：Waza（技）把优秀工程师的思维方式打包成 8 个 Claude Code 技能 —— 不是替你写代码更快，而是逼你想清楚再动手。</p>
|
||
<blockquote>认知挂钩：像道场里的型（Kata）。每个技能是一个固定套路，练到变成肌肉记忆。</blockquote>
|
||
<blockquote>真理锚点：<em>"AI makes you faster. It doesn't make you think more clearly."</em></blockquote>
|
||
</div>
|
||
|
||
<!-- 模块 1: 概念破冰 -->
|
||
<h2>概念破冰</h2>
|
||
|
||
<div class="mnemonic-card">
|
||
<strong>八字口诀：思设审猎，写学读健</strong>
|
||
<table>
|
||
<tr><th>字</th><th>技能</th><th>阶段</th></tr>
|
||
<tr><td>思</td><td><code>/think</code></td><td>动手前：挑战问题、压力测试设计</td></tr>
|
||
<tr><td>设</td><td><code>/design</code></td><td>做界面：产出有辨识度的 UI</td></tr>
|
||
<tr><td>审</td><td><code>/check</code></td><td>合并前：自审 diff、标记危险操作</td></tr>
|
||
<tr><td>猎</td><td><code>/hunt</code></td><td>出 bug 时：系统调试、确认根因再修</td></tr>
|
||
<tr><td>写</td><td><code>/write</code></td><td>写文档：中英双语自然表达</td></tr>
|
||
<tr><td>学</td><td><code>/learn</code></td><td>新领域：六阶段研究 → 输出 → 自审 → 发布</td></tr>
|
||
<tr><td>读</td><td><code>/read</code></td><td>读资料：URL/PDF 转干净 Markdown</td></tr>
|
||
<tr><td>健</td><td><code>/health</code></td><td>定期体检：CLAUDE.md、rules、skills、hooks、MCP</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<h3>架构概览</h3>
|
||
<div class="ascii-diagram">
|
||
+-----------------------------------------------+
|
||
| Waza 技能矩阵 |
|
||
+-----------------------------------------------+
|
||
| |
|
||
| /think → /design → /check /hunt |
|
||
| 思考 设计 审查 调试 |
|
||
| ↑ ↑ |
|
||
| └────── /write ────────────┘ |
|
||
| 写作 |
|
||
| |
|
||
| /learn /read /health |
|
||
| 学习 阅读 体检 |
|
||
| 输入 ──────→ 转化 ──────→ 输出 |
|
||
+-----------------------------------------------+</div>
|
||
|
||
<!-- 模块 2: 深度解析 -->
|
||
<h2>深度解析</h2>
|
||
|
||
<h3>哲学：为什么是"习惯"而不是"规则"？</h3>
|
||
<p>Waza 的名字来自日语"技"（わざ），武道中意为"练到成本能的招式"。这与市面上大多数 AI 技能包有根本区别。</p>
|
||
|
||
<table>
|
||
<tr><th>维度</th><th>规则驱动（Superpowers/gstack）</th><th>习惯驱动（Waza）</th></tr>
|
||
<tr><td>指令风格</td><td>大量 rules，步步规定</td><td>设目标 + 约束，然后放手</td></tr>
|
||
<tr><td>模型上限</td><td>指令写多少，模型做多少</td><td>约束关键边界，其余自由发挥</td></tr>
|
||
<tr><td>模型进化</td><td>模型变强后，旧规则变束缚</td><td>模型变强，收益复利增长</td></tr>
|
||
<tr><td>学习曲线</td><td>陡峭，配置多</td><td>扁平，一个技能一个触发场景</td></tr>
|
||
</table>
|
||
|
||
<h3>工程生命周期</h3>
|
||
|
||
<div class="mermaid-container">
|
||
<div class="mermaid">
|
||
flowchart TD
|
||
A["开始新任务"] --> B["/read: 读取相关文档"]
|
||
B --> C["/think: 挑战问题，验证架构"]
|
||
C --> D{"前端界面?"}
|
||
D -->|"是"| E["/design: 产出有审美的 UI"]
|
||
D -->|"否"| F["编码实现"]
|
||
E --> F
|
||
F --> G{"遇到 bug?"}
|
||
G -->|"是"| H["/hunt: 系统调试"]
|
||
G -->|"否"| I["/check: 自审 diff"]
|
||
H --> I
|
||
I --> J{"写作/文档?"}
|
||
J -->|"是"| K["/write: 润色中英双语"]
|
||
J -->|"否"| L["完成"]
|
||
K --> L
|
||
M["定期"] --> N["/health: 体检环境"]
|
||
O["新领域"] --> P["/learn: 六阶段研究"]
|
||
</div>
|
||
</div>
|
||
|
||
<h3>逐技能拆解</h3>
|
||
|
||
<p><strong><code>/think</code></strong> —— 先想清楚再动手。挑战问题本身。需求是真的吗？有没有更简单的解法？防止"用正确的方式做错误的事"。</p>
|
||
|
||
<p><strong><code>/design</code></strong> —— 界面要有辨识度。产出有明确审美方向的 UI，不是千篇一律的默认样式。</p>
|
||
|
||
<p><strong><code>/check</code></strong> —— 合并前的最后一道关。审查 diff，自动修复安全的问题，标记危险命令，用证据说话。支持并行多专家审查。</p>
|
||
|
||
<p><strong><code>/hunt</code></strong> —— 系统调试，不靠猜。先复现，再定位，确认根因后才修。</p>
|
||
|
||
<p><strong><code>/write</code></strong> —— 像人一样写文章。重写中英双语，去掉生硬公式化表达。</p>
|
||
|
||
<p><strong><code>/learn</code></strong> —— 六阶段研究法。收集 → 消化 → 大纲 → 填充 → 精炼 → 自审 → 发布。学习靠产出驱动。</p>
|
||
|
||
<p><strong><code>/read</code></strong> —— 把一切变成干净 Markdown。特殊处理 GitHub、PDF、微信、飞书。</p>
|
||
|
||
<p><strong><code>/health</code></strong> —— Claude 环境的体检报告。检查 CLAUDE.md、rules、skills、hooks、MCP，按严重程度分级。</p>
|
||
|
||
<h3>项目起源</h3>
|
||
<p>Waza 来自真实项目的失败积累：找错代码路径来回 4 轮才定位、发布 release 前忘了上传 artifacts、服务器重启 8 次都没看报错信息。<strong>30 天、300+ 次会话、7 个项目、500 小时</strong> —— 每个 "gotcha" 对应一次真实失败。</p>
|
||
|
||
<!-- 模块 3: 深度裂变 -->
|
||
<div class="fission-section">
|
||
<h2>深度裂变</h2>
|
||
|
||
<h3>矛盾一："不完整是设计出来的"</h3>
|
||
<blockquote>"Waza 只有 8 个技能。不是做不到更多，而是刻意不做完。"</blockquote>
|
||
<p>市面上的 AI 技能包动辄几十个技能。Waza 反其道：八个习惯，每个做一件事，有明确触发条件，然后让路。对 AI 工具来说，"够用"比"全能"更有价值。</p>
|
||
|
||
<h3>矛盾二："每条规则都是天花板"</h3>
|
||
<blockquote>"作者写的每一条规则，都成了模型能力的上限。"</blockquote>
|
||
<p>传统做法是"把所有规则写进 prompt"，隐含假设是作者比模型聪明。Waza 的做法是"设目标 + 约束，然后放手"——等模型变强了，自由度带来的收益呈复利。</p>
|
||
|
||
<h3>矛盾三："英文推理更强"的隐性红利</h3>
|
||
<blockquote>"大多数 AI 模型的英文训练量远超其他语言。"</blockquote>
|
||
<p>母语写 prompt → 隐形翻译层 → 推理质量打折。切换英文后，回答更精准，顺便练英语。Waza 提供 <code>english.md</code> 规则让 Claude 在英文交互时即时纠错。</p>
|
||
</div>
|
||
|
||
<!-- 模块 4: 实战指南 -->
|
||
<h2>实战指南</h2>
|
||
|
||
<h3>安装</h3>
|
||
<pre><code># Claude Code
|
||
npx skills add tw93/Waza -a claude-code -g -y
|
||
|
||
# Codex
|
||
npx skills add tw93/Waza -a codex -g -y
|
||
|
||
# Statusline
|
||
curl -sL https://raw.githubusercontent.com/tw93/Waza/main/scripts/setup-statusline.sh | bash
|
||
|
||
# 英文教练
|
||
mkdir -p ~/.claude/rules && curl -fsSL https://raw.githubusercontent.com/tw93/Waza/main/rules/english.md -o ~/.claude/rules/english.md</code></pre>
|
||
|
||
<h3>避坑指南</h3>
|
||
<table>
|
||
<tr><th>反模式</th><th>后果</th><th>正确做法</th></tr>
|
||
<tr><td>跳过 <code>/think</code> 直接写</td><td>做了错误的事，返工成本高</td><td>再急也先想 5 分钟</td></tr>
|
||
<tr><td><code>/hunt</code> 时直接猜修复</td><td>埋新雷</td><td>先复现，确认根因</td></tr>
|
||
<tr><td>不看 <code>/check</code> 结果就合并</td><td>危险命令进主干</td><td>审查完再合</td></tr>
|
||
<tr><td>装了技能从不调用</td><td>形同虚设</td><td>养成肌肉记忆</td></tr>
|
||
<tr><td>忽略 <code>/health</code></td><td>配置逐渐腐烂</td><td>每周跑一次</td></tr>
|
||
</table>
|
||
|
||
<h3>ROI 分析</h3>
|
||
<table>
|
||
<tr><th>投入</th><th>回报</th></tr>
|
||
<tr><td>安装 5 分钟</td><td>每个任务避免至少 1 次返工</td></tr>
|
||
<tr><td><code>/think</code> 多花 5 分钟</td><td>可能省下 2 小时重写</td></tr>
|
||
<tr><td><code>/check</code> 多花 2 分钟</td><td>避免线上事故</td></tr>
|
||
<tr><td><code>/learn</code> 多花 30 分钟</td><td>产出 > 消费 10 倍效率</td></tr>
|
||
</table>
|
||
|
||
<!-- 模块 5: 温故知新 -->
|
||
<h2>温故知新</h2>
|
||
|
||
<h3>FAQ</h3>
|
||
|
||
<details>
|
||
<summary><b>Q1: Waza 和其他技能包有什么区别？</b></summary>
|
||
<p>Superpowers 和 gstack 功能更全但更重。Waza 只做 8 个最核心的习惯。哲学不同：规则驱动 vs 习惯驱动。</p>
|
||
</details>
|
||
|
||
<details>
|
||
<summary><b>Q2: 只能在 Claude Code 里用吗？</b></summary>
|
||
<p>不。<code>/health</code> 是 Claude Code 独有的。其余 7 个技能也支持 Codex。</p>
|
||
</details>
|
||
|
||
<details>
|
||
<summary><b>Q3: 可以自己改技能吗？</b></summary>
|
||
<p>可以。每个技能是一个文件夹，MIT 协议。包含参考文档、辅助脚本、gotchas。</p>
|
||
</details>
|
||
|
||
<details>
|
||
<summary><b>Q4: 适合什么水平的开发者？</b></summary>
|
||
<p>有工程经验但想更系统化的开发者。已有习惯 → 帮你自动化；还没养成 → 逼你养成。</p>
|
||
</details>
|
||
|
||
<details>
|
||
<summary><b>Q5: "Waza" 怎么念？</b></summary>
|
||
<p>日语「技」（わざ / waza），发音类似 "哇扎"。</p>
|
||
</details>
|
||
|
||
<details>
|
||
<summary><b>Q6: 作者 tw93 是谁？</b></summary>
|
||
<p>活跃在 GitHub 和 Twitter 的独立开发者，MiaoYan 等项目的作者。养了两只猫：汤圆和可乐。</p>
|
||
</details>
|
||
|
||
<details>
|
||
<summary><b>Q7: 最新版本？</b></summary>
|
||
<p>截至 2026-04-17，最新版本 V3.10.0，252 commits，3.3k+ stars，202 forks。</p>
|
||
</details>
|
||
|
||
<details>
|
||
<summary><b>Q8: 怎么卸载？</b></summary>
|
||
<pre><code>npx skills remove tw93/Waza -g
|
||
rm -f ~/.claude/statusline.sh
|
||
rm -f ~/.claude/rules/english.md</code></pre>
|
||
</details>
|
||
|
||
<div class="self-test">
|
||
<h3>自测题</h3>
|
||
<ol>
|
||
<li>Waza 的核心哲学是什么？为什么"不完整是设计出来的"？</li>
|
||
<li>8 个技能分别是什么？各自在什么场景触发？</li>
|
||
<li>跳过 <code>/think</code> 直接编码，最大风险是什么？举例说明。</li>
|
||
<li>描述从接到需求到合并代码的完整 Waza 工作流。</li>
|
||
<li>Waza 只有 8 个技能。你觉得缺了什么？为什么作者可能故意不做？</li>
|
||
<li>如何在现有工作流中引入 Waza 技能？哪些最容易养成习惯？</li>
|
||
<li>如果你要给 Waza 贡献第 9 个技能，会是什么？写 SKILL.md 大纲。</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<h3>参考资源</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/tw93/Waza">tw93/Waza GitHub 仓库</a></li>
|
||
<li><a href="https://tw93.fun/en/2026-03-12/claude.html">作者博客：Claude Code 六层框架</a></li>
|
||
<li><a href="https://x.com/HiTw93/status/2041312649510822103">Waza 演示推文</a></li>
|
||
</ul>
|
||
|
||
<div class="footer">
|
||
<p>叫我小杨同学的小码酱 | 2026-04-17 | 基于 Waza 项目分析生成</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Mermaid JS -->
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
|
||
<script>
|
||
mermaid.initialize({
|
||
startOnLoad: true,
|
||
theme: 'neutral',
|
||
securityLevel: 'loose',
|
||
flowchart: { useMaxWidth: true, htmlLabels: true }
|
||
});
|
||
</script>
|
||
|
||
<!-- Search Filter Script -->
|
||
<script>
|
||
window.onload = function() {
|
||
const input = document.getElementById('search-input');
|
||
if(!input) return;
|
||
input.addEventListener('input', (e) => {
|
||
const term = e.target.value.toLowerCase().trim();
|
||
const contentArea = document.getElementById('content-area');
|
||
const blocks = contentArea.querySelectorAll('p, li, blockquote, .fission-section, .mnemonic-card, details, .mermaid, .ascii-diagram, .tldr, .self-test');
|
||
|
||
if(term.length === 0) {
|
||
blocks.forEach(el => el.classList.remove('hidden'));
|
||
document.querySelectorAll('h1, h2, h3, th, td').forEach(el => el.classList.remove('hidden'));
|
||
return;
|
||
}
|
||
|
||
blocks.forEach(el => el.classList.add('hidden'));
|
||
document.querySelectorAll('h1, h2, h3, th, td').forEach(el => el.classList.add('hidden'));
|
||
|
||
blocks.forEach(el => {
|
||
if(el.innerText.toLowerCase().includes(term)) {
|
||
el.classList.remove('hidden');
|
||
}
|
||
});
|
||
});
|
||
};
|
||
</script>
|
||
|
||
</body>
|
||
</html> |