AI辅助优化 | 锤子前端

《软件慢是因为设计差，不是因为语言慢》

Sat, 31 Oct 2026 01:02:49 GMT

《软件慢是因为设计差，不是因为语言慢》

标签：
#软件工程 #性能优化
#性能瓶颈分析 #IO密集型 #Amdahl定律 #AI辅助优化 #系统设计 #语言选型误区

总结：
这篇文章反驳了“用 AI 把软件重写成 C/Rust 就能变快”的流行观点。作者的核心论点是：大多数真实程序是 I/O 密集型的，性能瓶颈在数据库、网络和磁盘等待上，语言本身的执行速度只占很小一部分；即使遇到 CPU 密集型热点，慢语言也早已通过调用 C 级库（如机器学习中的矩阵运算）把重活外包了出去。真正有效的提速来自重新设计——缓存、异步、并行、消除 N+1 查询——而不是逐行翻译代码。

文章要点：
1. 大多数真实程序（尤其是 CRUD 类应用）是 I/O 密集型的：一次请求可能 50% 的时间花在数据库查询上，重写语言最多只能优化另外那 50%，按照 Amdahl 定律，整体提速上限约为 1.5～2 倍，远达不到数量级提升。
2. 慢语言早已学会“外包”：Python 之所以能打机器学习这类 CPU 密集场景，是因为 NumPy 等库把矩阵运算下放到高度优化的 C/汇编甚至 GPU 上——如果程序 80% 时间在 GPU 上做矩阵乘，用 C 重写 Python 代码毫无意义。
3. Bryan Cantrill 2018 年的经典案例佐证“设计 > 语言”：他把精心优化的 C 程序移植到 Rust 时借用检查器处处碰壁，改用“Rust 朴素写法”后反而快 30%——原因是 Rust 内部默认用 B 树而非二叉搜索树，缓存效率更高。
4. 作者亲历的有效提速手段全部是设计层面的：缓存慢操作、异步化/后台任务、并行化、把 N 条 SQL 合成一条、用快查询替换慢查询、跳过不必要的操作——没有一条与语言速度有关。
5. 慢语言反而可能更利于优化：高层语言代码一眼就能看出程序在做什么，更容易发现 N+1 查询或可异步化的 API 调用；如果先重写成汇编，这些结构性问题反而难以察觉。
6. 少数真正 CPU 密集的热点（如 tiktoken 用汇编重写提速 5 倍）确实存在，但属于窄缝场景；而且这类提速往往也来自重新设计（去掉正则依赖），不是语言本身的功劳。
7. 给 AI 时代的实用建议：别指挥智能体“把它重写成 C/Rust 来提速”，而要让它去分析火焰图、定位热点、提出重设计方案——语言重写只在极少数不可再简化的 CPU 密集热点处才值得动用。

URL：https://seangoedecke.com/software-is-slow-because-of-bad-design-not-slow-languages/

Seangoedecke

Software is slow because of bad design, not slow languages

Many people are saying that AI will make software faster by rewriting it in faster languages, but this isn’t generally true. Most programs cannot be…

《用 AI 定制框架替换 Next.js：一个静态网站的“超个性化”重构实验》

Mon, 14 Sep 2026 01:14:08 GMT

《用 AI 定制框架替换 Next.js：一个静态网站的“超个性化”重构实验》

标签：
#Web开发 #前端工程 #AI辅助编程 #NextJs #静态网站 #自定义框架 #性能优化 #Vercel部署

总结：

作者 Max Leiter 用 Claude Code（Fable 5 架构、Opus 实现）在约 3 小时内把个人博客从 Next.js 迁移到了一个为站点量身定制的静态构建框架。新方案把全站编译成纯 HTML，按需加载少量 Preact islands，结果页面体积、Lighthouse 分数、构建时间全面大幅优于 Next.js；代价是放弃了框架生态的无数隐性优化，后续维护与安全问题也由自己承担。

文章要点：

1. 作者让 AI “按需造一个比 Next.js 更快的专属框架”，核心思路是只保留这个网站真正用到的 Next.js 功能，而不是继续背着整个框架跑。

2. 新框架本质上是一个构建脚本：读取文章目录，用 React 在服务端渲染每条路由为静态 index.html，再按 Vercel Build Output API 输出，M2 MacBook 上热构建只要约 0.5 秒。

3. 性能提升非常夸张：首页 JS 从 208 KB 降到 2.3 KB（约 -99%），移动端 LCP 从 2.4 秒降到 1.3 秒，整页重量从 1153 KB 降到 78 KB，Lighthouse 直接冲到 100 分。

4. 博客文章页同样收益明显：HTML 更小、JS 只剩 2.3 KB，移动端 LCP 从 2.2 秒降到 1.1 秒，页面重量从 405 KB 降到 57 KB，软导航也改成更轻的 partial/prerender 方案。

5. 交互没有消失，而是改成“islands”模式：桌面窗口管理器和命令面板用 Preact 组件按需水合，命令面板首次按 Cmd+K 才加载，Preact 兼容层只有约 7 KB，比 React 的 52 KB 轻很多。

6. 构建链路保留原有体验：MDX 仍在构建期用同一套 remark/rehype 插件编译，shiki 在构建时同时输出两套主题的代码高亮，所以切换主题不需要额外 JS。

7. AI 还写了一个“parity harness”，对旧站 101 条路由做快照，对比 head、正文和代码块，结果抓出了 8 篇未发布文章泄漏进 RSS、以及一张 404 的 OG 图这类真实问题。

8. 整个实验花费约 669 美元，API 运行 8 小时 27 分，代码新增 20914 行、删除 2022 行，大约用掉 Claude Code 20x 订阅额度的 10%。

9. 作者认为这种做法的意义在于“只 vendor 你真正需要的东西”：框架被压缩到约 5000 行，人和模型都更容易审查，也能减少供应链攻击面。

10. 缺点也很直白：Next.js 里成百上千个小优化和边界处理 AI 未必都知道或能复现；没有现成的 agent 工具链集成；安全修复不再自动从上游来；而且网站一旦有问题，bug、安全、功能需求都归你自己管。

11. 文章还记录了两个浏览器层面的坑：Chrome 的跨文档 view transitions 会因 head 里的外部 module script 静默跳过入场动画，所以 runtime 必须内联；Safari 对 Speculation Rules 的 feature detection 需要同时检查 API 支持和 document.prerendering。

12. 作者最后判断：未来可能会出现更多“vendoring”和 agentic rewrite，也就是所谓“slop forks”；更激进的猜测是，框架本身可能会消亡，因为框架真正值钱的是沉淀下来的庞大知识，而这些知识未来可能被蒸馏成 skills 或某种新标准。

URL：
https://maxleiter.com/blog/thank-u-next

Max Leiter's website

thank u, next | Max Leiter

Replacing Next.js with a vibe-coded "framework"

《OpenWolf：Claude Code 的开源"第二大脑"》

Tue, 05 May 2026 09:57:50 GMT

《OpenWolf：Claude Code 的开源"第二大脑"》

标签：#AI辅助编程 #Claude_Code #Token优化 #开发工具

总结：OpenWolf 是一款为 Claude Code CLI 设计的开源中间件，通过 6 个无感知的生命周期钩子脚本，为 AI 助手提供项目文件索引、学习记忆和 Token 追踪能力。实测在 20 个项目、132+ 会话中平均减少 65.8% 的 Token 消耗，最高可达 80%，同时拦截 71% 的重复文件读取，让 Claude Code 从"盲目工作"变成"有记忆地智能工作"。

文章要点：
- 解决 Claude Code 的"盲目"痛点：Claude 在读取文件前不知道文件内容，会重复读取同一文件、扫描整个目录找函数，导致 Token 消耗过快
- 6 个钩子脚本实现无感知增强：基于 SessionStart、PreToolUse、PostToolUse、Stop 三个生命周期事件，自动执行文件索引、重复读取拦截、偏好记忆和 Token 估算，无需改变任何工作习惯
- 核心文件系统构建"第二大脑"：anatomy.md 记录项目文件地图与 Token 估算，cerebrum.md 积累用户偏好与"不再重复"清单，buglog.json 归档历史 Bug 修复方案，token-ledger.json 追踪终身 Token 消耗
- 显著的 Token 节省效果：大型项目实测从 250 万 Token 降至 42.5 万（节省约 80%），20 个项目平均节省 65.8%，拦截 71% 的重复读取，累计节省超 200 万 Token
- 纯本地运行零额外成本：所有钩子均为纯 Node.js 文件 I/O，无网络请求、无外部 API 调用，仅依赖 Node.js 20+ 和 Claude Code CLI
- 额外实用功能：内置 Design QC 自动截图供 Claude 评估 UI，Reframe 功能提供 12 个 UI 框架的迁移知识库，支持实时 Web 仪表盘查看统计数据
- 诚实的局限性说明：Claude Code 钩子功能较新偶有可靠性问题，Token 追踪基于字符比例估算（误差约 15%），cerebrum.md 依赖 Claude 遵守指令更新（合规率 85-90%）

文章URL：https://github.com/cytostack/openwolf

GitHub

GitHub - cytostack/openwolf: Portable project memory across Claude Code, Codex and OpenCode, plus token accounting measured from…

Portable project memory across Claude Code, Codex and OpenCode, plus token accounting measured from harness transcripts. Local file I/O, no API calls, no telemetry. - cytostack/openwolf

《AI编码代理生产级工程技能集》

Sun, 26 Apr 2026 09:39:26 GMT

《AI编码代理生产级工程技能集》

标签：#AI辅助编程 #开发工具 #AI_Agent #工程规范 #ClaudeCode #Cursor #代码审查 #测试驱动开发 #CI_CD

总结：
这是一个为AI编码代理（如Claude Code、Cursor、GitHub Copilot等）设计的生产级工程技能仓库，由Addy Osmani维护。它将资深工程师在真实项目中的工作流、质量门禁和最佳实践编码为20个结构化技能，覆盖从需求定义到上线发布的完整开发生命周期，让AI代理在每次编码时都能保持一致的专业水准，避免走"最短路径"而跳过测试、审查等关键环节。

文章要点：
- 六阶段开发流水线：从Define（定义需求）→ Plan（拆解任务）→ Build（增量编码）→ Verify（验证测试）→ Review（质量门禁）→ Ship（安全发布），像工厂流水线一样规范AI的每一步动作
- 7个斜杠命令即开即用：/spec写需求文档、/build增量开发、/test跑测试、/review代码审查……输入命令就能自动激活对应的技能组合，非常顺手
- 20个实战技能全覆盖：从API设计、前端工程、TDD测试驱动，到性能优化、安全加固、Git工作流、CI/CD自动化，每个技能都自带步骤清单、验证标准和"反找借口"表格（比如AI想跳过测试时，会被技能里的反驳论据怼回去😄）
- 多工具无缝兼容：Claude Code一键插件安装，Cursor复制到rules目录，Gemini CLI、Windsurf、GitHub Copilot、Kiro等主流AI编程工具都能直接用，技能就是纯Markdown，通吃所有支持系统提示词的代理
- Google工程文化落地：融入了Hyrum定律、Beyonce规则、测试金字塔、Chesterton围栏等Google实战智慧，不是泛泛而谈的理论，而是嵌入到每一步工作流中的可执行标准

文章URL：https://github.com/addyosmani/agent-skills

GitHub

GitHub - addyosmani/agent-skills: Production-grade engineering skills for AI coding agents.

Production-grade engineering skills for AI coding agents. - addyosmani/agent-skills

《用 React、GSAP 和 AI 打造 Maxima Therapy 网站》

Sun, 26 Apr 2026 02:32:10 GMT

《用 React、GSAP 和 AI 打造 Maxima Therapy 网站》

标签：#前端 #React #GSAP #TailwindCSS #ReactRouter #AI辅助开发 #创意编程 #Lottie #MatterJS #ScrollTrigger

总结：

本文是 Codrops 上的一篇案例复盘，记录了团队为神经多样性支持机构 Maxima Therapy 打造高互动、高插画风格网站的全过程。文章详细介绍了技术栈选型（Sanity + React Router + GSAP + TailwindCSS）、多个核心交互模块的实现思路（可拖拽轮播、SVG 水波纹、物理绳索、形状变形、贴纸动效），以及 AI（Claude Code）在实际开发中的辅助作用与局限。对于想在前端项目中融合创意动画与 AI 提效的开发者来说，这是一份非常接地气的实战参考。

文章要点：

- 技术栈选型很务实：团队选了 React Router（而非 Next.js）做静态生成，搭配 Sanity 做 CMS、Cloudflare Pages 托管，理由是配置更轻量；GSAP + Lenis 负责动画和滚动平滑，TailwindCSS 负责样式，TypeScript 做类型检查
- 首页轮播的交互设计很巧妙：把四个节目板块拆成四个旋转的 <div>，只有当前可见的板块才响应交互；切换时触发路由变化，但轮播组件通过布局隔离避免了不必要的重渲染
- SVG 水波纹效果用 AI 辅助生成：Claude Code 帮忙把原始 SVG 路径转换成带 50 个控制点的系统，再结合 GSAP 实现鼠标触发的涟漪动画——AI 在创意编码这类"繁琐但规则明确"的任务上表现不错
- Lottie 动画与 Canvas 背景混合：通过离屏 Canvas 绘制固定图案，再用 Lottie 的 Canvas 渲染模式做遮罩，最后用 globalCompositeOperation 合成，实现了滚动联动的背景效果
- 物理引擎让页面更有生命力：招聘页用 Matter.js 模拟"supports"单词被两根绳索悬挂的物理效果，绳索由复合体堆叠而成，SVG 文字根据物理模拟结果实时位移
- AI 是"得力助手"但不是"万能替身"：Claude Code 在 SVG 优化、Sanity 数据模型扩展、TypeScript 类型生成上帮了大忙，但也会出现结果不一致、擅自改动数据获取模式、甚至"幻觉"出不存在 SVG 路径的情况；团队建议把 AI 用在范围明确的小任务上
- ScrollTrigger 让滚动交互管理很轻松：配合 useGSAP hook 自动清理，避免了手动写 Intersection Observer 的繁琐，实现了文字显现、图片揭示、SVG 播放等丰富的滚动动效

文章URL：

https://tympanus.net/codrops/2026/04/06/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai/

Codrops

Building the Maxima Therapy Website: React, GSAP, and Dabbling with AI | Codrops

A behind-the-scenes look at how we built Maxima Therapy with playful interactions, creative code, and a little AI help along the way.

《基于Andrej Karpathy观察的Claude Code行为优化指南》

Mon, 20 Apr 2026 01:29:14 GMT

《基于Andrej Karpathy观察的Claude Code行为优化指南》

标签：#AI辅助编程 #ClaudeCode #LLM最佳实践 #代码质量

总结：该项目将Andrej Karpathy对LLM编程缺陷的观察转化为可落地的CLAUDE.md规范文件，通过"编码前思考、极简优先、精准修改、目标驱动"四大原则，系统性解决AI助手常见的过度假设、过度工程化和无关修改等问题，帮助开发者获得更精准、简洁、可控的AI编程辅助体验。

文章要点：
- 问题诊断：LLM常犯的错误包括擅自假设却不验证、过度复杂化代码、擅自修改无关代码等，Karpathy一针见血地指出了这些痛点
- 编码前思考原则：不确定时要主动提问而非猜测，有歧义时呈现多种解读，该拒绝时要敢于说"这样更简单"
- 极简优先原则：只做被明确要求的功能，不为单用场景造抽象，不把200行代码写成50行就算过关
- 精准修改原则：只碰该碰的代码，不动"看起来不顺眼"的邻居代码，自己的烂摊子自己收拾，但别碰别人留下的
- 目标驱动原则：把"加个验证"改成"写测试让非法输入失败，再让它通过"，给AI明确的验收标准，它会自己循环到达标
- 使用方式：支持Claude Code插件一键安装，或下载CLAUDE.md文件到项目根目录，Cursor用户也有对应规则文件可用
- 取舍提醒：这套规范偏向谨慎而非速度，简单改错别字不必上全套，但复杂任务能帮你避开返工噩梦

文章URL：https://github.com/forrestchang/andrej-karpathy-skills

GitHub

GitHub - multica-ai/andrej-karpathy-skills: A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's…

A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls. - multica-ai/andrej-karpathy-skills