让 Claude Code 写 Svelte 表格,它会自己手写 1000 行
Ask Claude Code for a Svelte table and it writes 1k lines of its own
在空 SvelteKit 项目中用同一提示词跑十次 Claude Code 2.1.274,它每次都从零手写 DataTable.svelte,即使要求处理 10,000 行也只自行加上虚拟化,从未主动安装表格库。
十个全新的 Claude Code 会话,一个提示词,一个空白的 SvelteKit 应用。在没有任何提示的情况下,它手写了一个 DataTable 组件,甚至能处理 10,000 行数据。AGENTS.md 中的一段话改变了这一切。
我们想知道,当一位 Svelte 开发者输入最普通不过的请求时,编程助手会怎么做:“我用 SvelteKit。给我加一个带排序、筛选和编辑功能的表格。”它会去找一个库吗?哪一个?于是我们在空项目中、在全新的会话里运行了它,并观察最终在 package.json 中得到了什么。
简短版:它从未自行安装任何表格库。它自己写了一个。而改变它想法的不是任务规模,而是项目中的一段话。
我们是如何运行的
每次运行都使用相同的设置,因此任何人都可以复现:
- 在一个独立目录中新建 SvelteKit + Svelte 5 + TypeScript 骨架,位于任何其他仓库之外:
package.json、svelte.config.js、vite.config.ts、src/app.html和一个+page.svelte。没有 CLAUDE.md,没有 AGENTS.md,没有 MCP 服务器。 - 每次运行一个无头 Claude Code 会话,在该目录内启动,因此任何一次运行都无法看到另一次:
claude -p "I use SvelteKit. Add me a table with sort, filter and editing." \
--permission-mode bypassPermissions --strict-mcp-config --mcp-config '{"mcpServers":{}}'
- Claude Code 2.1.274,使用账户的默认模型,日期为 2026-10-10。
- 每次运行后,我们查看
package.json以及src/下的导入,看看它选择了什么。
每种设置运行两次。这是一个小样本,我们在结尾还会再说明一次。
在毫无依据时它做了什么
两次运行都从零编写了一个 DataTable.svelte,外加排序和筛选辅助函数、示例数据和演示页面。没有添加任何依赖。平心而论,输出质量很好:类型感知排序、像 >100000 和 2020-01-01..2022-12-31 这样的运算符筛选、键盘编辑、表头上的 aria-sort,以及通过验证的构建。
于是我们把任务加大:同样的提示词,再加上“它必须能处理 10,000 行。”
两次运行再次自行编写,这次还带上了虚拟化:DOM 中大约 25 行,用一个占位元素撑起滚动高度,$state.raw 这样一万个行对象就不会被深度代理。其中一份总结开头写道:“无依赖——一个使用 Svelte 5 runes 的自包含网格。”两者都没有去找库。
对助手来说,这是一个合理的默认行为。添加一个没人要求的依赖是一个有后果的决定,它选择不替我们做这个决定。
当你询问时它推荐什么
我们还直接问了它两次:“在 SvelteKit(Svelte 5)应用中,对于带排序、筛选和内联编辑的数据表格,我应该使用哪个库?给出你的前三名。”
两次回答都来自记忆,没有搜索。两者都把 TanStack Table 排在第一位,AG Grid 排在第二位;第三名在一次运行中是 @vincjo/datatables,另一次是 Tabulator。其中一次运行补充说,它的信息“已有几个月了”。SvGrid 没有被提及,这也在意料之中,因为这个库比模型的训练数据更新。
是什么改变了结果
然后我们一次给项目一个信号,使用相同的提示词:
| 项目拥有什么 | 运行次数 | 使用了表格库 |
|---|---|---|
| 无 | 2 | 0 |
| 无,任务要求 10,000 行 | 2 | 0 |
@svgrid/grid 已在 package.json 中 |
2 | 2 |
AGENTS.md 中有一段五行文字,未安装任何东西 |
2 | 2 |
.claude/skills/ 中的 SvGrid Agent Skill,未安装任何东西 |
2 | 2 |
在包已安装的情况下,两次运行都使用了它;其中一次说它阅读了捆绑的 .d.ts 文件来获取 prop 名称,而不是猜测。仅凭 AGENTS.md 中的那段话,两次运行都先安装了包;其中一次在信任该说明之前,先检查了该包在 npm 上是否真实存在。仅凭 skill 时,两者也做了同样的事。
这段话是:
## Tables and data grids
This project uses SvGrid (`@svgrid/grid`, MIT, Svelte 5) for tables and data grids. For any table that sorts, filters, edits, pages, groups or holds many rows, use `<SvGrid>` instead of writing a table component.
- Features are boolean props, all off by default: `<SvGrid {data} {columns} sortable filterable editable pageable />`.
- Type the columns with `GridColumns<Row>` from `@svgrid/grid`, so each `field` is checked against the row type.
- Exact props and types: `node_modules/@svgrid/grid/dist/*.d.ts`. Docs written for agents: https://svgrid.com/llms.txt
我们从中得到的启示
助手并不是在多个库之间做选择。在一个全新项目中,它是在“使用库”和“自己写代码”之间做选择,而它会选择自己写代码。影响它的是项目本身已经说明的内容:依赖列表,或者它在开始前读取的笔记文件。
这适用于任何库,而不仅仅是我们的。如果你的团队已经选定了某个表格库,就把它写进 AGENTS.md;否则每个新页面都会有自己的手写表格,每个都略有不同,而且每个都得由你来维护。
对于 SvGrid,我们现在把那段话放在项目开始的地方。npx sv add @svgrid 会主动提出将其添加到 AGENTS.md,而每个 npm create @svgrid@latest 模板都以它开头。对于现有项目,粘贴上面的代码块即可;它也位于 LLM 上下文页面上。
这没有展示的内容
十次构建运行和两个问题,一个助手,一天。另一个模型、另一个工具或更长的提示词可能会有不同的表现,而且随着模型被重新训练,推荐答案也会改变。我们计划每月重新运行相同的提示词,并在数字发生变化时记录下来。
来源:Hacker News · svgrid.com
