SankiWork 是每个 Vibe Coder 的梦想
一份面向 vibe coder 的 SankiWork 实战手册——用上你自己的 agent，挑一套设计系统来摆脱 AI 的廉价感，用提示词搭出真正能转化的结构，再把粗糙的 PRD 在几分钟内变成一个落地页、一个移动应用和一个桌面应用。基于 Sean Kochel 的实操演示。
这份指南是一本面向 vibe coder 的 SankiWork 实战手册：用上你早已在用的 agent，挑一套设计系统，让产出不再一眼就让人喊出“这是 AI 生成的”，用提示词搭出真正能转化的结构，再通过对话不断迭代。它跟着 Sean Kochel 在他的实操演示中接连完成的三个项目走——一个落地页、一个移动应用、一个桌面应用——并根据当前版本重新撰写、更新。想看现场实操就看上方的视频，想看文字版就继续往下读。
SankiWork 工作区——原型、幻灯片、图片和视频，全都在一块从容而熟悉的画布上。
什么是 SankiWork？
SankiWork 是一个本地优先的设计平台，它跑在你早已在用的编程 agent 之上。它会检测你机器上已有的 CLI——Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode，还有几十种其他工具——并让那个 agent 来驱动生成。用 Sean 的话说：有一个 CLI 层用来配置你的 agent，一段系统提示词驱动质量，然后是真正让它有价值的部分——skill 支持和一个深厚的设计系统库。产出的是真实的 HTML 文件，所以你做出来的东西能直接放进你真正的项目里。
vibe coder 为什么在意它：
- 用你自己的 agent 和密钥——不用再订阅第二份服务，也没有供应商锁定。
- 本地运行——产出是 HTML，可以直接搬进你的代码库。
- 设计系统消灭 AI 廉价感——从一个真实品牌出发，而不是一张空白画布。
- skill 可定制——把你自己的文案规则、UX 范式或流程直接放进去。
- 本地优先——在本地运行，用你自己的 agent 和密钥。
每个 vibe 项目都会撞上的两个问题
Sean 把整套工作流围绕两种失败模式来组织，它们值得被点名，因为这本手册接下来的内容就是教你如何避开它们：
- 看起来像 AI 廉价货。千篇一律的渐变、同一款衬线字体、一堆套娃容器——连你自己都不喜欢。
- 它的结构撑不起它的目的。一个不会转化的落地页，一个流程说不通的应用。
一套设计系统解决第一个问题。一段带真实结构的精心提示词解决第二个问题。接下来每个项目都要把这两点记在心里。
第 1 步——安装并选择你的 agent
你有三种入门方式：
| 方式 | 适合谁 | 前置要求 |
|---|---|---|
| 桌面应用 | 大多数人——零配置 | 无。下载打开即可。 |
| 从源码运行 | 想读或改代码的开发者 | Node ~24，pnpm 10.33.x |
| 装进你的 agent | 常驻终端的人 | 一个已有的编程 agent CLI |
最快的方式是桌面应用——到 sanki-ai.cloud/download 下载；它会自动检测你 PATH 上已有的 agent CLI。如果想改用源码运行：
git clone https://gitea.com/Sanki5211/sankiwork-community.git
cd sankiwork
corepack enable && pnpm install
pnpm tools-dev run web打开它打印出来的本地 URL（它用的是动态端口——不要写死某个端口）。首次启动时，把 SankiWork 指向你想用来驱动工作的那个 agent，或者用你自己的 API 密钥。
第 2 步——做一个能转化的落地页
这是 Sean 的第一个演示，也是后面所有项目的模板：
- 挑一套设计系统。演示里他选了 Anthropic 的。这是你抵御廉价感的护栏——agent 会继承那个品牌的配色、字体和组件语言。
设计系统库：每一项都把一个真实品牌拆解成配色、排版、组件，以及你可以复用的视觉氛围。
- 提示结构，而不只是氛围。Sean 明确告诉它要做哪些板块——一共十一个——并把他 PRD 里的执行摘要（产品愿景、问题陈述、目标用户、提议方案、核心功能）粘进去，这样文案才有真实的上下文可依。
- 回答它的探询问题。和 Claude Design 一样，SankiWork 在动笔前会问澄清性问题。这里它调用自己的 SaaS 落地页 skill 来执行——而因为 skill 不过是文件，你完全可以换成加载你自己的文案准则或板块结构作为 skill。
- 让它跑起来。大约五分钟后，他就拿到了一个专业的初稿——一个真正以转化为导向的结构、一张清爽的对比表、一张排版精美的案例卡片、一段扎实的 FAQ。
想要不一样的感觉？Sean 用完全相同的需求说明，把语气从编辑风换成粗野主义（brutalist），得到了一个明显不同的设计——结构相同，外皮不同，因为重活都是设计系统在干。
第 3 步——逐屏搭建一个移动应用
在移动端演示里，Sean 一次只做一个界面。他沿用同一套 Anthropic 设计系统，然后为每个界面粘进一段从 PRD 搭出来的提示词——一个首页信息流、一个“查漏补缺”推荐界面、一个随手记的饮食日志。agent 会问它的澄清问题，模拟出一个 iOS 布局，并在三个界面上始终遵循所选的设计系统。
这里的启示是：你怎么提示 UX，决定了结果的大部分。当他把同一个应用重新设想成一个以聊天为先的教练式界面时，他得到了一组截然不同——但依然自洽——的界面。设计系统让它保持品牌一致；你的提示词决定范式。
模板库：原型、幻灯片、图片和视频的起点，可以按类型筛选并 fork 后开工。
第 4 步——玩转多模态：从界面到桌面应用
最后一个演示展示了多模态的妙处。Sean 把他的三个移动界面截图，丢进一个新的对话，然后给出一个开放式的请求：“给这套核心功能模拟一个 web 应用版本。”五分钟后，他就有了一个干净的三栏桌面版译写——导航在左、工作画布居中、进度视图在右——连斜杠命令的交互也一并模拟了出来。
哪怕只是一段模糊的提示词加上参考图，也能给你一个可用的起点。有一份正经的规格说明，结果会更锐利，但核心结论不变：你可以在不同载体之间自由流动。
小贴士
- 永远从设计系统出发。它是对抗 AI 廉价感最有力的单一杠杆。
- 明确地提示结构。把板块或界面一一列出来；从 PRD 粘进真实上下文，文案才不空洞。
- 善用 skill——也写你自己的。skill 不过是文件；把你的文案规则或 UX 范式直接加载进工作流。
- 通过对话迭代。不同的 UX 设定会产出非常不同的结果；这是一个特性，所以多试几种。
- 用好参考图。把已有界面截图丢进去，在不同载体之间译写。
- 记住产出是 HTML。它生来就是为了放进一个你已经动工的项目里。
FAQ
我必须用某个特定的模型吗？ 不用。SankiWork 会驱动你配置好的任何 agent——Claude Code、Codex、Cursor、Gemini、OpenCode 等等——或者用你自己的 API 密钥。没有供应商锁定。
这和 Claude Design 有什么不同？ 同样熟悉的感觉，但它免费、本地优先、与模型无关，而且可定制程度高得多——你可以加进自己的 skill 和流程。再加上单一供应商工具给不了你的图片和视频生成能力。
我能把做出来的东西并入一个已有的应用吗？ 可以——产出是 HTML 文件，就是为了放进一个你已经动工的项目而生的。Sean 在一个配套视频里讲了以规格驱动的合并工作流。
它免费吗？ 这个应用完全免费，本地运行。你只需为接入的那个 agent 和那些供应商所用的模型与媒体用量付费。
这份文字指南基于 Sean Kochel 的实操演示。观看上方的完整视频，并订阅 Sean Kochel 以获取更多 AI 构建工作流。