Now vibe coding, so learning hammer FE ?
《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 围栏代码块（\
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/
标签：#前端 #工具 #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/
《node-html-to-text：HTML转纯文本转换器》
标签：#NodeJS #工具库 #HTML解析 #文本转换 #数据提取 #内容处理
总结：
node-html-to-text 是一款成熟的 Node.js 库，用于将 HTML 文档解析并转换为格式优美的纯文本。它通过类 CSS 的 selectors 机制实现高度灵活的格式化控制，支持表格、链接、列表等复杂结构，并提供
文章要点：
- **核心能力**：支持行内/块级标签、表格（含跨行跨列）、链接、自动换行、Unicode 等，能把复杂 HTML 干净地转成可读文本
- **两种使用模式**：`convert()
- **Selectors 驱动配置**：采用类似 CSS 的 selectors 数组来匹配元素并指定格式化方式，支持标签、类名、ID、属性等组合选择，特异性高的规则优先生效
- **丰富的自定义扩展**：可通过
- **版本演进清晰**：v8 引入 selectors 体系，v9 支持 ESM/CJS 双模式并移除大量废弃选项，v10 要求 Node.js 20.19.0+，API 趋于稳定现代
文章URL：https://github.com/html-to-text/node-html-to-text
标签：#NodeJS #工具库 #HTML解析 #文本转换 #数据提取 #内容处理
总结：
node-html-to-text 是一款成熟的 Node.js 库，用于将 HTML 文档解析并转换为格式优美的纯文本。它通过类 CSS 的 selectors 机制实现高度灵活的格式化控制，支持表格、链接、列表等复杂结构，并提供
compile 预编译模式以优化批量处理性能。文章要点：
- **核心能力**：支持行内/块级标签、表格（含跨行跨列）、链接、自动换行、Unicode 等，能把复杂 HTML 干净地转成可读文本
- **两种使用模式**：`convert()
适合单次转换；`compile() 预编译配置后批量处理，性能更优，推荐处理大量文档时使用- **Selectors 驱动配置**：采用类似 CSS 的 selectors 数组来匹配元素并指定格式化方式，支持标签、类名、ID、属性等组合选择，特异性高的规则优先生效
- **丰富的自定义扩展**：可通过
formatters 注册自定义格式化函数，还能传入 metadata 让 formatter 访问额外上下文信息，满足特殊业务需求- **版本演进清晰**：v8 引入 selectors 体系，v9 支持 ESM/CJS 双模式并移除大量废弃选项，v10 要求 Node.js 20.19.0+，API 趋于稳定现代
文章URL：https://github.com/html-to-text/node-html-to-text
GitHub
GitHub - html-to-text/node-html-to-text: Advanced html to text converter
Advanced html to text converter. Contribute to html-to-text/node-html-to-text development by creating an account on GitHub.
《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个斜杠命令即开即用：
- 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
标签：#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
《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工具集成
- 开箱即用：一条命令
文章URL：
https://github.com/HKUDS/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
