json-render 拆解:17k star 的 Generative UI,赌的是「别让模型写代码」
把 Vercel Labs 这个 17k star 的项目从 0 到 1 读了一遍:它用一棵扁平元素树加 RFC 6902 流式 patch,把「AI 生成界面」这件不可控的事变成可校验、可剪枝、可导出代码的工程问题。真正的取舍不在生图不在模型,而在数据结构。
58 posts in reverse chronological order.
把 Vercel Labs 这个 17k star 的项目从 0 到 1 读了一遍:它用一棵扁平元素树加 RFC 6902 流式 patch,把「AI 生成界面」这件不可控的事变成可校验、可剪枝、可导出代码的工程问题。真正的取舍不在生图不在模型,而在数据结构。
Google 的 cwebp 是个 单文件转化器:cwebp input.png -o output.webp。它没有 --glob 也没有文件夹模式 —— 这不是设计缺陷,而是 Unix 哲学:保持一个目标单一,让 find/for/xargs 去编排。本文整理 5 个真实场景下的批量写法,以及 quality/preset/lossless 怎么选。
这是我拆的第六个技能仓库,也是唯一一个「私人工作流」型——微信解密、剪映无头生成、火山 ASR、X 切片、公众号批量导出,19 个技能。但最让我意外的是它的 fork 率:41.5%,是前五个仓库的 4 到 6 倍。原因不复杂——这些技能必须被改才能用(你自己的微信、你的 Obsidian 路径、你的账号),而每个 fork 出去的人第一件事就是改路径和配置。它的许可证也因此不是开源的,是「源可用 + 商用需授权」。另外有一个细节我觉得前五个仓库都该学:它的 CI 里装着一个隐私扫描器,会拦截私人路径、私钥和六种凭据形态——把「别提交敏感信息」从 README 里的一句请求,变成了会挂红的门禁。
这是我拆的第四个 Skill 仓库,也是 star 最多的一个(95,125)。前三个都在解决「怎么让 agent 做对一件事」,它解决的是另一个问题:「当你有 25 条规则,你怎么知道它们还在生效」。答案是一套三层评测框架——其中第二层用词法近似把「路由」变成了可确定、免费、能进 CI 的检查。另外两个我觉得该抄的是:每个技能都附一张「agent 的借口 vs 现实」反合理化表,以及一句关于训练与架构腐坏的洞察——「架构腐坏要几个月才显现,永远进不了权重,棘轮就是那个缺失的惩罚项」。
这是我拆的第五个仓库,也是第一个「会动手打东西」的——AI 自主渗透测试工具,6.3 万 star。但真正让我停下来的是一个不到 300 行的技能文件:反证与结案纪律。它规定每个候选漏洞只能以三种状态之一结束,没有第四种,「我往下看了」不算其中一种。而要判一个候选「安全」,你必须能说完一句话:因为某个具体位置的某个具体控制,在攻击者可达的每一条路径上、在危险动作之前生效。说不出这句话,你就不能标 ruled_out——那是把「我没证明出来」伪装成「我证明了没有」,而真实漏洞就是这样被漏掉的。
上一篇拆的封面 Skill 只有 300 行提示词。这一篇拆的 diagram-design 有 554 个文件、11 份 ADR、58 条本地关卡命令,4 万 star。读完我最强的感受是:Skill 的工程质量不取决于提示词写得多好,取决于有多少条规则被写成了 checker。它的每一句审美判断背后都有一道几何验证;更狠的是,每个 checker 还配了反向对抗测试——因为作者发现,一条只活在散文里的规则,真的会发出一堆坏例子。
前两篇拆的是 Skill 本身。这一篇拆的仓库,是给 AI agent 配了一门语言、一个编译器和一套运行时来做视频——112 个包、2026 个文件、一个半月做到 2315 star。它最关键的设计决策只有一句:把时间轴锚定在「词」上,而不是「秒」上。作者源码里根本没有秒和帧,时间是从语音证据里长出来的。这一句决定了它后面所有的能力:改一句台词时间轴自己重排、第二条视频几乎不花钱、以及一条完全零模型调用、成本精确为 0 的渲染路径。
我用了一段时间的封面生成 Skill,一直以为它的核心是「攒了九种好看风格」。直到认真拆了 peggykangkang02 的 xialingguo-ip 才发现,九种风格只是素材库——真正决定它能不能稳定出活的是另外四件事:一句「风格固定、主次灵活」的原则、一套不把人问烦的信息收集方式、一条「不写死真人 IP」的公共边界,以及一个「不把缩略图当交付」的自我约束。这篇逐层拆开。
我给自己门店的销售助理接上了一个 1188 篇《车型适配产品目录》的知识库。整个过程让我意识到:把知识库接进 AI,难的不是「接上」——接口通不通是半小时的事。真正的难点是「匹配」:资料形态是否匹配调用链、能力接入是否匹配行为约束、库里的内容是否匹配能说和不能说的边界。这篇完整拆解这四个匹配点,以及我用什么证据证明它真的接上了。
我把自己和 AI 一起『一页页读书』的机制拆成一个可复用 Skill:PDF 拆页、按物理页让 AI 讲解精华、追问互动、累积笔记,并靠 progress.json 精确管理阅读进度。这篇把它设计成系统的关键决策写清楚——为什么是『互动共读』而不是批量总结、为什么原文框是刚需、为什么进度要按物理页记。
第六章预告了「构图变量」,这一章从它的第一个模块讲起:画幅比例(Aspect Ratio)。它是构图里最常被忽略、却又最早决定一切的东西——一旦比例定了,空间方向、主体大小、留白方式、信息布局全跟着变。拆解六种常用比例,并给出一套「先问用途,再定比例」的决策法。
画幅比例决定「画布形状」,景别决定「镜头远近」,这一章的机位决定「镜头从什么高度、什么角度去看主体」。俯视、平视、仰视不只是三个角度,各自带出完全不同的心理感觉——俯视让人变小变安静,平视最自然真实,仰视让人变强变有气场。
景别管远近、机位管高低,而镜头管的是「空间如何表现」——画面会不会变形、背景是被拉开还是被压缩、细节是不是被放大。拆解正常、广角、长焦压缩、微距特写四种镜头语言,并完整保留每种镜头的可复用 Prompt 模板。
第二章把 Prompt 拆成了五维/十层,其中「Lighting 光线」这一维最值得单独做控制变量。想判断哪种光最适合一个商品,唯一正确的做法是:主体、构图、背景、风格全锁定,只换光线。这篇拆解自然光、侧光、逆光、霓虹光四种光的语义差异,并给一套可复用的「固定模板 + 光线变量库」。
第三章测了「光线」这个单一变量,这一章测另一个单一变量——「承托材质」。同一个商品主体、同角度、同构图、同光线逻辑,只换承载或包围商品的材质:木质、大理石、金属、丝绸、纸张。拆解五种材质的视觉倾向,并给出汽车后市场商品的选型建议。
从 Midjourney 的公开机制出发,拆解 AI 生图的底层原理:生图不是在图库里找图,而是从随机噪声出发、在「视觉概率空间」里采样。理解这一点之后,Prompt 的本质、构图法、Seed、--stylize 这些心法就都有了统一解释。
第三章测了「光线」这个单一变量。这一章往上走一层:情绪不是一个能直接写进 Prompt 的孤立参数,它由「光线表现 + 色彩氛围 + 空间构图节奏」三个底层变量共同决定。拆解柔和、安静、强烈、神秘、轻松五种情绪,给出可复用的「情绪变量生成器」。
用 Midjourney、Stable Diffusion 生成的图,屏幕上看很惊艳,一上印刷机却满是噪点和色偏。这篇观察拆解了「生图 → 印刷」这条链路里的三个关键点:RGB 与 CMYK 的色域鸿沟、分辨率与网线数的匹配、以及 ICC 色彩管理闭环——核心是一句话:生成和交付是两个标准。
第七章的画幅比例决定「画布是什么形状」,这一章的景别决定「镜头离主体有多远」。同样是构图变量,画幅管空间框架,景别管主体尺度。用实拍式成图拆解远景、全景、中景、近景、特写五档,并给出每一档可复用的 Prompt。
这是五维公式里「Style 怎么表现」那一维的深入。同一个商品主体、构图、角度、背景复杂度都不变,只换最终视觉表达方式:商业摄影、极简草稿、线稿图、杂志插画、水彩风。拆解五种表现形式的用途,并把整个「商品图变量测试」体系收束成六类变量。
第一章讲了 Midjourney 的底层原理——生图是在「视觉概率空间」里采样。这一章回答下一个问题:既然 Prompt 的本质是收缩这个空间,那具体该在哪几个维度上收缩?答案是 Google 的「视觉变量公式」——Subject、Action、Scene、Style、Composition 五维,进阶再扩成十层模型。
我把自己给门店搭的 CRM 体系打包成成果记录下来:用飞书多维表格当后台、飞书 CLI 当数据接口、Hermes AI 助理当前端,让销售像聊天一样录客资、记跟进、查转化——不用逐格开表。这篇拆解这套「自然语言 → 结构化 CRM」怎么设计,以及为什么它比传统 ERP 更适合小团队。
我把自己做 AI 视频的整套方法沉淀成了一个可复用的 skill:六步流水线(选题→脚本→分镜→画面画布+主体人物→关键帧 prompt JSON→整段视频 prompt),双轨设计(ChatGPT 6-shot 快速预览 + 正式生产),外加豆包免费模式、台词时长质检、双人 IP 锁比例这些把翻车提前挡掉的机制。这篇就是它的完整说明文档。
我给拍摄剪辑的同事做了一个『一句话生成抖音封面』的 AI Skill:草稿图 + 提示词 → 图生图 → 回传飞书。这中间最值的不是生成,而是两个设计——如何在高并发多个需求时不搞混各自的草稿图,以及如何用『执行电路』而不是一堆『禁止』来让流程自然走对。
我把「内容生产」从手工写、一条条发,改造成了一条可复用的自动化流水线:100问选题库当原料、GEOFlow 批量产母版、五个平台写手 agent 改写、飞书归档闭环。一周产了 700+ 篇高质量母版。这篇拆解这条线怎么搭,以及为什么「证据纪律」才是整条线的保命符。
给飞书机器人搭实时流式卡片,我踩了一整天雷才跑通:从『卡片出了但表格秒消失』这种看似玄学的问题,挖到其实是『AI 输出完又去清理临时脚本触发了归档机制』这个根因。这篇把整套 HFC 流式卡片的排坑链路、机制认知和最终方案写成可复用的记录。
我把小红书图文的整套做法也做成了 skill:从 GEOFlow 母版整理成固定 5 张图的结构化提示词(封面→原理→对比→决策+商业→FAQ 避坑),贴给 ChatGPT 一次出图,再配封面和标题/Tag。核心是三条我踩出来的规则:固定 5 张、商业只在图4、FAQ 是图文长尾搜索的核心资产。这篇是它的完整说明文档。
「AI 能做私人辅导」这句话大家都听腻了。真正值钱的是背后三个设计原则:在理解边缘教学、把挣扎留给内容本身而不是后勤、让 AI 画依赖图逼它认真推理。读完你就能拿这套思路改造自己的学习方式。
网站做出来 Google 搜不到?不是网站坏了,是 SEO 链路没走通。这篇把从 Googlebot 发现页面到用户体验的整个过程拆成五步可执行框架,并告诉你哪些步骤可以放心交给 AI、哪些必须自己判断。
在 Hermes Agent 中接入图片中转站后,飞书生图不再是一个"每次让模型临场发挥"的不可靠动作。本文记录了我们将生图流程固化为"消息入口 → 固定 Skill → 中转站 → 校验落盘 → 单一 MEDIA 出口"的完整架构方案,包含模块划分、状态机设计和交付规则。
当企业需要在同一台机器上为多个业务线部署独立飞书机器人时,如何在"不串线、不丢事件、不抢端口"的前提下完成快速复制?本文基于 Hermes 多 Profile 实践的完整手册,拆解从飞书应用创建到健康检查验收的全链路架构与关键设计决策。
当两个飞书机器人在同一台机器上共用流式卡片时,第一个"突然消失"、图片重复发送、群里有人能用有人不能用——这些问题不是配置写错了,是隔离边界没划对。本文记录了将销售助手与内容助手同时接入飞书流式卡片的完整实践,包含四层隔离模型、故障决策树、运维检查清单和七个真实踩坑记录。
Vibe Coding 生态的核心术语、工作流模式、工具链和最佳实践的系统整理。从 Karpathy 的定义出发,覆盖 AI 编程时代的每一个关键概念。
AI Agent 的 12 个核心原理,自下而上逐层拆解:从最底层的消息数组(LLM 的工作记忆)、上下文窗口(稀缺资源管理)、系统提示词(角色设定),到中层的思维链、少样本提示、预填充、停止序列、Tool Use、RAG、ReAct,最后到上层的幻觉问题和多 Agent 编排。每条原理都回答一个问题:它是什么、为什么需要它、怎么正确使用。配有代码示例和正确/错误对比。
上一篇 API从0-1 讲了理论,这一篇是实践复盘。我们用 Node.js 手搓了一个 30 行的 API 服务器,又用 Dog API 做了一个瀑布流画廊——两条代码加起来不到 300 行,但把「写 API」和「调 API」两端的知识都覆盖了。这篇复盘拆解每个技术决策背后的原因,把两端串成一条完整的请求-响应链路,最后提炼出 4 个不管用不用框架都成立的核心模式。
AI Agent(Claude Code / Codex / Hermes)在终端里跑得最多的命令之一就是 curl。它不是浏览器,没有「回车就出页面」的便利——但它让 Agent 能精确控制 HTTP 请求的每一个字节,然后一字不漏地读每一个字节的响应。这一篇从 Agent 的视角讲 curl:为什么 Agent 不用 Postman、13 个核心标志怎么用、Agent 高频使用的 8 个实战模式、以及 curl 输出背后的 HTTP 协议细节。读完你能像 Agent 一样高效地探索任何 API。
用 Next.js 16 App Router + MDX 搭个人网站,从本地能跑到公网能访问,中间踩了 TypeScript 严格模式的 build 报错、中文文件名跨平台编码错乱、MDX 配置遗漏、路由组布局继承、draft/published 内容过滤、以及 Vercel 自动部署的「push即上线」风险。这篇把 7 个坑的完整因果链——从第一个报错到最终修复——全部记录下来,每个坑都附了错误信息、根因和修复方案。
Nginx 是全球 top 百万网站里超过 30% 在用的 Web 服务器和反向代理。但它的配置文件对新手来说像天书——`server`、`location`、`proxy_pass`、`upstream` 全是新概念。这一篇用一个「收发室」类比帮你建立心智模型,然后从 3 个最简配置开始(静态文件 / 反向代理 / SPA 兜底),深入到 location 匹配规则,最后覆盖负载均衡、限流、Gzip、日志调试等实战模式。读完你能自己写一个完整的 Nginx 配置。
前端开发者迟早要面对一个问题:数据从哪来?API 就是答案。这一篇不是 API 百科全书,而是一条从0到1的路径——先用 fetch 拉回第一份数据(0),理解 HTTP 请求和响应的结构,掌握 REST 风格的设计约定,最后自己搭一个能跑的 API 端点(1)。中间穿插 GitHub API 实战和 3 个帮你避坑的心智模型。
为什么每个项目都有一个 .git 文件夹?为什么 Git 成了程序员的标配?这一篇把 Git 的核心概念(仓库、暂存区、提交、分支)、日常命令、.gitignore、版本穿梭、工作区切换讲清楚,最后用一个实战场景把 Git Worktree 和 Claude Code Subagent 联动起来——多个 AI Agent 在同一个仓库并行干活不打架。
上一篇讲了 Git 本地操作和 Worktree。这一篇把视线移到「Git 之外」——GitHub 这个全球最大的代码托管平台。覆盖:什么是开源 / 怎么创建 GitHub repo / SSH key 怎么配 / 怎么把本地仓库推上去 / GitHub CLI(gh)怎么在终端替代网页 / GitHub MCP 服务怎么让 Claude Code 直接读 issue / 创建 PR。
打开浏览器、输入网址、回车,页面就出现了——但这背后到底发生了什么?拆开 DNS 解析、TCP 三次握手、TLS 握手、HTTP 请求/响应、浏览器渲染 6 个关键阶段,建立对 Web 网络请求的完整心智模型。
为什么 JavaScript 一开始没有模块系统?为什么一段 `<script>` 改个变量名就把整个网站搞炸?从 IIFE、CommonJS、AMD/UMD 一路进化到 ES Modules(import / export),这一篇把模块化的历史和 ES Modules 的完整语法、它和 CommonJS 的本质差异、Tree Shaking 为什么是 ESM 带来的最大胜利、模块解析机制一次性讲清楚。
电脑里那些东西到底是怎么组织的?为什么有时路径前面有 C: 有时是 /?相对路径里的 ./ 和 ../ 是什么意思?什么是代码文件?VSCode 为什么是程序员的最爱?这一篇把文件系统、路径、扩展名、和代码编辑器这几件事一次性讲清楚。
上一篇讲了 ES Modules 和模块化。源码能 import 了,但浏览器还是不能直接跑 .ts / .vue / .jsx / Sass——这一篇讲前端工具链。覆盖:为什么需要构建工具 / npm 是什么 / package.json 核心结构 / 用 npm install 安装依赖 / npm run 脚本的本质 / 构建工具演化(Grunt → Gulp → webpack → Vite)/ Vite 上手 / 源码 vs dist 构建产物 / 用 Git 管理现代前端项目。
上一篇讲了 React 是什么。这一篇深入讲 React 的「数据驱动」:State 是什么 / 什么数据应该放 state / 单向数据流 / setState 后 React 内部发生了什么(reconciliation + commit)/ 父子组件通信(props + 回调)/ 跨组件通信(Context API)/ 一个完整的 TodoList 实战例子。
上一篇文章讲了 npm + Vite + 构建产物。这一篇回答一个朴素的问题:React 到底是什么?覆盖:为什么需要 UI 框架 / React 的本质是 npm 包 / 浏览器只认 HTML CSS JS / React 编译后的真实产物 / React vs Vue 本质相同哲学不同 / 组件树:App 是最大的组件 / 写一个最小可用的 React 组件。
代码写完了,怎么让它「全世界的浏览器都能访问」?这一篇把服务器部署的最短链路讲清楚:用 SSH + Git 把代码拉到服务器、文件目录权限怎么配(chmod 755 / chown www-data)、Nginx 怎么反向代理你的应用 + serve 静态资源、HTTPS 怎么用 Let's Encrypt 一键签证书、最后用 GitHub Actions 实现 push 即部署。
那个黑窗口到底是什么?为什么 AI 工具(Claude Code / Codex / Hermes)几乎都靠终端指挥电脑?这一篇把终端、Shell、家目录、20 个最常用指令、VSCode 集成终端、以及 Claude Code 实战里最高频的命令行用法一次性讲清楚。读完之后你能看懂 AI Agent 在跑什么,也能自己跑最基础的几条命令。
design-draft 的 PRD / Spec 模板,帮助把模糊想法变成可协作、可验证、可回滚的工程对象。
深入解析 ymyy-sales-agent profile 中 ark-seedream-car-preview skill 的核心实现:色彩资产库、多 Provider 链式轮询、宽高比严格校验、模块化 Python 包架构。记录当前遇到的已知问题和解决方向。
完整记录 Hermes Agent 连接飞书 Bot 的配置过程:Gateway 连接、Bot 授权、多 Profile 隔离、流式卡片插件、踩坑与排查。结合 W15-W17 三周实战经验。
个人网站内容系统启动时的第一篇草稿。
编程思维不是'写代码的能力',而是一套把模糊问题变成可计算、可验证、可维护方案的认知框架。本文用 25+ 张 Mermaid 图系统讲解 9 大模块:核心定义、问题建模、数据表示、过程设计、抽象分解、正确性验证、工程化思维、系统思维、最小学习闭环。
企业AI落地从工具层开始,但必须走向流程层、数据层和业务层才算真正落地。从4个阶段、7类工具、4层架构到3个落地关键点——拆解AI如何重构企业的知识生产方式。
Agentic AI workflow 的本质:把复杂任务拆成多个步骤,让 LLM 分阶段完成。从普通用法 vs Agentic 对比、研究代理案例、到自主性连续光谱——DeepLearning.AI 课程核心笔记。
遇到难啃的抽象概念怎么都记不住?别硬背——试试这个 Prompt 技巧:让 AI 用寓言故事的方式讲给你听。大脑天生喜欢故事。
朋友是初中英语老师,每周花 2-3 小时出阅读理解题,最痛苦的是出题环节——一个合理的干扰项能卡半小时。本文记录一个 OpenClaw 技能从需求分析(500-600 词 / CEFR A2-B1 / 5 道中国考试风格题)→ 技术选型(OpenClaw Skill vs Python vs Web)→ 7 张 Mermaid 流程图架构 → 3 个难点(词数控制、题目质量、难度控制)→ 小红书发布计划的完整开发故事。效率提升 24 倍。