Crate
AI Creative Tools ｜ Vibe coding
业务：TikTok 内部的 AI 画布类创意工具
一句话目标：处于产品拓新阶段，需要进一步的拓宽用户群。
项目核心：用户群的分层与拓宽，使产品不止是服务于专业创意人员，也能满足日常的的产出需要。
角色：项目owner，负责「简化工作流模块」从功能定义、设计方案、前后端开发、测试上线全链路
Tools
Agent: VS code + codex
Design: Figma
功能全流程效果展示
01 Results First
01 业务成果
（1）早于预期1周完成，并成功上线；上线一个月后，模版功能使用转化率在46.67%，制作转化率在66.7%。
（2）为多个业务方定制创作模版，促进业务合作。
（2）为多个业务方定制创作模版，促进业务合作。
02 自主沉淀与复用
独立完成前后端coding，是一种对于AI时代设计师新角色的探索，自主沉淀AI与设计师协作技巧文档，构建团队AI独立知识库，赋能团队的 AI adoption
02 Challenges & Solution
Finding Certainty Amid Uncertainty
R&D with 0.1 FTE:
Designer + AI = ?
Challenges 01
需求探索・方案定义・在模糊中寻找确定性
1.现状 Situation
2.HOW？
——知己知彼，百战百胜
2.1 知己
沉浸式熟悉现有的产品能力，挖掘真实用户痛点，定义用户理想工作流形态，锚定后续产品迭代方向与核心考量要素
调研三步走：第一步，先把自己变成用户～
从我的角度看，现在的工作流有什么可以改建的点？
自己使用过程中的体验记录与痛点总结，只有足够了解这个产品才能改进。
一个功能做出来至少要保证自己觉得好用，自己不用如何指望着其他人用？
从以下几个角度思考：
- 这个工作流解决什么问题？
- 输入是什么？
- 最终输出什么？
- 哪些地方用户现在会困惑？
- 可以如何入手简化？
整个产品体验下来，其实可以分成2个核心群体去看待简化工作流这件事，第一个是消费者，使用工作流的用户（主场景），第二个是生产者，自主搭建工作流，分享给他人复用的用户（次场景）
（2）问卷调研
- 在没有回报和激励的情况下，对于参与问卷调研的意愿是不高的，能收获的声量是有限的。
- 问卷调研的设计也是一门学问，简洁直接是第一位，好不容易有人点进来了，一定要让别人感到轻松简单，很容易就可以完成
- 问卷适合收集表层体感、宏观期待，但很难挖到深层、具体、可落地的真实卡点。有一些较为具体的文字说不清的问题，比如：对于工作流理想的形态，有哪些可以改进的点，适合1v1当面交流
（3）核心用户访谈
问卷只能获得表层信息，因此通过真实的1v1访谈，进一步挖掘隐形场景问题
（4） 调研结论
拆分成 2个 核心用户群分别梳理痛点
画布工作流的理解成本高，输入输出区分不清
消费者以运营和一些对于画布生态接受度较低的群体为主，基本上日常的需求就是批量出图。压根不是会不会搭建工作流的问题，而是看到工作流看到这么复杂就懒得去用的问题。画布工作流的复杂性把很多用户卡在了第一层。
- 用户原声1：“我每次使用别人搭建的工作流都需要花很多时间去找它的输入输出。”
- 用户原声2：“我一看到复杂的画布就不会想去使用这条工作流了。”
设计决策1
把复杂藏在后台
——简化工作流的呈现形式
只展示用户必要看到的信息，剩下的能简化就简化，往最符合用户直觉的交互方式去走
把复杂藏在后台
——简化工作流的呈现形式
只展示用户必要看到的信息，剩下的能简化就简化，往最符合用户直觉的交互方式去走
生产者
需要沉淀工作流，但是整理过程太繁琐
需要沉淀工作流，但是整理过程太繁琐
生产者以创意设计师为主，需要专业的控制，大部分对于画布使用比较顺手。痛点反而落在搭建完成一条工作流后的整理上，需要去整理工作流连线关系、节点排布、给节点写批注，给业务同学复用。即使已经尽可能的批注详细，因画布本身的复杂性，仍旧有不可消除的理解成本存在
- 用户原声1：“我好不容易跑通工作流，但是为了团队成员的复用，还需要花很多时间整理节点、写批注，这些批注还不一定有效，后续仍旧需要花很多时间来解答关于这个工作流的使用问题。”
设计决策2
将繁复流程步骤化
——简化工作流的打包链路
将打包流程按照用户搭建工作流的心智去梳理成简洁步骤
总说：这两个决策的核心都是为了服务于交互流程的简化，提升交互体验，服务于用户圈层的拓新
2.2 知彼
完成用户调研之后，做了针对性竞品调研，用来对标行业最优解，辅助我们确定工作流简化的最终方向：
- 其他同类产品是如何做工作流简化的？
- 有什么我们可以学习的地方？
- 结合我们的产品特性，有什么我们可以进一步优化的？
总结：整体上Flora和Elevenlab两个竞品对于工作流的简化思路比较有参考性
消费者不用进入画布，不用理解他人的工作流，直接上手产出，降低使用门槛，提高产出效率;
生产者只聚焦关键节点，即可快速打包工作流并复用发布，提升生产者的打包效率
2.方案迭代与体验权衡 Solution Iteration & Experience Trade‑offs
设计思考：
1. 最大化简化打包流程操作链路：用户搭建完工作流，往往都会有很多输入项，但是都非常清楚自己最终输出是什么。 如果让用户优先选择输出结果，系统自动倒推需要哪些输入项，就可以最大程度精简生产者的打包操作。
2. 节点封装形态：既可以与核心画布使用场景的结合，也是易懂易上手的面板形式
优化与迭代
核心考量1：使用场景
现阶段优先级是降低使用门槛、扩大用户群，而非深度整合原有画布生态。因此，还需进一步探索画布外的极简展现形式；
核心考量2：行业通识与用户使用习惯
大众用户已经形成「先输入再输出」的固有认知，输出前置会和用户心智产生冲突，带来额外理解成本；
核心考量3：实现成本
涉及到「输出项倒推输入项」等需要较大研发成本的能力，结合目前团队需要快速上线功能的限制，可行性较低；
最终方案：输入前置+面板封装
需要展示一个直观的改动对比，从节点封装到极简面板
信息架构与页面流转逻辑图
3.管理员后台设计 Admin Backend Design
主要分为2个页面：审核页面和管理页面
（1）审核页面（review queue）：审核所有要发布到社区的工作流，支持管理员打开极简面板测试生产流效果，添加分类、描述，修改封面和名称，决定批准或驳回，批准的工作流会展示在模版社区；
（2）管理页面 （published）：管理所有已展示在社区的生产流，包括修改、删除
TAKEAWAYS
痛点｜Pain Point
在竞品调研中，针对性的界面搜集与整理往往是耗时、低效，但必要的环节。设计师需要明确的知悉竞品的设计方式、明确行业通识才能为之后的设计决策打下基础。 而从官网逐页截图，到测评视频逐帧提取，甚至是购买产品进行完整流程测试，这些重复性的基础工作严重挤压了核心的分析与思考时间。
解决方法｜Solution
竞品调研Skill
Competitive Research Skill
目的｜Goal
旨在通过自动化工具接管调研前期低效的资料收集环节。
Challenges 02
研发0.1人力・当设计师开始coding会发生什么
R&D with 0.1 FTE｜What Happens When Designers Start Coding
KEY:学问最大化ai潜力的问题，项目管理侧ai可以是工期监督员，项目架构侧ai可以是架构分析师，项目执行侧ai可以是最得力的员工
而你是负责把握整体产品效果的掌舵人，产品效果必须牢牢的掌握在你手中
“让AI精准的达到目标的基本是：首先需要明确自己想要什么”
而你是负责把握整体产品效果的掌舵人，产品效果必须牢牢的掌握在你手中
“让AI精准的达到目标的基本是：首先需要明确自己想要什么”
核心三步骤：PRD明确产品思路define the final outcome——根据PRD输出技术架构Generate the technical architecture based on the PRD.——开发Development&testing——上线Launch
0.
前后端架构总揽
1. 前端 vs code + codex + figma mcp
根据OpenAI官方发的 《Openai Codex最佳实践指南》 构建整个项目结构，确保协作科学高效，确保“先规划，再执行”，可回滚。
任务合理拆分，分阶段执行，AI/人工审查“AI in the loop”，AI监督AI
任务合理拆分，分阶段执行，AI/人工审查“AI in the loop”，AI监督AI
TIPS1: HOW TO COLLABORATE WITH AI MORE EFFICIENTLY?
有点像写“自己的使用说明”，让你的AI了解你：告诉ai你的工作习惯，明确你和ai的分工，比如：你是产品经理，ai是工程师
产品方向
UX 逻辑
审美
最终验收
工程与执行：AI负责
工程结构
页面路由
组件拆分
状态流
mock 数据
前端实现
后端/API接入
部署
bug修复
页面路由
组件拆分
状态流
mock 数据
前端实现
后端/API接入
部署
bug修复
（1）让你的AI了解你，写“自己的使用说明”
（1）让你的AI了解你，写“自己的使用说明
（2）建立全局协作文档与progress文档
PRD.md
叙述清楚整个产品定义、交互逻辑、交付目标，为最终产出效果负责
AGENT.md
针对特定项目的「开发员工手册」，说明代码规范、测试方式、目录说明
PROGRESS.md
在整个推进过程中，记录整个项目进程，方便回滚，方便自己/ai了解项目进度，也是保留项目基本信息的防线
（1）让你的AI了解你，写“自己的使用说明
（1）C
（1）让你的AI了解你，写“自己的使用说
（1）让你的AI了解你，写“自己（3）CODING SKILLS
帮助你有效的提高产出质量
TIPS：skills不是越多越好，你要知道每个skill的使用场景然后精准调用，如果下载一堆skills，然后将调用权交给模型反而会增加模型的认知负荷，拖慢速度，影响稳定性与质量。
或者，直接下载find skills让模型根据任务需要自己调用下载并调用对应的skills
（4）PROMPTE FACTORY
1个月后迭代：之前是手动整理prompt，需要很多人工时间，现在在进一步尝试扩大搜索范围+自动化抓取并整理，所有互联网各大社交平台上大家分享的优质prompt都可以被抓取并复用
TIPS2: HOW TO ENHANCE THE AESTHETIC QUALITY OF AI ?
前置：你自己的审美决定了ai产出的上限，但是以下这些工具决定了ai产出的下限
（1）动效库与组件库 Animation library and component library
（1）让你的AI了解你，写“自己的使用说
（1）让你的AI了解你，写“自己的使用说明”
（1）让你的AI了解你，写“自己的使用说明（2）uiux文档+Design.md
小tips：设计风格沉淀成为design.md方便后期agent沿用哦！要习惯沉淀成markdown格式，毕竟你的协作者大多数时候是agent，所以需要让ai看懂、可复用
推荐：GitHub 有 awesome-design-md，下载后复制到项目的根目录即可；
google stitch/figma也可以一键导出design.md
2. 后端
数据隔离要求：
分为公共模版和私人模版，公共模版所有人可见可用，私人模版只有创建者本人可见可用，所有生成记录根据用户id相互隔离并永久存储
2. 后端运行逻辑
难点攻克：需要在画布外仍旧保证和画布调用逻辑一致性，以达到生成效果一致性解法：
难点攻克：需要在画布外仍旧保证和画布调用逻辑一致性，以达到生成效果一致性
解法：
在 frontend shared 层建立统一的执行模型描述和解析器，由 Canvas executor 与模板编译器共同使用
OUTREACH
How to let others willing to give it a try?
核心功能点展示
（1）零门槛，任何人都可以快速高质产出！
节点式工作流连线太复杂？节点太多？看着就头晕？
之前和一些运营老师交流过，发现节点式工作流对于部分小伙伴还是有一定理解门槛的。但是这种极简的面板就不会啦！
要做的只有3步：选择你需要的模版，填写内容，点击generate按钮，即可高质量产出
（2）多任务并行，无限次抽卡，批量产出！
得到满意的一张图片往往需要经过多次抽卡，模版功能支持多任务并行，提高产出效率！
直接点击generate即可发起新的任务，无限次抽卡，一次不满意，2次....多次总有让你满意的一张！
（3）团队间高效复用！
日常工作中团队内经常需要沉淀一些工作流，方便复用。但是在好不容易跑通一条工作流之后还需要写批注、整理节点....总在想有没有更高效的方法解决这些较为重复性的工作。通过模版功能可以直接将需要复用的工作流一键打包成模版，分享给团队的小伙伴使用！
OUTREACH
How to let others willing to give it a try?
用户视角：需要去想，作为创作者，你用下来感觉最突出的能力是什么？怎么宣传你会感兴趣？
对于我来说最重要就是2点：
- 实用性与简洁性：要真实的从创作场景出发，直接给用户喂饭
- Practical & simple: Start from real use cases and feed users the goods directly.
- 趣味性：要结合热点，视听效果独特有趣的内容才可以让人们停留
- Fun factor: Ride the trends. Content with unique, interesting audio-visual effects is what makes people stop and stay.
4.2 功能使用说明
撰写了新功能的介绍和使用说明，未来让用户快速上手
TAKEAWAYS
How designer can collaborate with AI efficiently?
设计师未来的价值应该落在做出有长期价值设计决策的能力，以及审美与品味上。
随着ai工具的出现，实现想法已经不是卡点了，一些纯执行的事情可以转交给ai，一些纯执行的设计师也会慢慢被替代。未来我们需要的是具备判断力与品味的人来配合ai。设计师或者说未来大多职业的工作，是基于自己对于审美和设计经验的积累做出一个又一个判断。
那如何提高自己的判断力与品味？
持续去接触新的设计趋势，新的事物，新的技术，持续去在一次次真实的实践中积累经验，这是未来最有长期价值的资产。
那从这次一个人coding前后端的实践中我也感受到，技术平权其实是伪命题。
事实是技术会对于有明确擅长的人有更大的增益。如果你希望能发挥更多价值，很重要的是你需要有自己持续深耕的领域，也要持续学习新的东西，去拓宽自己的边界。
长远来看，之后岗位之间不会严格的界限，我们都是AI builder，或者说是AI co-builder，我们需要做的，也许是将自己的擅长结合ai作出一点新的事情。比如：AI+设计...
2.对于ai产品的新思考
经历了整个流程的迭代，其实我对 AI 产品未来形态有了新的思考，整体分为两个认知阶段。
第一阶段是早期个人实践：我会基于生活痛点，用 AI 快速搭建各种小应用。那时候我一度有一个极端的看法，我认为未来付费的产品会越来越少，很好会有人再去App Store中去特意下载应用。未来应该是“即时应用”的时代，人人即时 Coding、按需造工具，用户可以甚至不再需要固定或付费的 App，所有需求都是即时生成、即时使用。
但随着深入使用 TypeNow、lovart 等成熟 AI 产品，我就发现：纯零散的个人工具没有长期价值，真正的 AI 产品，是把大模型作为底层通用基座，是把模型能力作为自己产品的增益。AI 产品的未来是产品如何把通用模型能力，约束、编排、落地到垂直业务场景，让模型能力随着产品体系不断迭代、持续放大价值。
3.协作方法与项目统筹方法：目标对齐、差异包容、信任共建
这次经历让我完整经历了从多方对齐、风险协调到最终保障上线的全流程，彻底改变了我对产研协作的理解。我意识到：产品、设计、研发虽然服务同一业务大目标，但阶段性优先级、核心诉求天然不同。双方是并行、交叉、互补的关系。所以跨角色协作不是单纯等待对方配合，而是双向的目标管理与利益对齐。需要主动识别双方目标的共同点与差异点，提前对齐节奏、预判风险、寻找共赢方案，保证项目稳定推进。
同时我也意识到，高效协作建立在良性信任关系之上。除了工作事务对接，提前同步、主动兼容、互相兜底，能极大降低后续沟通阻力，形成长期正向的协作闭环。
最后以我的偶像Steven Paul Jobs的一句话结尾