今日三荐：规格驱动开发、代理浏览器与可访问图表

今日三荐：规格驱动开发、代理浏览器与可访问图表

从 spec-kit、ego-lite、diagram-design 三个活跃仓库出发，分别练习把需求变成可执行规范、让智能体在隔离浏览器空间中工作，以及用 HTML/SVG 做可访问图表，并给出机器限制和今晚可完成的最小练习。

GitHub 日推 · 可学可玩
GitHub 日推 · 可学可玩@xinrui.zhao
今天的共同主线是：把「会用 AI」拆成三个可以观察的工程边界——需求如何落成文件，代理如何被限制在自己的浏览器空间，视觉输出如何同时顾及语义和可访问性。三个仓库都能先做一个小实验，但前置条件差得很远：spec-kit 适合从流程入手，ego-lite 绑在 macOS，diagram-design 更像可以直接打开的 HTML/SVG 技能包。

1. Spec Kit：先写验收条件，再让代理写代码

仓库：github/spec-kit · Python
Spec Kit 把「规格驱动开发」做成了一套可以安装的 CLI 和模板。它要求你先写项目原则，再写需求和用户故事，接着生成技术计划、任务清单，最后才执行实现。仓库 README 给出的主流程是 constitution → specify → plan → tasks → implement，还提供 clarify、analyze、checklist 等质量检查命令。1
这个顺序适合本科生拆解，因为它把一个经常混在一起的问题分开了：需求到底要解决什么，技术上准备怎么做，具体要改哪些文件。你可以先看模板和 CLI 如何把自然语言写入项目文件，再观察智能体怎样依据这些文件工作，而不是一上来追着模型输出排错。
适合学什么
  • 把「功能描述」拆成约束、用户故事、验收条件和任务。
  • 用模板和命令行工具维护一套可重复的开发流程。
  • 观察项目级规则如何影响后续生成，而不是把每次对话当成孤立提示词。
  • 读扩展、预设和项目本地覆盖的优先级：仓库把本地覆盖、预设、扩展和核心模板分成了不同层级。1
复现难度：低到中。需要 uv，还需要一个 Spec Kit 支持的 AI 编程代理；仓库 README 列出了 30 多种集成方式。1 2026 年 8 月 14 日的提交页显示，项目刚发布 0.16.4 并开始下一版开发，说明 CLI 和集成仍在快速变化。2
最小上手路径：先安装 CLI，不必编译仓库本身。
uv tool install specify-cli
specify init course-notes --integration copilot
cd course-notes
把 copilot 换成你实际使用的集成方式。进入项目后，先只做一件小事：让它为「按课程整理本地错题」写项目原则和需求，再生成计划。完整流程可以继续执行 tasks 和 implement，但第一次练习最好停在计划阶段，检查每条验收条件是否真的能测试。
今晚可以做的最小练习：给一个只有三个功能的课程笔记工具写规格：新建笔记、按课程筛选、导出 Markdown。先不让代理写代码，手动删掉含糊的词，例如「快速」「友好」「智能」，把它们改成可观察的输入和输出。你会立刻看到，很多所谓的编码问题其实是需求没有写到能验收。

2. ego lite：隔离浏览器空间如何交给代理

仓库：citrolabs/ego-lite · JavaScript
ego lite 是一个让人和智能体共用浏览器、但分开工作的项目。README 的关键设计是：每个代理都有自己的 Space，代理在自己的标签页和状态里执行任务，人的原有标签页继续保持可用；仓库里的 ego-browser 技能则把 snapshot、fill、click、wait、navigate、capture 等页面操作封装成 JavaScript 工具。3
这里最值得拆的不是「让代理点网页」这件事，而是三个边界怎么接起来：浏览器进程怎样保留真实登录态，Space 怎样隔离并发任务，页面观察结果怎样被压缩成智能体能处理的 Snapshot。把这三层分开读，比直接拿它去做复杂自动化更容易定位问题。
适合学什么
  • 浏览器自动化工具如何把 DOM 观察和动作调用分成两类接口。
  • 多个任务怎样共享一个浏览器外壳，同时避免互相抢标签页。
  • 登录态、Cookie 和本地浏览数据进入代理后，权限边界应该放在哪里。
  • 为什么「本地运行」不等于「低风险」：一个能继承日常登录态的代理，仍然值得用单独的测试账号和测试浏览器资料来练习。
复现难度：中。当前 README 只把 macOS 列为可用平台，Windows 和 Linux 仍在路线图中。3 2026 年 8 月 10 日的提交页还能看到安装脚本和 README 更新，项目仍在修整安装与使用路径。4
最小上手路径：如果你有 macOS，先安装应用；如果只想先拿到技能文件，可以执行：
npx skills add citrolabs/ego-lite
第一次启动时，README 提供了迁移 Chrome 数据的选项。学习时建议拒绝迁移或改用单独的 Chrome 测试资料，再让代理打开一个不会提交的本地表单。这样既能观察 Space、Snapshot 和动作接口，也不会把真实账号交给第一次运行的自动化代码。3
今晚可以做的最小练习：准备一个本地 HTML 表单，让两个代理任务分别读取页面标题和填写一个测试字段，但都不点击提交。对比两个 Space 的页面状态，再切回自己的普通标签页，确认它没有被抢走。练习的重点是隔离和可观察性，不是让代理完成一条真实业务流程。

3. diagram-design：把图表当成 HTML/SVG 组件设计

仓库：cathrynlavery/diagram-design · HTML / SVG
diagram-design 是一套给 Claude Code、Codex 和 Pi 使用的图表技能包。README 目前列出 27 种视觉类型，每种类型都有静态 HTML 变体；默认输出不需要构建步骤、JavaScript 或外部图片依赖，还可以把 draw.io 或 Mermaid 源文件重绘成指定尺寸和细节的图。5
它的工程主线很适合从前端基础开始读：语义模式描述「队列」「策略追踪」或「信任边界」这类行为，布局模板负责把它们画出来，样式指南再通过 paper、ink、accent 等语义角色统一颜色。README 还要求 SVG 带有可访问名称和描述，并用 role="img"、aria-labelledby 与 <desc> 组织辅助技术可以读取的内容。5
适合学什么
  • HTML、CSS 和内联 SVG 如何共同表达架构图、流程图、状态机和数据图。
  • 为什么把「画什么」与「怎么排版」分开，能让同一套模板复用到不同主题。
  • CSS 变量、字体和对比度检查怎样形成一个轻量设计系统。
  • 图形对人眼可见还不够：可访问名称、描述和唯一 ID 会影响屏幕阅读器能否理解一张 SVG 图。
复现难度：低。它的画廊文件可以直接在浏览器打开；如果想追源码，再从 skills/diagram-design/ 下的技能、引用和静态素材读起。仓库在 2026 年 8 月 14 日仍有命名整理和新示例提交，前一天还加入了队列动画示例。6
最小上手路径：
git clone https://github.com/cathrynlavery/diagram-design
cd diagram-design
python3 -m http.server 8000
然后打开仓库里的 skills/diagram-design/assets/index.html 画廊。这个入口在 README 中有明确指向，适合先比较浅色、深色和完整编辑版，再回到 references/style-guide.md 改一个颜色角色。7
今晚可以做的最小练习：挑一个架构图，把三个节点替换成你正在学习的课程项目，再检查生成的 SVG 是否仍然有清楚的节点关系、足够的文字对比度和可读的 aria 描述。最后只改一个语义颜色变量，观察所有相关图表是否一起变化。

怎么选今天动手的那一个

你现在的状态更建议先碰先学哪条主线关键限制
想学会把需求写到可以验收Spec Kit原则、规格、计划、任务之间的边界需要 uv 和一个支持的 AI 编程代理；版本变化快。1
有 macOS，想理解代理怎样安全地操作网页ego liteSpace 隔离、Snapshot 观察、动作接口当前主要支持 macOS；练习时应使用测试浏览器资料。3
想练前端、SVG 和信息表达diagram-design语义模式、静态模板、可访问性本地门槛低，但要自己读 HTML/CSS/SVG 才能获得学习价值。5
这三个仓库适合放在同一晚的学习计划里，但不适合同时开工。先按机器条件选一个：有 macOS 再碰 ego lite，想做需求工程就从 spec-kit 的规格文件开始，想马上看到页面结果就打开 diagram-design 的画廊。跑通第一个小实验后，再从入口文件往下读；读者真正要带走的是三条可迁移的工程习惯：先写清楚、再隔离权限、最后让输出对人和机器都可读。

References

  1. 1
    Spec Kit README

    github.com

  2. 2
    Spec Kit commit history

    github.com

  3. 3
    ego lite README

    github.com

  4. 4
    ego lite commit history

    github.com

  5. 5
    diagram-design README

    github.com

  6. 6
    diagram-design commit history

    github.com

  7. 7
    diagram-design README

    github.com

GitHub 日推 · 可学可玩
GitHub 日推 · 可学可玩@xinrui.zhao

This story was produced automatically by a channel. One sentence is all it takes for Neodrop to keep producing for you.

Related content

More from this channel
View the full content archive of "GitHub 日推 · 可学可玩"Explore more channels on DiscoverCreate my own channel