别只会用 Claude Code 写代码了，这 6 个开源工具会拉开差距
1.2K views · 2026-05-10
UI Design
在这支视频里，我会分享 6 个非常值得关注的开源 AI 工具和 GitHub 项目。
如果你现在正在使用 Claude Code、Codex、Cursor、Gemini CLI，或者你正在学习 AI Coding、AI Agent、Vibe Coding，那么这些工具可能会帮你打开一个新的思路。
我觉得现在很多人还只是把 AI Coding 工具当成“更聪明的聊天机器人”或者“自动写代码工具”。
但真正有价值的方向，其实是把这些 AI 工具慢慢组合成一个完整的工作流系统：
让 AI 理解你的项目结构
让 AI 记住你的设计系统
让 AI 帮你生成视频和视觉内容
让 AI 帮你检查前端设计质量
让 AI 使用 commands、skills、hooks、agents 去完成更复杂的任务
最后把 AI 变成你自己的创作系统、开发系统，甚至是业务操作系统的一部分
0:00 intro
0:38 tool 1
2:05 tool 2
2:56 tool 3
4:52 tool 4
6:51 tool 5
7:45 tool 6
open design video :https://www.youtube.com/watch?v=WDD4QsOB_78
hyperframes video :https://www.youtube.com/watch?v=J51tKChDncY
这次我会介绍 6 个 repo：
1. Graphify
把你的项目、代码、文档、PDF、图片、视频等内容变成可以查询的知识图谱，让 AI 更好理解你的项目上下文。
https://github.com/safishamsi/graphify
2. HyperFrames
一个开源的视频生成和渲染框架，可以用 HTML、CSS、JavaScript 来生成视频内容，也很适合未来接入 AI Agent 做内容自动化。
https://github.com/heygen-com/hyperframes
3. Open Design
一个 local-first 的开源设计工具，可以用来生成网站、桌面端、移动端原型、slides、图片和视频，有点像开源版的 Claude Design。
https://github.com/nexu-io/open-design
4. Impeccable
一个帮助 AI 提升前端设计质量的工具。它包含 design skill、多个命令，以及很多前端设计中的反模式规则，可以让 AI 不只是写出能跑的页面，而是写出更好看的界面。
https://github.com/pbakaus/impeccable
5. Awesome DESIGN.md
一个收集 DESIGN.md 文件的资源库。你可以把这些设计系统规则交给 Claude Code、Codex、Cursor 这样的 AI coding agent，让它们生成更一致、更有品牌感的 UI。
https://github.com/voltagent/awesome-design-md
6. Claude Code Best Practice
一个关于 Claude Code 工作流的实践资源库，里面包含 commands、agents、skills、hooks、orchestration 等内容，适合想从普通 vibe coding 升级到更系统化 AI 开发流程的人。
https://github.com/shanraisshan/claude-code-best-practice
我这支视频最想分享的不是“又发现了几个工具”。
而是一个更重要的趋势：
未来的竞争，不只是看谁会用 AI 写代码。
而是看谁能更早建立自己的 AI 工作流系统。
如果你是设计师、开发者、独立创作者、AI 产品创作者，或者你正在尝试用 Claude Code / Codex / Cursor 搭建自己的项目，这些工具都非常值得研究。
如果你喜欢 AI Coding、Claude Code、AI Agent、Vibe Coding、设计系统、自动化工作流相关内容，欢迎订阅我的频道。
no copyright music
Song: Markvard - Time (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link: https://bit.ly/3L3XRB6
如果你现在正在使用 Claude Code、Codex、Cursor、Gemini CLI，或者你正在学习 AI Coding、AI Agent、Vibe Coding，那么这些工具可能会帮你打开一个新的思路。
我觉得现在很多人还只是把 AI Coding 工具当成“更聪明的聊天机器人”或者“自动写代码工具”。
但真正有价值的方向，其实是把这些 AI 工具慢慢组合成一个完整的工作流系统：
让 AI 理解你的项目结构
让 AI 记住你的设计系统
让 AI 帮你生成视频和视觉内容
让 AI 帮你检查前端设计质量
让 AI 使用 commands、skills、hooks、agents 去完成更复杂的任务
最后把 AI 变成你自己的创作系统、开发系统，甚至是业务操作系统的一部分
0:00 intro
0:38 tool 1
2:05 tool 2
2:56 tool 3
4:52 tool 4
6:51 tool 5
7:45 tool 6
open design video :https://www.youtube.com/watch?v=WDD4QsOB_78
hyperframes video :https://www.youtube.com/watch?v=J51tKChDncY
这次我会介绍 6 个 repo：
1. Graphify
把你的项目、代码、文档、PDF、图片、视频等内容变成可以查询的知识图谱，让 AI 更好理解你的项目上下文。
https://github.com/safishamsi/graphify
2. HyperFrames
一个开源的视频生成和渲染框架，可以用 HTML、CSS、JavaScript 来生成视频内容，也很适合未来接入 AI Agent 做内容自动化。
https://github.com/heygen-com/hyperframes
3. Open Design
一个 local-first 的开源设计工具，可以用来生成网站、桌面端、移动端原型、slides、图片和视频，有点像开源版的 Claude Design。
https://github.com/nexu-io/open-design
4. Impeccable
一个帮助 AI 提升前端设计质量的工具。它包含 design skill、多个命令，以及很多前端设计中的反模式规则，可以让 AI 不只是写出能跑的页面，而是写出更好看的界面。
https://github.com/pbakaus/impeccable
5. Awesome DESIGN.md
一个收集 DESIGN.md 文件的资源库。你可以把这些设计系统规则交给 Claude Code、Codex、Cursor 这样的 AI coding agent，让它们生成更一致、更有品牌感的 UI。
https://github.com/voltagent/awesome-design-md
6. Claude Code Best Practice
一个关于 Claude Code 工作流的实践资源库，里面包含 commands、agents、skills、hooks、orchestration 等内容，适合想从普通 vibe coding 升级到更系统化 AI 开发流程的人。
https://github.com/shanraisshan/claude-code-best-practice
我这支视频最想分享的不是“又发现了几个工具”。
而是一个更重要的趋势：
未来的竞争，不只是看谁会用 AI 写代码。
而是看谁能更早建立自己的 AI 工作流系统。
如果你是设计师、开发者、独立创作者、AI 产品创作者，或者你正在尝试用 Claude Code / Codex / Cursor 搭建自己的项目，这些工具都非常值得研究。
如果你喜欢 AI Coding、Claude Code、AI Agent、Vibe Coding、设计系统、自动化工作流相关内容，欢迎订阅我的频道。
no copyright music
Song: Markvard - Time (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link: https://bit.ly/3L3XRB6