Now vibe coding, so learning hammer FE ?
《Domenic 的 Agentic 编码工作流:2026 年 7 月实战指南》

标签:#前端 #AI_Agent #Claude_Code #ChatGPT #Tailscale #Git_Worktrees #DevOps #远程开发

总结:
Domenic 分享了他脱离企业环境后搭建的一套 AI 辅助开发工作流:以一台常驻开机的 Linux VM 为中枢,通过 Tailscale 构建跨设备私有网络,让 ChatGPT/Claude 桌面应用作为瘦客户端远程操控 Agent。核心亮点包括零审批的"YOLO"安全策略、Git worktrees 实现多 Agent 并行开发、Portless 自动暴露安全预览服务器、VS Code Remote-SSH 审查代码,以及 chezmoi 同步配置。最终效果惊人——他能在火车上用手机连接 VM,让前沿模型修复生产 bug 并直接合并 PR。

文章要点:
1. Linux VM + Tailscale 是地基:Agent 训练数据几乎全是 Bash/Unix 工具,Windows 下寸步难行。用 Ubuntu Server 搭一台可抛弃的 VM,配合 Tailscale 的魔法 SSH 和 HTTPS 证书,无论在哪台设备、哪个 Wi-Fi 下都能无缝接入,还能让 Agent 启动的开发服务器拥有安全上下文。
2. ChatGPT 桌面应用体验完胜 Claude:ChatGPT 原生支持远程 SSH 会话,断线重连优雅、worktree 管理清爽(默认放在 ~/.codex/worktrees/);Claude 桌面应用则在 SSH/Remote Control 混合逻辑、会话同步、worktree 目录污染项目等方面表现糟糕,目前只能退而求其次用 Claude Code + tmux。
3. Git Worktrees 解锁并行开发:在 VM 上让多个 Agent 同时 hack 同一个仓库而不互相踩脚,ChatGPT 和 Claude 都支持一键勾选 worktree 模式。Agent 会自动处理 origin/main 同步、依赖安装和 .env 复制,人类完全不用操心。
4. Portless 让预览服务器"零摩擦":不用改 npm run dev 绑定 0.0.0.0,也不用记端口。tportless 包装器自动把 localhost 服务代理到 Tailscale 专属域名(如 https://agents-base.tail234567.ts.net:8443/),多 Agent 并行时端口自动隔离,且外网无法访问。
5. "危险模式"下的生存策略:把 ~/.codex/config.toml~/.claude/settings.json 都设为"永不询问权限",配合 sudo 和 gh CLI 登录,让 Agent 能自主装工具、发 PR、合并代码。风险靠"频繁推送到 GitHub 私有仓库"来对冲——VM 炸了代码也在云端。
6. 手机修生产 Bug 已成现实:完整闭环——聚会发现 bug → 火车上打开 ChatGPT App → 远程连接 VM 启动修复 → 收到推送通知里的预览链接验证 → 手机审阅 diff 并合并 PR → 到家前 GitHub Actions 已部署上线。这就是未来。

URL:https://domenic.me/agentic-coding-setup/
《Shadscan:shadcn 应用的确定性 UI 审计工具》

标签:#前端 #shadcn/ui #React #UI审计 #CLI工具 #可访问性 #CI/CD #AI_Agent

总结:
Shadscan 是一款面向 React/shadcn 应用的静态 UI 审计 CLI 工具,通过 59 条确定性规则从 Foundation、Interaction、States、Accessibility、Forms 和 Production Polish 六个维度为应用打分(0-100),无需启动应用或调用 AI 即可在终端和 CI 中完成审计。它支持生成 JSON 报告、AI Agent 修复指令(--prompt)和 GitHub Action 集成,适用于 Next.js、React Router、TanStack Start、Astro 等多种框架,并支持 monorepo 多包扫描。

文章要点:
1. 零侵入式审计:无需启动应用、修改文件或调用 AI 模型,纯静态分析即可给出可复现的评分结果,适合嵌入 CI 流水线。
2. 六维评分体系:涵盖基础配置、交互体验、状态处理、无障碍访问、表单输入和生产级打磨,共 59 条规则,每条都附带证据和修复建议。
3. AI Agent 友好:支持 --prompt 生成可直接粘贴给 Claude Code、Codex CLI 等编码 Agent 的修复计划,也支持 --apply 直接唤起本地 Agent 执行。
4. 多框架与 Monorepo 支持:自动识别 Next.js App/Pages Router、React Router、TanStack Start、Astro、Vite 等框架,智能区分应用包和库包,避免设计系统被误扣分。
5. GitHub Action 一键集成:提供复合 Action,可自动写评分到 Job Summary、设置分数门槛拦截 CI,还能持续更新跟踪 Issue 并嵌入 Agent 修复指令。

URL:https://www.shadscan.com shadscan: Audit shadcn apps for UI fundamentals
《深入理解 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 - bojieli/ai-agent-book: 《深入理解 AI Agent:设计原理与工程实践》(李博杰 著)开源主仓库:全书正文、编译版 PDF 与按章配套代码
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
《Mirage:AI Agent的统一虚拟文件系统》

标签:#AI_Tools #AI_Agent #文件系统 #Python #TypeScript #SDK #S3 #Slack #GitHub #Redis #缓存 #OpenAI #Vercel_AI_SDK #LangChain

总结:
Mirage 是一个专为 AI Agent 设计的统一虚拟文件系统,它将 S3、Google Drive、Slack、Gmail、Redis 等数十种后端服务挂载到同一棵文件树下。Agent 只需用熟悉的 Unix/bash 工具(如 grep、cat、cp)就能跨服务读写数据,无需学习 N 个 SDK 或 MCP。支持 Python/TypeScript SDK 和 CLI,可嵌入 FastAPI、Express 等应用,并内置双层缓存(索引缓存 + 文件缓存)减少网络开销,兼容 OpenAI Agents SDK、Vercel AI SDK、LangChain 等主流框架。

文章要点:
- 统一挂载,万物皆文件:把 S3、GDrive、Slack、GitHub、MongoDB、Redis 等后端并排挂载到同一个根目录下,Agent 看到的始终只有一棵树
- 零学习成本:任何懂 bash 的 LLM 都能直接上手,用 grepcatcpwc 这些经典命令跨服务操作,不用记新 API
- 双层缓存省流量:自带索引缓存(目录列表)和文件缓存(对象字节),默认用内存,也可切 Redis 共享给多进程/多机器
- 多语言 SDK + CLI:提供 Python 和 TypeScript(Node / Browser / Core)SDK,以及轻量 CLI,可嵌入你的 FastAPI、Express 或浏览器应用
- 主流框架即插即用:已适配 OpenAI Agents SDK、Vercel AI SDK、LangChain、Pydantic AI、CAMEL、OpenHands 等
- 工作空间可移植:支持克隆、快照、版本化管理,Agent 运行环境能在机器间迁移而不必重新配置

文章URL:https://github.com/strukto-ai/mirage GitHub - strukto-ai/mirage: The World's First Virtual Terminal for AI Agents
《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 - h4ckf0r0day/obscura: The headless browser for AI agents and web scraping
《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 - addyosmani/agent-skills: Production-grade engineering skills for AI coding agents.
 
 
Back to Top