Now vibe coding, so learning hammer FE ?
《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.jsonpackage.jsonportless 字段统一管理多包路由,如 api.myapp.localhostweb.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 - vercel-labs/portless: Replace port numbers with stable, named local URLs. For humans and agents.
《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辅助编程 #开发工具 #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.
《Claude架构图生成器:AI一键绘制专业系统架构图》

标签:#AI工具 #Claude_Skill #架构可视化 #开发效率 #系统架构图

总结:
这是一款专为Claude AI设计的Skill工具,让用户只需用自然语言描述系统架构,即可生成精美的暗色系专业架构图。输出为独立的HTML/SVG文件,无需任何设计技能或额外软件,适合快速迭代和团队协作分享。

文章要点:
- 零门槛使用:不需要设计基础,用大白话描述系统组件和连接关系,Claude就能帮你画出专业级架构图
- 多种输入方式:可以让AI分析代码库自动生成描述,也可以自己手写组件列表,还能直接问Claude要典型架构模板
- 精美视觉风格:采用暗色主题(Slate-950背景),组件按类型着色(前端青色、后端翠绿、数据库紫色、云服务琥珀色),自带网格底纹和JetBrains Mono字体
- 独立文件输出:生成单个HTML文件,内嵌CSS和SVG,任何浏览器都能直接打开,方便分享、打印或嵌入文档
- 实时迭代优化:生成后可以继续在对话中要求修改,比如"加上Redis缓存"或"调整布局",Claude会即时更新图表
- 多平台安装:支持Claude.ai网页版(Pro/Max/Team/Enterprise)、Claude Code CLI、以及Projects知识库三种方式
- 丰富示例覆盖:内置Web应用(React+Node+PostgreSQL)、AWS无服务器(Lambda+API Gateway)、微服务(K8s+多语言服务)等典型场景模板

文章URL:https://github.com/Cocoon-AI/architecture-diagram-generator GitHub - Cocoon-AI/architecture-diagram-generator: Generate beautiful dark-themed system architecture diagrams as standalone HTML/SVG…
《在本地终端预览OpenGraph卡片》

标签:#前端 #OpenGraph #CLI工具 #Zig #Kitty图形协议 #开发工具

总结:
作者为解决OpenGraph调试痛点,开发了CLI工具og-check,可直接在终端内渲染本地开发环境的OG卡片预览,无需部署到公网或使用隧道服务。工具基于Zig编写,支持Kitty图形协议在终端内显示图片,并提供OpenGraph、Twitter Card、表格和JSON四种输出格式,同时可作为CI检查工具确保OG标签完整性。

文章要点:
- 传统OG调试流程繁琐:需要部署到公网或使用隧道工具,且Facebook等平台的调试器缓存机制会导致反复迭代困难
- og-check支持在本地终端直接预览OG卡片,包含图片渲染,将反馈周期从分钟级缩短到秒级
- 终端图片渲染基于Kitty图形协议,兼容Ghostty、iTerm2、WezTerm等主流终端,不支持的终端会自动降级为文本输出
- 工具内部使用Zig的std.http.Client抓取页面,解析meta标签并按命名空间分类(og:、twitter:等),通过zigdown渲染Markdown到终端
- 提供四种输出模式:OpenGraph预览(默认)、Twitter Card预览、表格视图、JSON格式,后者支持管道操作(如配合jq使用)
- 具备校验功能:当缺少必需的OG字段(title、type、image、url)时会输出错误并返回非零退出码,适合集成到CI流程作为布局模板检查
- 安装方式灵活:支持预编译二进制、源码编译(Zig 0.15+)和mise工具管理

文章URL:https://simonhartcher.com/posts/2026-04-15-testing-opengraph-on-localhost-from-the-cli/ Testing OpenGraph on localhost from the CLI before you go public | Simon Hartcher
《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 - HKUDS/OpenHarness:
《Git 的魔法文件》

标签:#Git #版本控制 #GitIgnore #GitAttributes #GitLFS #GitModules #Mailmap #GitBlame #EditorConfig #开发工具

总结:Git 仓库中的"魔法文件"是随代码提交的特殊配置文件,用于控制 Git 行为。文章系统介绍了 .gitignore`、.gitattributes`、`.lfsconfig`、`.gitmodules`、`.mailmap`、`.git-blame-ignore-revs` 等核心文件的功能与语法,涵盖文件忽略、属性管理、大文件存储、子模块、作者映射、blame 忽略等场景,同时提及代码托管平台专用文件夹及其他生态工具(如 .editorconfig`、.dockerignore`)的配置模式,为工具开发者和使用者提供完整参考指南。

文章要点:
- .gitignore 定义忽略规则,支持通配符、目录标记和否定模式,仅影响未跟踪文件;Git 按层级检查多个位置的 ignore 文件
- .gitattributes 控制文件处理逻辑,包括行尾规范化(`text eol=lf`)、diff/合并驱动、二进制标记,以及 GitHub Linguist 的语言检测覆盖(`linguist-vendored`、`linguist-generated`)
- .lfsconfig 存储 Git LFS 服务端配置,使用 git config 格式设置 URL 和传输选项,确保团队成员共享相同设置
- .gitmodules 管理子模块依赖,包含路径、URL 和分支信息;子模块不会随 git clone 自动获取,需使用 --recurse-submodules 或手动初始化
- .mailmap 映射作者身份,将旧邮箱或姓名变体统一为标准身份,影响 git log`、`git shortloggit blame 的输出(但不影响 GitHub 贡献者图表)
- .git-blame-ignore-revs 记录格式化、迁移等无意义提交的 SHA,使 git blame 跳过这些提交,直接显示实际逻辑作者;GitHub、GitLab 15.4+、Gitea 自动支持
- 代码托管平台使用专属文件夹(`.github/.gitlab/.gitea/` 等)存储 CI/CD 工作流、Issue 模板和 CODEOWNERS 配置;Forgejo 和 Gitea 支持配置回退链
- 其他生态工具延续相同模式:`.editorconfig` 统一编辑器行为、`.dockerignore` 控制构建上下文、`.ruby-version`/.node-version 指定语言运行时版本

文章URL:https://nesbitt.io/2026/02/05/git-magic-files.html Git’s Magic Files
《Claude技能构建完整指南》

标签:#AI #Claude #MCP #Agent_Skills #Workflow_Automation #开发工具 #Anthropic

总结:Anthropic官方发布的Claude技能构建指南,系统介绍了如何通过SKILL.md文件创建可复用的AI工作流。技能采用渐进式披露架构(YAML前置元数据+Markdown指令+引用资源),可与MCP工具集成实现多步骤自动化。文档涵盖规划、测试、分发全流程,提供5种设计模式(顺序工作流、多MCP协调、迭代优化等),并给出量化评估指标(90%触发准确率、零API失败率),目标帮助开发者在15-30分钟内构建生产级AI技能。

文章要点:
- 技能定义:包含SKILL.md(必需)、scripts/、references/、assets/的文件夹结构,采用kebab-case命名规范,支持Claude.ai、Claude Code和API三端通用
- 渐进式披露设计:三级加载机制(YAML元数据→SKILL.md正文→链接资源),最小化token消耗同时保持专业性
- 三大应用场景:文档/资源创建(如前端设计)、工作流自动化(如项目管理)、MCP增强(如Sentry代码审查),后者将工具访问转化为可靠工作流
- 成功指标:技能应在90%相关查询中自动触发,单次工作流工具调用次数明确,零失败API调用,用户无需提示下一步操作
- 核心设计模式:顺序工作流编排、多MCP协调(跨Figma/Linear/Slack等)、迭代优化循环、上下文感知工具选择、领域特定智能(如合规检查)
- 测试策略:触发测试( obvious/paraphrased/negative cases)、功能测试、性能对比(有无技能时的token消耗和交互轮次差异)
- 分发方式:GitHub托管+Claude.ai设置上传,支持组织级部署和API程序化调用,定位为MCP的"知识层"(厨房类比:MCP是厨房设备,技能是食谱)
- 常见陷阱:描述字段过于模糊导致触发失败、包含XML标签的安全限制、README.md与SKILL.md混淆、指令过于冗长导致模型"懒惰"

https://resources.anthropic.com/hubfs/The-Complete-Guide-to-Building-Skill-for-Claude.pdf
#AI #开发工具 自然语言交互、数据提取、断言验证、Chrome 插件、YAML 脚本、Puppeteer 集成、Playwright 集成、自定义模型、开源模型、通用模型、可视化报告、调试 Playground、数据安全、开源免费、JavaScript 集成

https://midscenejs.com/zh/index.html
 
 
Back to Top