AI生成内容 | 锤子前端

《为 AI 生成的 HTML 构建安全隔离的预览环境》

Sat, 31 Oct 2026 00:07:59 GMT

《为 AI 生成的 HTML 构建安全隔离的预览环境》

标签：
#Web安全 #前端工程
#AI生成内容 #iframe沙箱隔离 #CSP内容安全策略 #postMessage安全 #同源策略 #srcdoc渲染

总结：
这是一篇面向“AI 生成 UI 必须渲染到某处”这一现实需求的安全工程文章。作者以一个未经防护的 srcdoc iframe 预览为起点，用三种攻击方式（读取父页面、劫持窗口跳转、向外部服务器回传数据）逐一击破，最终给出四层防护组合：最小化沙箱权限、专用隔离域名、CSP 网络层管控、以及严格的 postMessage 通道校验，并强调每次权限放宽都应是可解释、可辩护的决策。

文章要点：
1. 用 srcdoc 渲染 AI 生成的 HTML 看似稳妥，但生成的代码本质是“没人读过的陌生代码”，直接渲染等于把不可信脚本放进了自己应用的上下文。
2. 无沙箱的 iframe 与宿主同源，能直接读取父页面的 DOM、localStorage 和 Cookie；加上 sandbox="allow-scripts" 后获得不透明源，同源读取立即被 SecurityError 阻断。
3. 沙箱需要按需最小授权：默认空沙箱全封禁，只加 allow-scripts；绝不能图省事同时加 allow-same-origin，否则沙箱可被脚本自行移除。
4. 沙箱管不了网络外泄——沙箱内的 fetch 和图片请求仍能把数据带出去，必须用 default-src 'none' 的 CSP 在请求发出前拦截，它与沙箱是互补的两道独立防线。
5. 沙箱化 iframe 的 postMessage 来源会序列化为 "null"，无法用字符串白名单识别身份，必须改用浏览器填充的 event.source 做身份校验，并配合载荷形状校验。
6. 高价值场景应给预览内容单独分配一个一次性域名（如 CodePen 用 cdpn.io 渲染结果），即使沙箱被逃逸，攻击者也落在“什么都没有”的原点上。
7. 实战落地顺序与直觉相反：先建空沙箱再逐项加权限、用隔离域名承载、叠 CSP、严格校验消息通道；放宽策略（如为 CDN 图片加 img-src）必须是能明确说出理由的决策。

URL：https://blog.master.dev/building-an-isolated-preview-for-ai-generated-html/

blog.master.dev

Building an Isolated Preview for AI-Generated HTML

An iframe with srcdoc feels like a safe place to render HTML a model wrote. It isn't. Three tests show how the preview can read your page, escape the frame, and phone home, and four layers of protection close each hole.

《用 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"

《十个防止 AI 代码泛滥的前端项目护栏》

Thu, 10 Sep 2026 23:23:08 GMT

《十个防止 AI 代码泛滥的前端项目护栏》

标签：
#前端 #TypeScript #React #AI编程 #代码质量 #ESLint #测试策略 #CI_CD #代码审查 #工程实践

总结：

本文针对 AI 生成代码速度远超人类审查能力的前端项目，提供了一套实用的十项防护清单。核心思路是通过自动化工具链（类型系统、Linter、变异测试、CI 门禁）在代码合并前拦截机械性错误，而非依赖人工逐行审查。

文章要点：

1. 用 OpenAPI 契约替代手写类型：通过 Hey API 等工具从 OpenAPI 规范直接生成 TypeScript 类型、客户端和 Zod 校验，避免 AI 臆造不存在的 API 字段（如 user.fullName），让编译器在构建期就报错。

2. 开启严格 TypeScript 配置：启用 noUncheckedIndexedAccess 等严格标志，让数组索引访问返回 T | undefined，迫使代码显式处理边界情况，减少 AI 常见的"想当然"代码。

3. 把 Linter 当作行为过滤器：使用 SonarJS、react-you-might-not-need-an-effect、vitest/playwright 插件、jsx-a11y 等 ESLint 插件，自动拦截认知复杂度过高、不必要的 Effect、可访问性违规等问题。

4. 设定架构层边界：使用 eslint-plugin-boundaries 或 dependency-cruiser 强制实施分层架构（如 UI 层不得直接访问 API 层），防止 AI 生成的代码逐渐退化为"GitHub 平均水平"的混乱结构。

5. 将重复出现的错误转化为自定义 Linter 规则：当同一种 bug 第二次出现时，立即编写自定义 ESLint 规则禁止该模式。例如禁止在服务层函数中使用 Math.round 和 toFixed，避免双重取整导致的薪资计算错误。

6. 把规则直接喂给 AI 模型：通过项目规则文件（如 .cursor/rules、CLAUDE.md）或技能文件（如 react-doctor），将项目约定、架构决策和禁止模式直接提供给 AI，让模型在生成代码时就遵循规范。

7. 用变异测试验证测试有效性：使用 Stryker 故意破坏代码（翻转运算符、反转条件、交换返回值），检查现有测试是否能捕获这些变异。存活的变异体通常暴露"只测形状不测内容"的无效测试。一个项目约 4,700 个变异体在 6 分钟内完成扫描。

8. 用 Knip 清理死代码：Knip 可以检测未使用的文件、导出和依赖，配合自定义可达性脚本填补其盲区，防止 AI 生成大量"以防万一"却无人调用的冗余代码。

9. 用 jscpd 检测重复代码：AI 倾向于在不同地方生成几乎相同的逻辑，jscpd 能发现这些重复，提示抽象机会或错误的复制粘贴。

10. 将所有检查强制设为 CI 门禁：上述所有工具（类型检查、Lint、测试、变异测试、重复检测）必须作为 CI 的强制通过项，而非可选建议，确保 AI 生成的代码无法绕过质量关卡。

11. 成本与局限：这些护栏会产生噪音（误报）、规则过时和新人上手摩擦等成本，建议按"类型 → Lint → 测试 → CI"的顺序渐进式推行。同时需注意，这些检查只能捕获机械性错误，无法识别糟糕的品味或错误的抽象。

URL：
https://evilmartians.com/chronicles/ten-anti-ai-slop-moves-for-frontend-projects-going-faster-than-humans-can-review

evilmartians.com

10 anti-AI slop moves for frontend projects going faster than humans can review—Martian Chronicles, Evil Martians’ team blog

Ten checks that catch what AI-written frontend code hides: contract codegen, boundary linting, mutation testing, and dead-code detectors.

《TanStack AI 进入 RC 阶段：从 humble chat() 到完整 AI 生态》

Fri, 28 Aug 2026 01:09:36 GMT

《TanStack AI 进入 RC 阶段：从 humble chat() 到完整 AI 生态》

标签：
#前端开发 #AI框架 #TanStack #TypeScript #开源

总结：

TanStack AI 正式从早期原型迈入 RC（Release Candidate）阶段，标志着其从一个简单的 LLM 聊天方法，成长为覆盖聊天、媒体生成、MCP、沙箱、Agent 编排等全场景的 AI 开发框架。核心设计哲学是"不锁定用户"——在传输层、提供商、前后端技术栈上都保持中立，同时通过极致的类型安全和统一的 API 模式降低学习成本。项目由三人业余时间维护，完全开源，无商业路线图。

文章要点：

1. 从小 chat() 到大生态 — 最初只有 4 个提供商和一个自定义协议，如今已支持 24+ 提供商，采用 AG-UI 官方协议（被 20+ Agent 框架跨语言支持），并扩展到媒体生成、MCP、沙箱、Agent Harness 等领域。

2. 中间件是架构的核心超能力 — 几乎所有高级功能（持久化、沙箱 Agent、内存、遥测）都以中间件形式接入 chat() 方法，Durability 则通过适配器插入流式响应。Lazy Tool Calling 用一个布尔标志就能降低 Token 成本。

3. 传输层零锁定 — 提供 SSE、WebSocket、HTTP Stream、Cap'n Web 等原生传输原语，客户端通过自定义连接适配器消费流，让你对传输层有端到端的完全控制权。

4. 一套 API 模式打遍所有模态 — 无论是文本生成、图像生成、视频生成、音频生成、转录还是实时音频，API 结构几乎完全相同。学一次模式，换适配器即可，不用学 20 套不同 API。

5. 类型安全是 DNA 级别 — 不支持的模型选项、缺少必填属性、把某提供商专属工具传给不支持的模型……统统在编译期报错。目标是让你在再复杂的应用里也能自信上线。

6. chat() 方法是全能核心 — 支持直接对话 LLM 和沙箱 Agent Harness；内置持久化与 Durability（刷新页面、切换对话后能从断点实时续流）；支持 Codex 等 Agent 在远程/本地沙箱中运行；还有 Code Mode（Agent 在 isolate 中写代码并执行，优化性能和成本）。

7. 媒体生成是一等公民 — 实时音频、TTS、图像/视频/音频/音乐生成、转录等全部稳定可用，覆盖 100+ 模型。支持流式直传客户端或一次性生成，两者切换无缝。

8. RAG 与记忆 — 通过 Cohere、OpenRouter 等提供商支持嵌入和重排序；支持所有主流厂商的 Agent 记忆，让 Agent 跨对话记住用户偏好和关键事实。

9. 沙箱与 Agent Harness 不挑提供商 — 不强制你用 Daytona、E2B 或 Vercel Sandboxes，基础设施随你选。支持 Codex、Claude Code、Grok、OpenCode 等 20+ ACP 兼容 Agent，甚至能自建本地编码 Agent。

10. MCP 支持带类型生成 — 不仅能连接外部 MCP 服务器，还能通过 CLI 为远程 MCP 暴露的工具生成类型，保持端到端类型安全。支持连接池和生命周期管理。

11. 持久化与 Durability 是亮点 — 提供存储原语，你只需实现 Store 并通过一致性测试套件验证，接入持久化中间件后，用户一个月后回来也能从断点续聊。Durability 适配器可将流块持久化到内存、Durable Streams 等，用户重连后不会漏掉任何内容——全部配置约 20 行代码。

12. 未来路线图 — 核心架构已锁定，接下来重点在 Agent 工作流与编排（并行运行、定时任务、复杂工作流协调），以及继续补齐提供商生态。完全开源，无商业 upsell，欢迎社区贡献。

URL：
https://tanstack.com/blog/tanstack-ai-rc

TanStack

TanStack AI Enters the RC Phase | TanStack Blog

TanStack AI enters the release candidate phase. The architecture is locked in, with 24 providers, AG-UI, media generation, MCP, sandboxes, and persistence.

《深入理解 AI Agent：设计原理与工程实践》

Tue, 21 Jul 2026 15:41:41 GMT

《深入理解 AI Agent：设计原理与工程实践》

标签：#AI_Agent #LLM #上下文工程 #MCP #RAG #多模态 #Coding_Agent #多智能体协作 #开源书籍

总结：

李博杰（中科大+MSRA+华为天才少年背景，Pine AI 首席科学家）所著《深入理解 AI Agent：设计原理与工程实践》开源主仓库，围绕核心公式 Agent = LLM + 上下文 + 工具展开，全书 10 章正文 + 编译 PDF + 88 个配套实验代码全部 Apache 2.0 开源。上线一周即登顶 GitHub Trending，单日新增 1,734 Stars，目前已超 1.1 万 Stars，社区已自发贡献英文、泰米尔语、越南语翻译。本书填补了"从工程原理层面系统讲透 Agent 的中文开源书"这一空白，强调"Harness Engineering"（模型之外的一切工程能力）才是 Agent 真正的竞争力所在。

文章要点：

1. 核心公式与工程理念：全书围绕 Agent = LLM + 上下文 + 工具展开，提出"Harness Engineering"理念——模型之外的一切工程能力（上下文设计、工具编排、评估体系等）才是 Agent 的护城河，而非单纯依赖模型本身。

2. 10 章体系化内容：从 Agent 基础、上下文工程、记忆与知识库、工具/MCP 协议、Coding Agent、评估体系、后训练、自我进化、多模态实时交互到多 Agent 协作，覆盖从入门到生产级的完整路径。

3. 88 个可运行实验代码：每章配套完整 demo，70+ 可独立运行（配置 API Key 即可），涵盖上下文消融实验、KV Cache 友好设计、提示注入攻防、MCP 三类服务器、17 工具生产级 Coding Agent、语音狼人杀等，所有代码按章节组织并三级标注完成状态。

4. 诚实务实的工程态度：不夸大概念、不制造 hype，每个技术都讲清优势、局限与适用场景，大量使用对照实验（如 mem0 vs Memobase、稠密 vs 稀疏检索、3 种攻击×4 种防御等），用数据说话而非主观断言。

5. 完全开源与社区共建：全书正文（Markdown）、编译 PDF、配图及代码全部 Apache 2.0 开源，中文为主，社区已贡献英文、泰米尔语、越南语版本，这在中文技术书籍中极为罕见。

6. 适合人群：想系统理解 Agent 工程而非只会调 API 的开发者；需要搭建 Coding Agent、RAG、多 Agent 协作等生产系统的工程师；对上下文工程、KV Cache、工具设计等底层机制感兴趣的研究者。

URL：https://github.com/bojieli/ai-agent-book

GitHub

GitHub - bojieli/ai-agent-book: 《深入理解 AI Agent：设计原理与工程实践》（李博杰著）开源主仓库：全书正文、编译版 PDF 与按章配套代码

《深入理解 AI Agent：设计原理与工程实践》（李博杰著）开源主仓库：全书正文、编译版 PDF 与按章配套代码 - bojieli/ai-agent-book

《Markdown SVG 渲染器：AI 辅助开发的实用小工具》

Sat, 30 May 2026 09:06:14 GMT

《Markdown SVG 渲染器：AI 辅助开发的实用小工具》

标签：#前端 #工具 #Markdown #SVG #AI辅助编程 #SimonWillison #WebComponents

总结：

Simon Willison 分享了他用 Claude Opus 4.8 和 GPT-5.5 辅助开发的一个轻量级 Markdown 渲染工具，核心亮点是对 SVG 代码块的特殊处理——不仅能渲染出图像，还提供「渲染图 / 源代码」双标签切换。该工具支持直接粘贴 Markdown、加载远程文件或 GitHub Gist，并用 Fragment URL 记录状态以便分享。整个项目从需求到安全加固完全由 AI 驱动，是「提示驱动开发」的又一实例。

文章要点：

1. 这个工具的诞生源于一个具体场景：Simon 用 LLM CLI 让 Claude Opus 4.8 生成了五组不同思考深度（low 到 max）的「鹈鹕骑自行车」SVG，想找个优雅的方式展示这些 Markdown 日志
2. 核心定制点在于 SVG 围栏代码块（\\\`svg）——普通 Markdown 渲染器只会显示代码，而这个工具会把它变成可交互的 Web Component，默认展示渲染好的 SVG，点击可切换到源码查看
3. 支持三种内容输入方式：直接粘贴 Markdown、输入 CORS 兼容的远程 Markdown 文件 URL、或者加载 GitHub Gist 中的第一个文件
4. 用 URL Fragment（#）记录当前加载的文件地址，刷新页面或分享链接时能自动恢复状态，不用依赖后端
5. 安全方面，Simon 后续用 GPT-5.5（Codex xhigh 模式）专门审计并修复了 XSS 漏洞，体现了 AI 辅助开发中「生成 + 安全加固」的两步走思路
6. 整个工具属于 Simon 的「HTML Tools」系列——单文件 HTML+JS+CSS、无构建步骤、托管在 tools.simonwillison.net，目前已积累超过 150 个类似小工具

URL：https://simonwillison.net/2026/May/28/markdown-svg-renderer/

Simon Willison’s Weblog

Tool: markdown-svg-renderer

Renders markdown with a live preview from pasted text, a raw URL, or a GitHub Gist loaded through a `?url=` query parameter, and older `#url=` links redirect to that form. …

《cc-connect：本地AI编程助手连接消息平台桥梁》

Mon, 11 May 2026 02:36:26 GMT

《cc-connect：本地AI编程助手连接消息平台桥梁》

标签：#开发工具 #AI编程助手 #ClaudeCode #CursorAgent #GeminiCLI #Codex #Telegram #飞书 #钉钉 #Slack #Discord #WeChatWork #LINE #QQ #Weibo

总结：
cc-connect 是一个开源的本地AI编程代理桥接工具，让你可以在飞书、钉钉、Telegram、Slack、Discord、企业微信、LINE、QQ、微博甚至个人微信等11个平台上，随时随地"聊天式"操控 Claude Code、Cursor、Gemini CLI、Codex 等10+种AI编程助手。无需公网IP，手机发消息就能让AI写代码、改Bug、做数据分析，真正实现" anywhere, anytime "的AI开发体验。

文章要点：
• 超全平台覆盖：支持飞书、钉钉、Telegram、Slack、Discord、企业微信、LINE、QQ、微博、个人微信等11个主流聊天平台，大部分平台无需公网IP即可直连，手机/平板随时操控
• 10+AI助手全家桶：完美桥接 Claude Code、Codex、Cursor Agent、Gemini CLI、Kimi CLI、Qoder CLI、OpenCode、iFlow CLI、Pi、Devin 等，还支持 ACP 协议兼容的任何新代理
• 聊天里掌控一切：通过 /model 切换模型、/mode 调整权限模式、/dir 切换工作目录、/new 管理会话、/cron 设置定时任务，所有操作都在聊天窗口完成
• 多Agent协同作战：支持在一个群聊里绑定多个AI机器人，让Claude和Gemini互相配合、接力完成任务，实现"AI团队"协作
• 多模态与记忆：支持语音消息（STT/TTS）、图片截图、文件收发；Agent记忆持久化，/memory 指令随时读写，避免重复交代背景
• Web管理后台：内置完整的Web Admin UI，支持项目CRUD、会话监控、定时任务编辑、Provider管理，5种语言界面，零配置上手
• 安全隔离：支持 Linux/macOS 下的 OS-User 隔离运行，不同项目可用不同Unix用户启动Agent，配合 cc-connect doctor 做安全审计
• 生命周期钩子：支持7种事件类型（消息收发、会话启停、定时触发、权限请求、错误）触发Shell命令或HTTP Webhook，方便集成CI/CD

URL：https://github.com/chenhg5/cc-connect

GitHub

GitHub - chenhg5/cc-connect: Bridge local AI coding agents (Claude Code, Cursor, Gemini CLI, Codex) to messaging platforms (Feishu/Lark…

Bridge local AI coding agents (Claude Code, Cursor, Gemini CLI, Codex) to messaging platforms (Feishu/Lark, DingTalk, Slack, Telegram, Discord, LINE, WeChat Work). Chat with your AI dev assistant f...

《Agent Harness 的解剖学：将 LLM 转化为工作引擎的系统工程》

Sat, 09 May 2026 01:18:04 GMT

《Agent Harness 的解剖学：将 LLM 转化为工作引擎的系统工程》

标签：#AI_Agent #LLM #LangChain #Harness_Engineering #Context_Management #Tool_Orchestration

总结：Agent Harness 是包裹在大模型之外的全套"脚手架"——包括系统提示词、工具调用、文件系统、沙盒环境、记忆管理和编排逻辑等。它把只能输入输出文本的"裸模型"，改造成能持久化状态、执行代码、自主规划并长期协作的合格智能体。文章从模型能力边界出发，逆向推导出每个 Harness 组件存在的必然性，并指出 Harness 工程与模型训练正在协同进化，优化 Harness 本身就能让同一模型在基准测试上从 Top 30 跃升至 Top 5。

文章要点：
- Agent = Model + Harness：如果你不是模型本身，那你就是 Harness。Harness 是除模型权重外的一切代码、配置与执行逻辑，负责把模型的"智商"转化为"产能"
- 模型天生会"健忘"：裸模型只能处理上下文窗口内的信息，无法跨会话记住状态、执行代码或获取实时知识，这些"超能力"全靠 Harness 赋予
- 文件系统是最底层的基础设施：给 Agent 一个工作目录，它就能读写数据、卸载超长上下文、还能让多个 Agent 像同事一样通过共享文件协作
- Bash + 代码执行是万能瑞士军刀：与其为每个场景预写工具，不如直接给 Agent 一个终端，让它现场写代码、装依赖、自己造工具解决问题
- 沙盒让 Agent 安全地"动手"：在隔离环境里跑代码、测效果、看日志，既防手滑删库，又能按需扩容、用完即焚
- 记忆靠"上下文注入"实现：通过 AGENTS.md 等记忆文件标准，把历史经验塞进新会话；再配合网络搜索和 MCP 工具，突破训练数据的时间 cutoff
- 上下文腐烂是隐形杀手：随着对话变长，模型性能会断崖下跌。Harness 通过 Compaction（智能摘要）、Tool 输出卸载和 Skills 渐进式加载来保护宝贵的上下文空间
- 长程任务需要"接力跑"：Ralph Loop 机制让 Agent 在上下文耗尽时，从文件系统读取进度、换一块"干净"上下文继续干；配合 git 记录和自验证循环，实现跨会话的复杂项目开发
- Harness 与模型在"共同进化"：Claude Code、Codex 等产品会把 Harness 逻辑也放进后训练环节，但有趣的是——换一套更优 Harness，同一模型排名能从 30 名外冲进前 5
- 未来 Harness 会"瘦身"但不会消失：随着模型原生规划、验证能力变强，部分 Harness 功能会被模型吸收；但就像提示工程至今仍有价值，Harness 工程作为"围绕模型智能设计系统"的学科，仍将持续发光

文章URL：https://www.langchain.com/blog/the-anatomy-of-an-agent-harness

Langchain

The Anatomy of an Agent Harness

Learn how agent harnesses transform AI models into autonomous work engines. Explore core components: filesystems, sandboxes, and memory.

《Obscura：专为AI代理和爬虫打造的轻量级无头浏览器》

Thu, 07 May 2026 02:07:37 GMT

《Obscura：专为AI代理和爬虫打造的轻量级无头浏览器》

标签：#后端 #Rust #HeadlessBrowser #WebScraping #AI_Agent #Chrome_DevTools_Protocol #Puppeteer #Playwright #Anti_Detection

总结：
Obscura是一款基于Rust编写的开源无头浏览器引擎，专为大规模网页抓取和AI自动化场景设计。它通过内置V8引擎运行真实JavaScript，完整支持Chrome DevTools Protocol，可直接替代Puppeteer和Playwright依赖的Headless Chrome，在内存占用（30MB vs 200MB+）、启动速度和反检测能力上具有显著优势。

文章要点：
- **极致轻量，资源友好**：相比Headless Chrome动辄200MB+的内存占用和300MB+的体积，Obscura仅需30MB内存和70MB二进制文件，启动几乎瞬时完成，页面加载速度提升约6倍
- **零依赖，开箱即用**：无需安装Chrome或Node.js，单个二进制文件即可运行，支持Linux、macOS（Intel/Apple Silicon）和Windows平台
- **无缝兼容现有生态**：完整实现Chrome DevTools Protocol，可作为Puppeteer和Playwright的底层浏览器直接连接使用，现有爬虫脚本迁移成本低
- **内置隐身模式**：自带反指纹追踪（随机化GPU、屏幕、Canvas等参数）和3520个域名级别的追踪器拦截，无需额外配置即可绕过常见反爬机制
- **并行爬取能力**：提供`obscura scrape`命令支持多URL并发抓取，配合`--concurrency`参数可灵活控制worker数量，适合批量数据采集场景
- **开源承诺与商业化路径**：核心引擎采用Apache 2.0协议且承诺永不功能阉割，同时正在开发托管版Obscura Cloud提供代理和基础设施服务

文章URL：
https://github.com/h4ckf0r0day/obscura

GitHub

GitHub - h4ckf0r0day/obscura: The headless browser for AI agents and web scraping

The headless browser for AI agents and web scraping - h4ckf0r0day/obscura

《Pixelle-Video：AI全自动短视频引擎》

Wed, 06 May 2026 02:16:41 GMT

《Pixelle-Video：AI全自动短视频引擎》

标签：#AI工具 #视频生成 #ComfyUI #TTS #开源项目 #Streamlit #Python

总结：
Pixelle-Video 是一款开源的 AI 全自动短视频生成工具，通过 Streamlit 提供可视化 Web 界面，支持从文案创作、AI 配图、语音合成到视频拼接的完整工作流，用户只需输入主题即可一键生成带 BGM 的短视频，且支持完全本地免费运行。

文章要点：
- **全流程自动化**：输入主题后，AI 自动完成脚本撰写、分镜规划、图片生成、语音配音和视频合成，几分钟内输出成品短视频
- **灵活的内容输入**：支持"AI 生成内容"模式（输入主题自动写稿）和"固定文案"模式（直接粘贴现成文案），满足不同创作需求
- **丰富的语音与视觉配置**：TTS 支持 Edge-TTS、Index-TTS 等多种工作流，还可上传参考音频进行声音克隆；图像生成支持本地 ComfyUI 和云端 RunningHub，风格可通过提示词前缀自由定制
- **可扩展的模板系统**：提供静态、图片、视频三类 HTML 模板，支持竖屏/横屏/方形多种尺寸，懂前端的同学还能自定义模板
- **零成本运行方案**：本地部署 Ollama + ComfyUI 可实现完全免费使用；也支持通义千问、GPT、DeepSeek 等云端 API 作为备选
- **开箱即用的部署方式**：Windows 用户有免配置一键整合包，macOS/Linux 用户通过 uv 即可快速启动，门槛非常友好

文章URL：https://github.com/AIDC-AI/Pixelle-Video

GitHub

GitHub - ATH-MaaS/Pixelle-Video: 🚀 AI 全自动短视频引擎 | AI Fully Automated Short Video Engine

🚀 AI 全自动短视频引擎 | AI Fully Automated Short Video Engine - ATH-MaaS/Pixelle-Video

《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

《OpenHarness：开源智能体基础设施框架》

Sat, 04 Apr 2026 00:52:30 GMT

《OpenHarness：开源智能体基础设施框架》

标签：#AI #Agent #智能体 #开源 #Python #工具调用

总结：
OpenHarness是港大数据智能实验室（HKUDS）推出的轻量级开源智能体基础设施框架，仅用Python实现，代码量比Claude Code轻44倍（1.1万行vs 51万行），提供完整的工具调用、技能加载、记忆管理和多智能体协调功能，让开发者快速构建安全可靠的AI Agent应用。

文章要点：
- 极简架构设计：相比Claude Code的51万行TypeScript代码，OpenHarness仅用1.1万行Python实现，去除了企业级复杂依赖如遥测和OAuth，专注于核心Harness架构
- 五大核心模块：包含Agent循环（支持流式工具调用、并行执行、成本追踪）、工具套件（43种工具覆盖文件/Shell/搜索/Web/MCP）、上下文记忆（CLAUDE.md自动注入、MEMORY.md持久化）、权限治理（多级权限模式、交互式审批）、Swarm多智能体协调（子智能体委派、任务管理）
- 生态兼容性：完全兼容anthropics/skills技能格式和claude-code/plugins插件生态，支持OpenClaw、nanobot、Cursor等CLI工具集成
- 开箱即用：一条命令oh即可启动，内置114个单元测试和6个E2E测试套件，提供稳定可靠的基础能力

文章URL：
https://github.com/HKUDS/OpenHarness

GitHub

GitHub - HKUDS/OpenHarness: "OpenHarness: Open Agent Harness with a Built-in Personal Agent--Ohmo!"

"OpenHarness: Open Agent Harness with a Built-in Personal Agent--Ohmo!" - HKUDS/OpenHarness

#AI 生成SEO友好的图片alt内容

Fri, 03 Jan 2025 01:05:02 GMT

#AI 生成SEO友好的图片alt内容。

https://ai-alttext.com/

Ai-Alttext

Smart Alt Text Generator

AI-powered alt text generator for better accessibility and SEO

#AI #文章如何将大型语言模型（LLMs）集成到前端应用中，创建产品描述生成器

Thu, 07 Nov 2024 15:43:34 GMT

#AI #文章如何将大型语言模型（LLMs）集成到前端应用中，创建产品描述生成器。介绍了Vercel的AI SDK和V0工具，它们简化了LLMs与UI的集成，提供了AI驱动的内容生成、多语言支持、所见即所得（WYSIWYG）编辑器集成等功能。文章还讨论了如何使用OpenAI的GPT-4模型进行内容生成，以及如何通过MDX标记将内容流式传输到UI中。

https://www.manuelsanchezdev.com/blog/integrating-llm-frontend

Manuelsanchezdev

Integrating Large Language Models into Frontends

Leveraging AI for Dynamic Content Generation in Web Applications

AI生成内容 | 锤子前端

《为 AI 生成的 HTML 构建安全隔离的预览环境》

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

《十个防止 AI 代码泛滥的前端项目护栏》

《TanStack AI 进入 RC 阶段：从 humble chat() 到完整 AI 生态》

《深入理解 AI Agent：设计原理与工程实践》

《Markdown SVG 渲染器：AI 辅助开发的实用小工具》

《cc-connect：本地AI编程助手连接消息平台桥梁》

《Agent Harness 的解剖学：将 LLM 转化为工作引擎的系统工程》

《Obscura：专为AI代理和爬虫打造的轻量级无头浏览器》

《Pixelle-Video：AI全自动短视频引擎》

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

《OpenHarness：开源智能体基础设施框架》

#AI 生成SEO友好的图片alt内容

#AI #文章 如何将大型语言模型（LLMs）集成到前端应用中，创建产品描述生成器

#AI #文章如何将大型语言模型（LLMs）集成到前端应用中，创建产品描述生成器