夜雨聆风大家好，我是宇哥，专注AI编程、智能体，解决小白AI编程问题。
前 3 篇，我们已经把 AI 工具站从「项目文件」推进到了「能打开的第一版页面」。
但第 3 篇的页面还有一个明显问题：只能看，不能找。
这一篇我们继续用 WorkBuddy 当 AI Agent 工作台，不吹工具，不讲玄学，就做一个具体交付物：给首页加上搜索框、分类筛选、价格筛选和验证脚本。
学完之后，你的页面会从「静态工具卡片」变成「可以按关键词和条件筛工具」的小型目录站。
这篇你能做出什么
做完这一篇，你会得到 4 类文件：
lesson-04/
├── data/
│ └── tools.json
├── prompts/
│ └── workbuddy-search-filter-prompt.md
├── scripts/
│ ├── generate-search-filter-page.py
│ └── check-search-filter.py
└── site/
├── index.html
├── styles.css
└── app.js
最终页面会有这些功能：
输入关键词，搜索工具名、摘要、分类、标签、适合人群和使用场景； 点击分类按钮，只看某一类工具； 用价格下拉框筛选 免费 / 可试用 / 付费；页面实时显示当前结果数量； 没有匹配结果时，显示空状态提示； 用 Python 脚本检查页面结构和筛选逻辑是否齐全。
适合谁，不适合谁
适合：
已经跟到第 3 篇，手里有 data/tools.json和静态首页的人；想先用最小代码做出「能用」的目录站，而不是一上来搞复杂后端的人； 想练习「让 AI 生成代码，再用脚本验收」的人。
不适合：
想直接接数据库、登录系统、后台管理的人； 想一步到位做商业级搜索引擎的人； 只想看趋势分析，不想动手新建文件的人。
这一篇还是 MVP 思路：先把前端搜索筛选跑通，后面再升级数据源、审核后台和自动更新。
准备环境
你需要准备：
一个能打开本地文件的浏览器； Python 3； WorkBuddy 或任意 AI Agent 工作台； 第 3 篇留下来的 3 个文件：
data/tools.json
site/index.html
site/styles.css
如果你是从这一篇直接开始，也可以先新建一个目录：
mkdir -p lesson-04/{data,prompts,scripts,site}
然后把第 3 篇的 tools.json 放到：
lesson-04/data/tools.json
验收点：你的目录里至少要看到 data/tools.json，否则后面的页面没数据可读。
先看最终效果
第 3 篇的页面是这样：
工具数据 → 生成静态首页 → 展示 5 张工具卡片
第 4 篇要升级成这样：
工具数据 → 生成搜索筛选页 → 输入关键词 / 点击分类 / 选择价格 → 卡片实时变化
本篇新增的核心是一个 site/app.js。
它不连接后端，不调用接口，只在浏览器里读取每张工具卡片上的 data-* 属性，然后决定「显示」还是「隐藏」。
第一步｜新建第 4 篇目录
先在你的项目里新建目录：
mkdir -p lesson-04/{data,prompts,scripts,site}
然后把第 3 篇的数据文件复制过来：
cp lesson-03/data/tools.json lesson-04/data/tools.json
如果你的目录名和我不一样，手动复制也可以，关键是保证这一篇有：
lesson-04/data/tools.json
验收点：打开 lesson-04/data/tools.json，能看到 5 条工具数据，例如 Cursor、Playwright、Dify、n8n、Vercel。
第二步｜把提示词交给 WorkBuddy
在 lesson-04/prompts/ 下新建文件：
workbuddy-search-filter-prompt.md
复制下面这段提示词进去：
你是我的 AI 编程助手。请基于当前项目里的 `data/tools.json`，为 AI 工具目录站生成一个可直接打开的静态页面，要求如下：
## 输入文件
- `data/tools.json`：工具数据，包含 name、summary、category、tags、pricing、best_for、use_cases、website 等字段。
## 你要生成/修改的文件
```text
site/index.html
site/styles.css
site/app.js
scripts/check-search-filter.py
功能要求
首页顶部保留站点标题和工具总数。 增加一个搜索框，id 必须是 searchInput。增加分类筛选按钮，每个按钮必须带 data-filter="分类名"，全部按钮带data-filter="all"。增加价格筛选下拉框，id 必须是 pricingFilter，选项包含 all、free、free-trial、paid。每张工具卡片必须带： data-namedata-categorydata-pricingdata-tagssite/app.js必须实现：搜索工具名、摘要、分类、标签、适合人群、使用场景。 分类筛选。 价格筛选。 显示当前结果数量，id 为 resultCount。没有结果时显示空状态，id 为 emptyState。生成一个 Python 验证脚本 scripts/check-search-filter.py，检查页面结构、工具数量、筛选控件、JS 函数和关键测试用例。
输出风格
不要接入后端，不要引入复杂框架。 页面适合小白学习，HTML/CSS/JS 都要清晰。 样式保持干净，移动端也能看。
请直接输出完整文件内容，不要只讲思路。
接下来打开 WorkBuddy，把这个提示词发给它。
你要检查它有没有真的输出 4 个文件，而不是只给你一段解释：
```text
site/index.html
site/styles.css
site/app.js
scripts/check-search-filter.py
验收点：如果 WorkBuddy 只讲思路，没有给完整文件内容，就继续补一句：
请不要解释，请直接给我这 4 个文件的完整代码。
第三步｜保存搜索筛选逻辑
这一篇最关键的文件是：
site/app.js
它的核心逻辑如下：
const searchInput = document.querySelector('#searchInput');
const pricingFilter = document.querySelector('#pricingFilter');
const filterButtons = [...document.querySelectorAll('[data-filter]')];
const cards = [...document.querySelectorAll('.tool-card')];
const resultCount = document.querySelector('#resultCount');
const emptyState = document.querySelector('#emptyState');
let activeCategory = 'all';
function normalize(value) {
return String(value || '').trim().toLowerCase();
}
function cardMatchesSearch(card, keyword) {
if (!keyword) return true;
return normalize(card.dataset.search).includes(keyword);
}
function cardMatchesCategory(card) {
return activeCategory === 'all' || card.dataset.category === activeCategory;
}
function cardMatchesPricing(card) {
const selectedPricing = pricingFilter.value;
return selectedPricing === 'all' || card.dataset.pricing === selectedPricing;
}
function applyFilters() {
const keyword = normalize(searchInput.value);
let visibleCount = 0;
cards.forEach((card) => {
const visible = cardMatchesSearch(card, keyword) && cardMatchesCategory(card) && cardMatchesPricing(card);
card.hidden = !visible;
if (visible) visibleCount += 1;
});
resultCount.textContent = String(visibleCount);
emptyState.hidden = visibleCount !== 0;
}
searchInput.addEventListener('input', applyFilters);
pricingFilter.addEventListener('change', applyFilters);
filterButtons.forEach((button) => {
button.addEventListener('click', () => {
activeCategory = button.dataset.filter;
filterButtons.forEach((item) => item.classList.toggle('active', item === button));
applyFilters();
});
});
applyFilters();
这段代码做了 3 件事：
监听搜索框输入； 监听分类按钮和价格下拉框； 每次条件变化，都重新判断每张工具卡片要不要显示。
第四步｜给每张卡片补 data 属性
搜索筛选能不能工作，关键不在按钮多漂亮，而在每张卡片有没有可读的数据。
每张工具卡片建议长这样：
<article
class="tool-card"
data-name="cursor"
data-category="AI 编程"
data-pricing="paid"
data-tags="paid vscode beginner-friendly"
data-search="cursor 面向开发者的 ai 编程编辑器 ai 编程 paid vscode beginner-friendly ai 编程小白 独立开发者 生成代码 理解项目 重构代码"
>
<!-- 卡片内容 -->
</article>
这里最重要的是 data-search。
它把工具名、摘要、分类、标签、适合人群和使用场景都拼在一起。这样用户搜：
open-source
Agent
部署
AI 编程
页面都有机会匹配到对应工具。
验收点：打开 site/index.html，搜索 .tool-card，确认每张卡片都有：
data-category
data-pricing
data-tags
data-search
第五步｜运行生成命令
如果你让 WorkBuddy 直接生成了静态文件，可以跳过这一小步。
我这里为了让教程可复现，额外准备了一个生成脚本：
python3 scripts/generate-search-filter-page.py
它会读取：
data/tools.json
然后生成：
site/index.html
site/styles.css
site/app.js
我在本地实际运行得到的输出是：
✅ 搜索筛选版页面生成成功
工具数量：5
分类数量：4
新增控件：搜索框、分类按钮、价格下拉、空状态
页面文件：site/index.html
脚本文件：site/app.js
验收点：命令结束后，site/ 目录下必须有 3 个文件：
index.html
styles.css
app.js
第六步｜运行验证命令
现在不要急着说「应该可以了」。
教程项目一定要有验证。运行：
python3 scripts/check-search-filter.py
我这次实际验证通过，输出如下：
✅ 搜索筛选功能检查通过
工具卡片：5 张
分类按钮：5 个（含全部分类）
价格选项：all / free / free-trial / paid
搜索覆盖：工具名、摘要、分类、标签、适合人群、使用场景
测试关键词：open-source / Agent / 部署
下一篇可以继续准备工具数据源
你也可以把生成和检查合成一条命令：
python3 scripts/generate-search-filter-page.py && python3 scripts/check-search-filter.py
本篇完整真实验证输出是：
✅ 搜索筛选版页面生成成功
工具数量：5
分类数量：4
新增控件：搜索框、分类按钮、价格下拉、空状态
页面文件：site/index.html
脚本文件：site/app.js
✅ 搜索筛选功能检查通过
工具卡片：5 张
分类按钮：5 个（含全部分类）
价格选项：all / free / free-trial / paid
搜索覆盖：工具名、摘要、分类、标签、适合人群、使用场景
测试关键词：open-source / Agent / 部署
下一篇可以继续准备工具数据源
第七步｜人工打开页面检查
命令通过之后，再用浏览器打开：
site/index.html
手动检查 5 件事：
页面顶部显示工具总数； 搜 open-source，能看到开源相关工具；点「Agent 工作流」，只显示该分类工具； 价格选择 paid，只显示付费工具；输入一个不存在的词，页面出现「没有找到匹配工具」。
如果这 5 项都通过，说明第 4 篇完成。
常见报错和排查
1. 页面打开了，但搜索没反应
先检查 index.html 底部有没有这一行：
<script src="app.js"></script>
如果没有，浏览器不会加载筛选逻辑。
2. 分类按钮点击没变化
检查按钮有没有 data-filter：
<button class="filter-button" type="button" data-filter="AI 编程">AI 编程</button>
如果只是普通按钮，JS 不知道它代表哪个分类。
3. 搜索英文标签搜不到
检查卡片有没有把标签写进 data-search：
data-search="cursor ai 编程 paid vscode beginner-friendly ..."
只写页面可见中文，不写英文标签，就很容易搜不到 open-source、paid 这类字段。
4. 检查脚本提示工具数量不对
先打开：
data/tools.json
确认它还是数组格式，并且没有漏掉逗号、引号和中括号。
如果 JSON 格式坏了，页面生成通常也会失败。
完整代码 / 配置汇总
本篇最少要保存这些文件：
data/tools.json
prompts/workbuddy-search-filter-prompt.md
scripts/generate-search-filter-page.py
scripts/check-search-filter.py
site/index.html
site/styles.css
site/app.js
如果你只想先看核心逻辑，记住这 3 个锚点：
# 搜索框
#searchInput
# 价格筛选
#pricingFilter
# 结果数量
#resultCount
以及每张卡片的 4 个数据属性：
data-category
data-pricing
data-tags
data-search
这些字段设计好，后面做数据源、采集器、审核后台时，才不会反复返工。
这一篇你学会了什么
这一篇我们没有做复杂系统，只把第 3 篇页面补上了一个非常关键的能力：查找。
你现在已经完成：
把第 3 篇工具数据继续复用到第 4 篇； 用 WorkBuddy 生成搜索筛选版首页； 用 app.js实现前端筛选逻辑；用 Python 脚本检查页面结构； 用真实命令验证输出，而不是凭感觉说完成。
到这里，一个 AI 工具目录站的 MVP 已经有了基本雏形：
项目文件 → 数据字段 → 第一版页面 → 搜索和筛选
下一篇预告
下一篇是：
用WorkBuddy做AI工具站05：准备工具数据源
我们会开始解决一个更现实的问题：
这些工具数据从哪里来？哪些能采，哪些不该采？哪些字段必须人工确认？
下一篇会继续复用本篇产物：
data/tools.json
site/index.html
site/app.js
scripts/check-search-filter.py
目标不是一上来乱抓网页，而是先做一个可维护、可审核、可扩展的数据源清单。
资料来源
本系列第 1 篇项目文件结构 本系列第 2 篇工具数据字段 本系列第 3 篇第一版静态页面 本篇本地验证命令输出
