zara 张咋啦 / Skill & 独立产品组合(策略复盘)

时间线:2025-12 → 2026-05(约半年密集输出期) 核心定位:把"vibe coding 出来的小产品"做成 GitHub 公开 skill 或上线工具,让 26 万粉里有需要的人可以 clone / fork / pip install 明星产品:Frontend Slides(16k+ star,PPT 领域第一)+ Excalicord(第一个端到端独立上线的产品,白板录屏)

产品全景(按发布顺序)

#	产品 / Skill	上线时间	类型	形态	数据
1	Frontend Slides	2026-02	Claude Skill	GitHub	16k+ star,PPT 领域第一
2	AI 学习资源网站	2025-Q4	网站(Faces)	faces.site 部署	5753 likes
3	Excalicord(白板录屏)	2026-04	独立产品	网页端 + 自有域名	第一个端到端 ship 的产品
4	Tab Out(浏览器插件)	2026-04	浏览器插件	Chrome Web Store + 开源	"关 tab 变得上瘾"
5	follow-builders skill	2026-05	Claude Skill + 数据 feed	GitHub	"Centrally fetch locally Remix"
6	飞书 CLI agent skill	2026-05	Claude Skill	GitHub	会议 todo 变 done
7	视频长剪短 skill	2026-04	Claude Skill	GitHub	自动提取高光片段
8	学语言 app(纸质书活起来)	2026-04	iOS 雏形	自用	"给自己做的产品"
9	OpenAI Realtime + 飞书 CLI	2026-05	浏览器插件 demo	演示	口喷式写文档
10	白板视频录制工具(Excalicord 雏形)	2026-03	工具	自用	后来变 Excalicord 上线版

1. Frontend Slides(产品组合的招牌)

1.1 产品 = 一个观点

核心论点:"PPT 不应该是 PowerPoint,应该是有前端设计能力的 HTML"

Frontend Slides 是一个 Claude Skill,让用户用自然语言生成可交互的 HTML 演示文稿。

何时被使用:zara 现在所有场合(湾区 vibe coding jam 70+ 人活动 / 12 分钟分享 / 20 分钟演讲)都用 Frontend Slides 取代传统 PPT。

关键卖点:

维度	传统 PPT	Frontend Slides
设计感	模板化	强(用前端设计能力 = 真正的 web design)
可交互	❌	✅(嵌入视频 / 表单 / 动效)
生成时间	半天-1 天	3 分钟(自然语言 → Claude 生成)
改 PPT	改样式麻烦	跟 Claude 说一句改完

数据效果:GitHub 16k+ star(数字截至 2026-05),"PPT 领域最火 skill"。

1.2 数据如何爆涨(从 6k 到 16k+)

zara 后续发了"做了个 1 万星的 skill 之后我学到的"复盘帖(030 帖,文字版)。核心观察:

推广手段	效果
持续在小红书发示范作品(每个会议都用 HTML PPT 演示)	高
教程帖"如何做出好看的 HTML slides(0 代码)"	中
强调 zara 是哈佛 / 飞书 / VC 背景	中(信任锚)

反共识:zara 不在 README 大量推销,让用户用 = 看作品。

1.3 产品策略心法

心法	在 Frontend Slides 的体现
Opinionated product	"PPT 必须有交互"是观点,接受这个观点的人就来用
站在巨人肩膀上	基于 web design 现成生态,不重造
Build to learn	zara 边做边学前端

详 zara 张咋啦 / Vibe Coding 心法体系 §3 / §6。

2. follow-builders(自我表达驱动的 skill)

详见 zara 张咋啦 / follow-builders skill 与 AI 信息源严选方法论(已有 wiki,本节不重复)。最核心机制:

┌─────────────────────────────────────────────────────┐
│  Centrally Fetch (zara 中心化爬)                     │
│  · zara 手挑 25 个 AI builders 的 X + 播客             │
│  · 用 X API / YouTube transcript API 爬下来            │
│  · 信息源用户不可改                                    │
└─────────────────────────────────────────────────────┘
                       ↓
┌─────────────────────────────────────────────────────┐
│  Locally Remix (用户自定义)                            │
│  · 改成中文 / 英文 / 中英对照                          │
│  · 改成飞书文档 / 终端简报 / Slack 消息                │
│  · 改成总结颗粒度(深 / 浅)                           │
│  · 改成只看推文 or 只看播客                            │
└─────────────────────────────────────────────────────┘

核心机制 1:观点 ≠ 工具

市面上"AI 新闻抓取 skill"几十个,用户选 follow-builders 是因为接受了"Follow builders, not influencers"这个观点 — 接受作者亲选 25 人这个不能改的事实。

核心机制 2:Centrally fetch 解决"每个 agent 各爬一遍"浪费 token 问题

zara 一个人爬 25 个 X + 25 个 podcast = 一个中心 feed → 用户 agent 直接消费这个 feed,不重复爬。

3. Tab Out(技术驱动的 idea 标志案例)

3.1 这个 idea 怎么来的(技术出发的典型路径)

不是"我有 X 痛点(tab 太多)" → 然后做产品。而是反过来:

1. zara 在 X 上看到:有人用 Chrome 浏览历史做小工具
2. 意识到:"我的 Chrome 浏览历史是存在本地的"
3. 问 Claude Code:"基于这个能做啥?"
4. Claude Code 提议:"你 tab 多得不关,能不能帮你关 tab?"
5. Claude Code 还提议:把入口放在 New Tab 页(zara 不知道 new tab 可以自定义)
6. Tab Out 诞生

这是 zara 公开倡导的"从技术出发找 idea"的标志性案例。详 zara 张咋啦 / Vibe Coding 心法体系 §4。

3.2 产品设计的关键决策

决策点	zara 的选择	Why
入口	New Tab 页面替换	强制 surface — 每次开新 tab 必看到。Claude 提议,zara 自己不会想到
关 tab 反馈	音效 + 撒花动画	上瘾游戏化(用户反馈"很爽")
Duplicate detection	"Close all duplicates" 一键	高频痛点
形态	开源 + 鼓励 fork	不希望用户都用 zara 版本,而是 remix(Dark Mode / 自定义起始页)

3.3 反共识做法:Fork 比 PR 更好

"我不希望大家直接用我的产品,我希望你去 remix 我的产品。每个人都可以去改造一个自己的版本。"

提交 PR(改 zara 的 repo)< Fork 出自己的版本 → 每个人有自己的 Tab Out。详 zara 张咋啦 / Vibe Coding 心法体系 §3.3。

4. Excalicord(第一个端到端独立 ship 的产品)

"这是我第一次没有程序员尝试只靠自己跟 Claude Code 一起上线了一个产品。" —— 2026-04 上线复盘(047 帖)

4.1 产品是什么

Excalicord = 白板录屏工具,基于 Excalidraw 开源白板 + 加录屏 + 加透明提词器。zara 用它录她小红书的所有"白板视频"。

4.2 关键决策:站在巨人肩膀上

zara 没有从零做白板,直接基于开源 Excalidraw,只加录屏功能 → 难度大大降低。

"你是在拼乐高,而不是从头造轮子。"

这是她给初学者的 2 个起步建议之一。

4.3 关键洞察:Coding ≠ Shipping(给独立开发者的核心 lesson)

Vercel CEO 的观点 + zara 实证:Shipping 是另一种技能

Coding(写代码)	Shipping(端到端上线)
AI 可以帮你做得很好	还是需要你
30% 时间	70% 时间
Claude 给个 prompt 就能写	系统打通 / 测试 / 营销 / 用户支持

Excalicord 用到的 8 个系统(非代码部分):

Claude Code(AI 编程)
Supabase(数据库)
Vercel(部署)
Resend API(邮件)
Namecheap(域名)
Posthog(数据分析)
Google Sign in(账号系统)
Stripe(支付)

zara: "大量时间花在把这些东西连起来。"

4.4 给自己做 vs 给用户做(差一个数量级)

给自己做	给用户做
一个 AI 编程工具 + 本地跑就行	需要上面 8 个系统全打通
你的浏览器 + 电脑型号一个就 OK	千奇百怪的浏览器 / 设备 / 性能问题
你测一遍就够	ship 出去之后才发现一堆边缘 case

zara 提示:Web 端产品在 Chrome 里 work,换成 Edge 可能就不 work。

4.5 调试 lesson:Bug 解不了让 AI 上网查

"10 次有 8 次,Claude Code 上网查完之后就直接解决了。"

zara 经验:用 Claude Code 几轮解决不了的 bug,告诉它"上网查别人怎么解决"。Claude Code 内嵌了 deep research + Web Search 能力,这个能力没被普遍用好。

4.6 设计 lesson:让 Claude 做几个版本让你挑

"用 Claude Code 一定要调用它的 Frontend design skill,并且让它多做几个版本。"

zara 做法:让 Claude 做一个 playground,里面有各种各样的不同版本,zara 像挑设计稿一样选。

4.7 上线一天的迭代速度(独立开发的爽点)

Excalicord 上线一天,zara 上线 4 个新功能:

透明提词器(可叠加在画面上)
持久化(关浏览器再开,画的内容还在)
多浏览器适配(Safari / Edge / Firefox 视频下载稳定性)
新发现:Excalidraw 自带的 web embed(直接嵌 X 推文 / YouTube 视频)

"独立开发非常爽的一点就是,你想怎么迭代就怎么迭代...提词器透明度这个东西,可能就是我跟 Claude 聊个两三轮,它就做好了,就是一个几分钟的事。"

5. 给初学者的 2 个起步建议(zara 复盘总结)

来源:047 帖(Excalicord 上线复盘)

5.1 先给自己做产品,再给用户做产品

阶段	难度	学到什么
给自己做(本地工具)	低	验证 vibe coding 心理舒适圈
给小圈子做(朋友用)	中	学 deploy + 简单分发
给用户做(端到端 ship)	高(完全不同 league)	学 Shipping 的 8 系统 + 千奇百怪用户环境

5.2 站在巨人肩膀上(拼乐高,不造轮子)

❌ 反例	✅ 正例(Excalicord)
从零造白板 + 录屏	基于开源 Excalidraw + 只加录屏
自研 SSO	接 Google Sign in
自建支付	接 Stripe
自建邮件发送	接 Resend API

"关注市面上有哪些开源软件 / 库 / API,你在它们的基础上加自己的小功能。"

6. 一年内产品组合的模式

跨 10+ 产品的横切心法:

心法	在哪几个产品体现
从技术出发找 idea	Tab Out(浏览器历史)/ OpenAI Realtime + 飞书 CLI / 视频长剪短(用 AI 自动剪辑)
Opinionated	follow-builders(挑 25 人不可改)/ Frontend Slides("PPT 必须有交互")
Skill 形态 > SaaS 形态	多数产品先做成 Claude Skill(GitHub 开源 + 用户 fork)而不是 web app
站在巨人肩膀上	Excalicord 基于 Excalidraw / AI 学习网站基于 Faces / 飞书 CLI skill 基于 lark-cli
Build in public	上线一天就发视频复盘(047 / 049)+ 反思帖(030)
粉丝是分发引擎	不依赖 PH / HN,直接用 26 万粉小红书 + 5 万粉 twitter 分发

7. 反向:跟 zara 不做什么

不做	Why
大型 SaaS	团队 + 资本要求高,跟 vibe coding 个体节奏不符
通用工具(generic chatbot/IDE)	没观点 → 被 Claude 平替
数据库 / 后端工具	不擅长 + 没动机
B2B 销售	不擅长 + 没动机
押宝某个模型	模型频繁切换 → 工具/skill 要 model-agnostic

8. 跟其他独立开发者的对比

维度	zara	newtype 老黄	王凯	dontbesilent
主要 ship 形态	Skill + 网站	Skill + Cloudflare Workers	飞书 bot / CLI / 海外 SaaS	Skill + 内容
推广引擎	小红书 26 万粉	YouTube + Substack	知识星球	小红书 + Twitter
风格	文科生 + opinionated	工程化 + 极致 SOP	多 agent 矩阵	AI 自媒体
标志产品	Frontend Slides	Super Analyst Pro / newtype OS	tokrepo / FastFacts	多 skill 套件

详 Vibe Coding 与独立开发(跨作者主题综合) 跨作者主题汇总。

History

2026-05-22 — 创建,基于 10+ 个产品 launch / 复盘帖完整梳理。核心论点:Coding ≠ Shipping;站在巨人肩膀上;skill > saas

2026 年 5—6 月增补：办公入口与可编辑交付物

本节依据作者发布的文字说明及署名回复整理；视频尚未转写，配图未视觉审阅，评论区「问一问」生成的摘要不能作为视频原话。以下是当时的产品体验与设想，不代表当前版本功能保证。

飞书桥接的价值是工作上下文。 5 月 22 日作者介绍用开源桥接把 Claude Code 接入飞书，在手机也能对话；5 月 23 日回复明确，移动端遥控只是其中一方面，更重视与飞书工作上下文及交互打通。5 月 27 日补充「同一个机器人、不同群」的会话组织方式，6 月 11 日说明同一项目已支持 Codex。对 PM，适用判断是任务资料与讨论是否已经沉淀在飞书，而不是多装一个聊天入口就会提高效率。评论中有人报告工具调用、CLI 下载和上下文异常，因此连接成功不能代替真实读写任务验收；本次不将评论里的解决办法升级为安装教程。

SVG（可缩放矢量图）的意义在交付后的修改。 6 月 2—3 日作者介绍飞书画板 skill，强调元素可拖动、协同编辑、可对具体元素评论；可用于代码库/架构说明、会议或论文摘要、数据图与社交长图，也提出在同一文档混排图与讲稿的方式。Why：若同事需要继续改结构、指出某个元素的问题，可编辑画板比最终截图更方便接力；只需一次展示时，不必强制换掉现有演示工具。作者明确区分：飞书 CLI 提供调用画板能力，skill 主要补审美规范。漂亮画板本身并不验证数据与论证正确，附图效果本次也未复现。

桌面交互与持续运行应分别验收。 5 月 29 日作者把 Codex Mac app 视为非程序员的办公助手，作者回复看重多会话管理，并在 6 月 1 日提示当时不少功能在 Windows 上没有。6 月 11 日说明提到 caffeinate 与 Amphetamine 作为保持运行的线索，未提供本次可核验的设备/供电条件。不能从简短标题推导「任何 Mac 合盖必然继续运行」，也不能把一台设备的体验当跨平台保证。

2026-04 至 06 补充：降低工具门槛，也要验收最终交付

4 月 16 日作者说明 Frontend Slides 已作为 AnyGen 功能上线，定位是可编辑、无需自行部署、可分享；5 月 9 日说明将个人审美做成 30 多个可复用模板；5 月 14 日文字称可编辑、分享、嵌图及导出 PDF/PPT。这些是当时发布说明，未据此复现导出步骤。评论里存在访问失败、字号偏小、要求 PPTX 交付、下载付费的反馈，不能用“HTML 很好看”代替最终文件验收，也不据评论报价推定当前价格。

对 PM 的用途：做交互演示和网页分享时，可减少部署门槛；若接收方必须继续编辑原生 PPTX，要先用一页中文、多行文字和图表检查格式保真。后一句是编者从反馈归纳的验收建议。6 月 2 日作者补充视觉规则是 design.md，不只是固定模板；6 月 3 日说明飞书画板可编辑文字、拖动元素并下载图片。它们支持“规则加可编辑对象”的设计方向，不保证任意 SVG 导入、私有部署或其他画板都有同样能力。

4 月 15 日 Tab Out 的明确功能是把 Chrome 新标签页变成已打开标签的展示与关闭入口；4 月 24 日视频说明介绍制作过程，但现有文字没有完整过程。用户反馈自己的新标签页已被另一插件占用，于是改成侧边栏——这是第三方改编例子，提醒选择入口要适配用户已有习惯，不是作者已发布的侧边栏功能。

5 月 12 日作者描述将实时语音接口与飞书 CLI 连接成浏览器插件，用口述写文档、回顾会议。价值在把表达直接接入工作资料；评论也有人偏好边打字边组织思路。短说明没有权限、错误纠正和写回确认的完整方案，不能据此推荐无确认地写正式文件。评论中的每分钟费用未核实，不作为成本基准。

6 月 1 日“从 0 到 1 做 skill”正文只有一句标题式说明。评论者提出先做具体 demo 再提炼可复用指令，也有人建议先讨论方案；均不能冒充 Zara 的视频步骤。此条保留待转写。

本批已读抓取到的作者正文与真人评论；机器人“问一问”的摘要未采信为转写，图片未视觉审阅，视频未转写。合盖运行一帖的真人反馈还指出网络会中断、不同系统的防休眠效果有争议；因此防休眠不等于任务能可靠持续运行。