跳到正文
Hacker News· boikom·· 7 天前AI 评分34

让 Claude Code 写 Svelte 表格,它会自己手写 1000 行

Ask Claude Code for a Svelte table and it writes 1k lines of its own

AI 导读

在空 SvelteKit 项目中用同一提示词跑十次 Claude Code 2.1.274,它每次都从零手写 DataTable.svelte,即使要求处理 10,000 行也只自行加上虚拟化,从未主动安装表格库。

正文 · AI 翻译

SvGrid / Blog / AIWe Asked Claude Code for a Svelte Table. It Wrote Its Own Every Time, Until the Project Said Otherwise - SvGrid blog illustration

十个全新的 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 上下文页面上。

这没有展示的内容

十次构建运行和两个问题,一个助手,一天。另一个模型、另一个工具或更长的提示词可能会有不同的表现,而且随着模型被重新训练,推荐答案也会改变。我们计划每月重新运行相同的提示词,并在数字发生变化时记录下来。

标签:AI 与 LLM、SvelteKit、Svelte 5

来源:Hacker News · svgrid.com