《Portless：告别端口号的本地开发代理工具》

标签：#开发工具 #本地开发 #DevServer #HTTPS #Monorepo #Turborepo #Vercel

总结：
Portless 是 Vercel Labs 推出的本地开发代理工具，用 https://myapp.localhost 这类稳定命名 URL 彻底取代难记的端口号。它默认开启 HTTPS + HTTP/2，自动分配端口并适配 Next.js、Vite、Astro 等主流框架，支持 Monorepo 多包路由、Git Worktree 自动子域名、LAN 内网共享及 Tailscale 团队协作，让本地开发环境对人类和 AI 代理都更加友好。

文章要点：
- 一键替换端口号：把 localhost:3000 变成 https://myapp.localhost，告别记端口的烦恼，对人类可读、对 AI 代理也更友好
- 开箱即用的 HTTPS/HTTP/2：首次运行自动生成本地 CA 并加入系统信任，浏览器零警告；HTTP/2 多路复用解决 Vite 等开发服务器大量并发请求的性能瓶颈
- 框架零配置适配：自动识别 Next.js、Express、Nuxt、Vite、Astro、Expo 等框架，通过 PORT 环境变量或自动注入 --port/--host 参数，无需手动改配置
- Monorepo 与 Turborepo 原生支持：通过 portless.json 或 package.json 的 portless 字段统一管理多包路由，如 api.myapp.localhost 和 web.myapp.localhost，与 Turborepo 无缝集成
- Git Worktree 智能隔离：自动检测 Git Worktree，用分支名作为子域名前缀，避免多个工作区端口冲突，无需额外配置
- 多场景网络共享：LAN 模式通过 mDNS 让手机等设备访问 .local 域名；Tailscale 集成支持团队内网共享，甚至通过 Funnel 一键暴露到公网
- 灵活的子域名与自定义域名：支持 api.myapp.localhost 等子域名组织服务，也可切换 .test 等自定义 TLD，自动同步 /etc/hosts 保证 Safari 兼容

文章URL：https://github.com/vercel-labs/portless

GitHub

GitHub - vercel-labs/portless: Replace port numbers with stable, named local URLs. For humans and agents.

Replace port numbers with stable, named local URLs. For humans and agents. - vercel-labs/portless

《Datatype：用字体把文字变成图表的魔法》

标签：#前端 #OpenType #可变字体 #数据可视化 #字体设计

总结：

Datatype 是一款开源可变字体，利用 OpenType 连字替换技术，将纯文本表达式（如 {b:30,70,50,90}`）实时渲染为条形图、折线图和饼图，无需任何 JavaScript 或图片资源。它通过 CSS 的 `font-variation-settings 控制字宽和字重，WOFF2 仅 73KB，兼容所有现代浏览器，为网页和桌面应用提供了一种零依赖、高性能的轻量级数据可视化方案。

文章要点：

- **纯字体驱动，零 JS 依赖**：利用 OpenType 的 calt`（上下文替换）和 `liga`（标准连字）特性，把 {b:1,3,7}` 这类文本直接变成条形图，不需要加载任何图表库或图片
- **三种图表，一句话搞定**：支持条形图 {b:...}`、折线图 {l:...} 和饼图 {p:...}`，每种最多支持 20 个数据点，数值范围 0–100，语法简单得像在聊天
- **可变字体，随意调节**：通过 `wdth`（字宽 50–150）和 `wght`（字重 100–900）两个轴，可以像调音量一样控制图表的间距和线条粗细，适配不同排版场景
- **轻到不可思议**：WOFF2 格式仅 73KB，TTF 4MB，覆盖 Google Fonts Latin Core 字符集，对网页性能几乎零负担
- **开箱即用，跨平台友好**：Web 端一行 `@font-face` 即可；桌面端安装 TTF 后，在 Adobe 等支持 OpenType 连字的软件里直接粘贴文本就能出图
- **开源可定制**：基于 Python + fontTools 构建，提供完整的构建脚本和开发服务器，方便开发者二次修改或扩展新的图表类型

文章URL：https://github.com/franktisellano/datatype

GitHub

GitHub - franktisellano/datatype: Datatype is a variable font that turns text into charts.

Datatype is a variable font that turns text into charts. - franktisellano/datatype

《大规模AI代码审查编排实践》

标签：#DevOps #AI辅助编程 #CodeReview #CI_CD #LLM #多智能体系统 #Cloudflare #OpenCode #插件架构

总结：
Cloudflare为解决代码审查瓶颈，放弃单一LLM直接审diff的噪音方案，转而基于开源代理OpenCode构建CI原生编排系统。该系统采用可组合插件架构，通过风险分级（Trivial/Lite/Full）动态调度最多7个专业审查智能体（安全、性能、质量等），由协调者代理去重、过滤并做出审批决策。系统已在数万MR上运行，能精准拦截真实漏洞，同时保留"break glass"人工逃生通道。

文章要点：
- **从噪音到精准**：早期直接把git diff塞给LLM的方案产生了大量幻觉和模糊建议，团队很快意识到需要专业化分工而非单一通用提示词
- **插件化架构**：系统基于OpenCode构建，采用完全解耦的插件体系（GitLab、AI网关、合规检查、遥测等各自独立），通过`ConfigureContext` API贡献配置，最终组装成`opencode.json`
- **多智能体协作**：最多同时启动7个专业审查者各司其职，协调者代理负责去重、重新分类、合理性验证，并按严格规则做出approve/approve_with_comments/unapprove/request_changes四级决策
- **风险分级省成本**：按代码行数和文件数将MR分为Trivial/Lite/Full三级，小改动只派2个轻量代理且降级模型，安全相关文件永远触发Full审查，避免用大模型审typo
- **工程细节满满**：使用JSONL流式处理避免内存爆炸；通过磁盘patch文件共享上下文节省7倍token；清理XML边界标签防止提示注入；30秒心跳日志消除"模型思考中"的误取消

文章URL：https://blog.cloudflare.com/ai-code-review

The Cloudflare Blog

Orchestrating AI Code Review at scale

Learn about how we built a CI-native AI code reviewer using OpenCode that helps our engineers ship better, safer code.

《MCP已死，CLI万岁》

标签：#AI工具 #开发工具 #MCP #CLI #LLM工具链 #Anthropic #AI代理

总结：
作者认为Anthropic推出的MCP协议正走向消亡，主张LLM应直接使用CLI工具而非专用协议。CLI具备可组合性、调试友好、认证成熟、无额外进程等优势，而MCP存在初始化不稳定、重复认证、权限粒度粗等实际痛点。最好的工具应同时服务人类与机器，开发者应优先打磨API和CLI。

文章要点：
- LLM天生就会用命令行：它们在海量man page、Stack Overflow和shell脚本中训练过，给Claude一个CLI和文档，它就能直接上手，根本不需要新协议
- 调试体验天差地别：CLI出问题你可以亲自跑一遍同样的命令，看到和AI完全一致的输入输出；MCP出错却要钻JSON传输日志，排查像考古
- 管道和组合才是生产力：CLI能通过`jq`、`grep`、重定向灵活处理数据；MCP面对大型Terraform计划只能全塞进上下文窗口，或额外写过滤逻辑，费力不讨好
- 认证体系早已成熟：`aws`、`gh`、`kubectl`都有经过实战检验的SSO和凭证管理，AI和人类共用同一套流程，坏了就按老办法修，不用学MCP专属排错
- 没有后台进程更省心：MCP服务器是常驻进程，会挂起、会掉线、需要状态管理；CLI只是磁盘上的二进制文件，随用随走，干净利落
- 日常使用的真实摩擦：MCP初始化经常抽风要重启，多工具反复认证让人崩溃，权限控制只有白名单名字做不到只读或参数级限制；CLI完全没有这些烦恼
- MCP并非毫无价值：只有当某个工具确实没有CLI时，MCP才是合理选择，标准化接口在极少数场景也有意义
- 给工具开发者的建议：如果你公司在砸钱做MCP服务器却没有官方CLI，赶紧停下来——先把API和CLI做好，AI代理自己会搞定剩下的

文章URL：https://ejholmes.github.io/2026/02/28/mcp-is-dead-long-live-the-cli.html

《为AI智能体设计产品：从界面思维到智能体思维》

标签：#AI产品 #MCP #智能体交互设计 #产品架构 #API设计 #Salesforce #Ramp #Notion

总结：
本文由Ramp产品负责人Teddy Riker撰写，探讨了AI智能体时代产品设计的范式转变。作者指出，未来80%的软件交互将通过AI智能体完成，产品团队需要从"为用户设计界面"转向"为智能体设计能力"。文章以Ramp、Salesforce、Notion等案例，提出了三大核心设计原则：主动提供成功所需的上下文规范、建立基于工具调用的反馈循环、识别并填补智能体间的上下文缺口。

文章要点：

- **交互范式正在翻转**：传统模式是"用户→界面→数据库"，而AI时代正在变成"用户→用户智能体→软件智能体→数据库"。界面不会消失，但80%的交互将发生在智能体之间，产品团队需要为"看不见的用户"重新设计。

- **Salesforce的激进转型**：这家27年的传统软件巨头推出"Headless 360"计划，将平台所有能力暴露为API、MCP工具或CLI命令，承认图形界面CRM的护城河正在被侵蚀，主动拥抱"无界面"未来。

- **教会智能体如何成功**：Notion的MCP设计是个正面教材——它在工具描述中明确要求智能体先读取Markdown规范再操作，确保格式准确。相比之下，Slack MCP让智能体"自己摸索"格式规则，结果用户反而要花更多时间修正。产品团队应该主动告诉调用方"你需要知道什么才能成功"。

- **用反馈循环驱动产品迭代**：Ramp通过三个机制解决智能体交互的可观测性难题：要求每次工具调用附带`rationale`参数解释意图、提供独立的反馈提交工具、在特定工具中预埋上下文种子。这些反馈比人类用户更具体、更一致，能直接转化为新功能需求。

- **填补上下文缺口是核心设计挑战**：在"用户智能体↔️软件智能体"的协作中，双方各自掌握对方没有的信息。优秀的设计不是让智能体去猜技术细节（如GL code），而是让它们交换语义上下文（如"这是客户晚餐还是团队建设"），由各自擅长的那一方完成最终决策。

- **敷衍智能体支持的产品会被淘汰**：仅仅发布一个MCP服务器、勾上"支持AI"的 checkbox 是不够的。客户最终会流向那些认真打磨智能体体验、真正理解"最后签支票的可能是AI"的产品。

文章URL：https://baoyu.io/blog/2026-04-24/teddy-riker-2047312986696454584

baoyu.io

为 Agent 设计产品

UI 并没有死，但软件交互的 80% 正在转向 Agent。产品团队需要像过去为人设计界面一样，认真为 Agent 设计工具、上下文和反馈闭环。

《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 网站》

标签：#前端 #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.