近期，我们在QQ浏览器搜索场景中上线了一系列“创意小工具”。它们全部是由团队设计师利用AI Coding实现的，并与产品、开发同学协作上线。本文将为大家介绍，我们是如何来实现从设计+AI Coding到真正产品化上架这一新模式路径的。
一、破局与思考
1. 在AI浪潮下，设计师能力的边界在哪里？
过去，设计师主要负责创意设计、制作高保真原型，再交付给工程师去落地。而如今借助AI Coding能力，整个团队的协作模式迎来了转变的机会：
- 以往，我们的工作流是线性的“接力赛”。设计师在中间环节承接需求，交付设计稿，这个过程中难免有信息损耗和还原折扣。
- 而现在，AI Coding让我们有机会与产品、开发伙伴们实现更紧密的“并肩协作”。与各环节同学双向赋能，让设计师能够更近距离地参与到产品开发现场。
本次分享将完整展示我们如何通过工具和流程创新，实现设计+AI Coding -> 真正产品化上架这一新模式路径。我们将通过具体的项目案例，展示这一能力进阶带来的小小突破和经验。
2. 最近上架的小工具
（大家可以打开QQ浏览器搜索 “地球演化”、“数学之美”、“汉堡的热量”、“月相” 就可以体验到上面的小工具啦）
这是我们上周上线的几个用CodeBuddy实现的几个Case，都是由设计师独立完成并上线，目前我们已经完成了30+款从0到1的小工具：
（打开QQ浏览器搜索 “AI工具箱” 可直达小工具集合页体验所有小工具）
现在，设计师一人就能跑通从创意、功能实现到上线QB搜索结果页的全流程。
而团队达成这一全链路能力，主要分两个阶段：
阶段一：目标是能跑通就行，不追求完美，追求完成度
第一个阶段离不开跟产品同学的紧密合作，在产品设计合作完成第一个“房贷计算器小工具”之后，我们判断AI Coding会成为设计创意落地的一个重要的助力器，所以内部快速的开启了脑爆，并定下了第一期目标：第一批参与的同学按照自己的兴趣方向做，在遵守QB搜索的基础设计规范之上能跑通全流程就行，不追求完美，追求练手以及快速迭代与上线。
在这样的目标下，我们快速地完成了第一批的20+小工具，我们更坚定了向精品化设计进发的决心。
阶段二：精品化方向，结合业务场景+设计审美制作精品小工具
在完成第一阶段之后，我们决定要聚焦于精品化，发挥设计师的创意和体验的专业能力，结合AI 的加持为用户提供精品的搜索小工具体验。也是在这个阶段，我们上线了10+的精品小工具。
自此算是在AI的加持之下，打破了设计师固有的能力边界。
下面跟大家介绍一下具体的实践过程
二、设计+AI的具体实践过程
1. 入门——完全没接触过代码，如何从零开始？
破除代码恐惧：从解决日常“体力活”开始
在实践设计+AI的过程中，最大的障碍是让作为代码小白的设计师破除代码恐惧、快速上手。我们早期试着用AI coding制作figma设计插件，包括自动配色、批量改文案、组件提取等，帮设计师解决日常设计的“体力活” 。
2. 提效——如何让AI Coding更低门槛，越用越顺手？
AI First 原则
对设计师来说，我们希望仅专注于产品体验本身，对于设计还原、功能实现等后续流程，能在对话框让AI完成的尽量让它完成，不要引入别的操作。比如如果AI Coding做还原时，可以使用网页检查，但如果嫌麻烦也没关系，也可以用自然语言向AI说出诉求，直接让AI搞定。
让AI遵循我们的设计规范
同时，我们希望让用AI读懂我们的设计规范，所以我们在CodeBuddy中，将颜色、布局、组件等设计规范通通打包、css样式库，保证CodeBuddy生成的页面真实符合我们的设计规范。
把经验“打包”成为一个人人可用的指令，让AI越用越聪明
我们也把之前踩坑过的经验打包成“/设计稿还原”、“/需求澄清” 等指令，对代码小白的设计师来说，只需要“/ 指令”一下，就可以让CodeBuddy更好的读懂你的figma设计稿，并直接转成前端代码；如果没有figma设计稿也没问题，直接调用“需求澄清”工具，AI帮你润色你的需求原型。
以上提效手段大大简化了设计师在中心范围调动起了很多人的兴趣，我们也在2周内高效完成了23款AI小工具。
3. 进阶探索——融合多维能力，迈向精品化
在上个阶段，我们以兴趣驱动，加上提效后的模板系统，想到什么就做什么，在质量上和用户洞察上，仍有很大的提升空间。
当下我们聚焦在QQ浏览器用户的搜索行为进行了一系列分析，聚焦在高频刚需且当前体验欠佳的场景作为改造阵地，打造高价值、精品化的AI工具。
多AI工具联动
为了实现精品化，我们利用SOTA优势（利用某个领域或特定任务中最先进、表现最好的技术或模型），发挥各个AI工具在数据处理、图形输出、代码实现等领域的专长。最终，灵活尝试融入各种工具实现设计效果，创造出了一批兼具功能和良好体验的作品。
图形生成工具
除了传统AI生图工具之外，图形设计可以还可以灵活运用算法生成式艺术，创意编码等工具来实现创意，一些常用的前端代码库也可以做了解。比如： p5.js ，用 Three.js 做 3D 质感，用 d3.js 做结构化视觉。这些前端资源库不要求精通，只要知道“这个库能做什么样的视觉”就足够。
尝试AI Coding工具直接出稿
随着大模型的推理、审美和生成能力迅速增强，它们已经能理解布局结构、视觉风格、动效节奏等更抽象的设计语言，并将这些语言直接映射成设计效果不错的前端代码。因此，设计师可以尝试跳过出稿阶段，直接生成前端设计，最后根据自己的需求和审美做修改。因此，在GoogleAntigravity推出之后，我们也敏捷尝试了用它来快速生成设计布局和动画交互，效果还是不错的。如下为示例：
模版高效复用
另外在小工具的制作过程中，我们也发现了另外一个提效的方法，当我们做好一个形态之后，相似的内容可以复用同一套模版，这样不仅保证了品质也大大的提升了设计+AICoding效率。
比如下面两个case是复用同一套模版进行的AICoding内容替换：
三、 关于AI Coding的一些经验和思考
好作品是“改”出来的
AI给我们最大的“幻觉”，就是它能“一键生成”。这导致很多人在AI给出第一个不满意的答案后，就立刻放弃了，得出一个“AI不行”的结论。
但事实是：AI的第一个答案，几乎永远只是一个“毛坯”或起点。AI Coding带来的关键改变，不在于“一键出活”，而在于它极大地压缩了“试错”和“迭代”的成本。这种“打磨”的工作流，现在可以在对话框里高速完成。你需要有足够的“韧性”，和AI进行多轮对话，不断“拉扯”和“打磨”：
或者直接让他列出所有参数：
最终那个惊艳的效果，不是AI“给”你的，而是你带着AI一步步“改”出来的。 你的审美标准和打磨的耐心，决定了作品的最终上限。
会说话”的艺术：用SPEC原则让AI精准理解
在VibeCoding中，我们常常有个误区，以为AI是“全知全能的”，能“猜”到我们的心思。但事实是，AI更像一个能力逆天、但毫无主见的“实习生”。你给它的“Vibe”（指令）有多清晰，它产出的“Code”就有多可用。“垃圾进，垃圾出”，这条铁律在AI时代依然适用。
“会说话”就分成了两个层面：
第一层：把需求说清楚
你想要做什么，需要自己先梳理清楚。可以允许不细致，但核心的功能点，不要让AI去猜。一个好的AI Coding需求，可以遵循SPEC原则来撰写：
S (Situation - 背景)：你在做什么？
P (Problem - 问题)：你想解决什么？
E (Expectation - 期望)：你想要什么结果？
C (Constraints - 约束)：有什么限制或要求？
你也可以在需求后面加上「基于SPEC原则进行需求澄清」，让AI判断你的需求是否足够明确。
AI会主动提出一系列问题来搞清楚它究竟要怎么做：
我们用CodeBuddy在项目中内置的一系列指令（如「需求澄清」、「Figma设计稿还原」等），本质上就是在帮你“好好说话”，基于这套原则，让AI的输出更加稳定和高效。
第二层：开启“双向提问”：把AI当专家，也引导AI“反问”
作为设计师，我们最大的知识盲区在于“实现”。我们不知道用什么技术栈、不了解有哪些库、不清楚这个效果的“术语”叫什么。而AI最强的地方，就是你可以把它当成一个“啥都懂的专家”来咨询。比如，你可以直接问：
“我要做一个10000个粒子组成的球形矩阵，并且可以响应鼠标的拖拽和点击，应该用什么技术方式实现这个效果？以及他们的优缺点是什么，列出来给我。”
这样，你就从一个“需求的提出者”真正变成了“方案的决策者”。
让创意先跑起来：设计师的动手新方式
实际工作中，每个岗位所关注的问题和角度都不同。比如前端开发同学会更关注性能、兼容性和代码质量，而设计师则更聚焦于呈现和体验。
通过AI Coding，我们并不是要去“做前端的工作”，而是为团队带来一种“新的可能性”。
它像一个快速的“创意验证器”，让设计师有更多的想法落地的机会。当遇到一些体验上的难题时，我们的思路不再受限于“这个好不好实现”，而是可以先自己动手，去探索那些“也许能更好”的巧妙方案。
我们近期在“幻彩流式输出”上的探索，就充分体现了这一点。
大模型的流式输出（打字机）最初是为了降低等待焦虑。后来行业内普遍优化为给每个Token增加“渐现”进场，使其过渡更自然。
我们在这个基础上构思了一个幻彩渐变方案：让每个Token在渐现时，都经历一个“玫红-深蓝-深灰”的多段色彩渐变。
这么做并不仅仅是为了“眼前一亮”。也是为产品注入一系列“AI视觉符号”的一系列动作之一，目的是让产品在观感上就更有“AI感”。
在过去，这会是一个需要和前端同学频繁沟通、反复打磨的细节。而这次，我们直接通过AI Coding动手打磨，几小时内就实现了这个效果，快速验证了这个视觉设想。
技术平权后，比拼的是创意和细节
我们可以看到一个非常清晰的趋势：在“VibeCoding”中，“Vibe”（我们的创意、意图）的比重正在快速增加，而“Coding”（具体实现）的比重在不断降低，甚至被隐藏。比如Google新平台Antigravity的Agent模式默认隐藏代码，用户只需关注 AI Agent 的工作“成果”而非过程；Cursor 2.0的 Agent 模式允许 AI 自主规划、跨文件修改和调试。
这一连串的变化，说明了 “技术平权” 真的在加速发生。创造的门槛正在被AI以前所未有的速度铲平，“无代码的VibeCoding”正在让每个人都有机会成为创造者。
未来，AI拉平了“实现功能”的下限，而我们的价值，则在于“审美”、“创意”和“同理心”的上限。 这才是AI无法替代，也最值得我们投入的地方——至少目前是这样。
四、保持好奇 保持学习 动手实践
在AI的迅速迭代升级之下，这篇文章连同我们今天分享的所有关于“设计+AI Coding”的方法，都注定会“过时”。
我们一直密切关注行业技术的更迭会带来哪些新的可能性，从AI兴起大家就一直在学习与实际应用于项目中，过程中深切的感受到AI迭代的速度“瞬息万变”。新的工具层出不穷，新的能力一个比一个强。当下总结的经验，可能在几个月甚至几周后，就会成为“过去式”。这是必须面对的现实。
然而，不必一味等待某个完美的工具出现，也不必固守某个具体的产品或技术，而是去亲历这整个充满活力的“技术更迭”过程。通过对“设计+AI”的持续学习与实践，逐步积累进步。工具始终在变，但核心始终如一：解决问题，实现创意。
对于设计师而言，AI Coding并非要去写代码，而是一种创意实践的新模式。它如同一个杠杆，帮助我们更接近“快速实现创意”的目标。AI在迭代，我们也随之进步。
此外，设计师的模式探索也离不开产品和开发的互相帮助、通力合作、大家相互启发、主动分享，AI能力的提升也引发了团队里产品、设计、技术三个角色的一次深刻“集体进化”。 以上仅为我们设计团队的一些经验。每个人在AI学习与实践道路上都会形成自己的方法。保持好奇，持续学习，动手实践，自会看见成长。
正如一句古话：坐而论道不如起而行之。
