销售AI兼容的SaaS起步模板/设计系统
通过创建一套能让AI编程工具(如Cursor)严格遵循的设计系统和SaaS起步模板,解决AI生成UI不一致的“UI漂移”问题,并将其作为数字产品销售。
使用工具
他的SaaS模板年入数十万,来源是一个看起来极小的痛点

我一直用AI工具辅助设计产品界面。Claude和Cursor生成出来的每个界面,单看都还挺像那么回事。但仔细一看,总有说不出的别扭:按钮圆角差几个像素,主色调偏离一点点,间距跟我的卡片离得很近又不在同一标尺上。单独一个页面没问题,把五个页面放在一起,整个App就像五个从未见面、来自不同外包公司的前端拼出来的作品。
我给这种现象起了个名字:UI漂移。一旦你注意到它,你在每一款AI生成的产品里都能看到它。
为什么AI生成的界面总差那么一点
这不是模型的错,而是上下文的问题。
你的设计规范不在提示词里。AI只能按照训练数据的平均值去生成——于是全是通用的Tailwind样式、紫色渐变、未经过改动的shadcn组件库。这也是为什么市面上大量vibe coding做出来的App长得几乎一模一样。
摆在独立开发者面前的选择,要么是千篇一律的通用输出,要么是落后过时的老样式,要么是花大价钱请人工设计师打磨。
我想尝试第四条路。
我做的产品
我开发的GliaKit是一个基于Next.js的SaaS Boilerplate,附带一套AI工具真正会遵循的Design System。核心思路是构建一个“单一事实源”,并同时呈现三种同步视图:
- 一份Figma组件库(包含设计令牌、组件和界面示例,这部分在Figma Community免费发布)
- 一份给AI阅读的规则文件(token变量名文件、组件命名规范、组合规则)
- 一套可直接运行的代码(符合设计规范的Next.js前端)
当设计发生变动,规则文件同步更新。AI不再凭自己的印象编造设计系统,而是引用你们团队真正在用的那一套。
Token效率设计
这个约束决定了产品的形态:规则文件刻意保持极简。它们不把每个组件的所有属性都喂给模型,而是只编码关键决策——设计令牌的数值档次、组件名称、组合规则。每次请求,模型需要重新读取的上下文少了,生成的成本更低,响应更快,也更稳定。因为模型没有被海量无关的细节淹没。
你用Figma MCP插件时逻辑也一样:结构化文件只提取紧凑且相关的上下文,而不是把整个文档灌给模型。
真正的“第一天”体验
买下这套模板后,你不再需要反复写“帮我让按钮跟其他页面的按钮保持一致”这种追着AI擦屁股的提示词。要知道,这句话正是无数独立开发者的夜晚被吞噬的地方。
商业层面的诚实评估
免费版设计系统发布在Figma社区,完整版在https://www.gliakit.com/销售。
对于国内开发者,这套模式很有参考价值。做Digital Products(数字产品)的市场逻辑,其实和闲鱼卖虚拟资料、猪八戒网上接定制开发单类似,关键在于找到细分痛点,把解决方案产品化,实现一次创作、反复销售的被动收入。
给国内独立开发者的一些建议
我自己实践下来觉得值得分享的做法:
- 从自身痛点出发找选题,而不是追热点。UI漂移这个概念并不热门,但做AI辅助设计的开发者都能体会
- 免费加付费组合,用免费组件库吸引流量,用完整解决方案赚钱
- 分销渠道多样化,在闲鱼、淘宝服务、猪八戒网都可以挂服务,把设计系统、AI Coding工作流、SaaS模板打包成数字产品,也可以发布自己的网站和社交账号
- 经营社区,在小红书、即刻分享AI设计经验,会有大量同样受UI漂移困扰的开发者找到你
国外独立开发者靠细分领域的SaaS boilerplate月收入3000至8000美元(约2万到6万人民币)是正常区间。国内定价体系不同,但数字产品的边界成本极低,按量大从优策略走,同样有机会做出可观的收入。
我很好奇其他开发者怎么应对UI漂移——有人手动维护规则文件,有人用MCP,有人干脆接受混乱?欢迎在评论里聊聊,尤其是如果你觉得同步不是最优解,我很想听你的想法。