Coze
Code

扣子编程是扣子从「编排平台」走向「AI Native Web IDE」的一次关键产品转型。它不再只是面向少数专业开发者的工作流编排工具，而是试图覆盖从零基础用户、AI 爱好者，到专业开发者的更完整人群层级。

这个判断直接决定了产品形态不该停留在传统低代码平台，而应该走向 AI 与 IDE 深度融合的方向。原有扣子开发平台的核心问题是「下限高、上限低」——小白进不来，专家留不住。

三种形态的比较判断

1. 01
   传统 Web 编排工具

   对爱好者和普通用户不够友好，上手成本高；对专业用户的深度能力也有限。代表：Coze Studio、Dify。
2. 02
   AI Native Web IDE ✓

   通过自然语言和 Agent 交互降低门槛，同时保留完整代码控制与 IDE 能力。代表：Replit、Lovable、v0。
3. 03
   本地 IDE

   上限极高，但对普通用户不友好，天然是单机环境，协作和托管能力弱。代表：Cursor、Trae。

最终我们明确，扣子编程要做的不是另一个「流程搭建器」，而是一个真正面向 AI 时代的 Web IDE——既让更多人能「从想法到实现」，也让专业用户在 Web 上完成更完整的开发闭环。

这个命题的难点不在于做一个「更像 Cursor」的界面，而在于怎么在一个产品里同时处理好三组矛盾：

• 低门槛 vs 高上限：爱好者边用边学，专业用户拥有完整代码控制
• 自然语言驱动 vs 专业代码控制：对话区承载需求表达，编辑器承接结果产出
• AI 自动完成 vs 用户明确掌控：AI 主导执行，人在关键节点确认

这也是为什么这个项目里，设计不只是输出界面，而是要参与产品形态判断、节奏拆解和协作机制设计。

这是一个节奏非常紧、依赖高密度协作的 0-1 项目。我的角色不是单点设计执行，而是作为设计管理 Owner，确保项目能在短时间内完成方向判断、框架收敛、团队分工和高质量落地。

我在这个项目中负责的三件事

1. 1
   明确产品体验的大方向

   在项目最开始先和团队统一：扣子编程不是继续做编排工具的补丁，而是一次产品形态升级，要从「工具操作」转向「从想法到实现」的 AI Native Web IDE 体验。
2. 2
   先锁核心框架，再拆模块推进

   周末先快速把首页和 IDE 框架定下来，先锁大框架，再进入团队并行设计阶段。核心不是求快，而是避免多人并行时方向发散。
3. 3
   按模块分工，建立高频评审机制

   团队按首页、对话区、Editor、部署、集成等模块并行推进，建立每日评审机制，在统一框架下各自推进，持续校准，减少后期返工。

这个项目有一个很重要的特点：我们不只是设计一个 AI 产品，也在用 AI 重构自己的设计流程。策略总结为三件事：AI 做竞品分析、AI 生成设计原型、AI 搞定设计系统。

1. 用 AI 做竞品分析，加速建立判断

在产品初期，借助 AI 辅助分析了三类产品，核心价值不只是信息收集，而是更快形成产品定位判断。

2. 用 AI 快速制作 Demo，提前验证体验方向

项目里用 AI 生成过多个 Demo，用来快速判断界面结构和交互节奏。让我们在正式进入精细化设计之前，先看见产品雏形，减少纯静态稿阶段的判断误差。

3. 用 AI 加速设计系统搭建

借助 AI 去理解和应用 Shadcn 体系，结合主题变量和原子组件，快速完成了一套适配产品的组件库和主题能力。从通过 AI 理解 Shadcn，到按规则配置变量，再到创建原子组件，完成主题制作。

首页：创作起点，而非导航页

扣子编程首页的设计核心不是展示信息，而是帮助用户快速开始。拆成三个关键区域：

• Global Navigation：全局功能入口，承接项目、集成、资源库、任务中心、API & SDK、套餐与用量等能力
• Creation Workspace：中间最核心的任务输入区，负责接收用户想法与模式选择
• Templates & Examples：案例模板区，用真实案例帮助用户理解「能做什么」

首页的本质不是门户，而是一个把用户从想法带到行动的起点。

IDE：以 Agent 对话为中轴

IDE 的核心结构由两部分组成：

• Agent Conversation（左侧）：承载指令输入、工具调用过程和执行步骤——对话区不只是聊天框，而是任务驱动中枢
• Result Panel（右侧）：承接结果反馈，包括预览和终端

扣子编程从一开始就需要考虑商业化闭环。商业化界面包含完整的付费体系和用量管理链路。

三个设计挑战

1. 1
   让免费用户理解规则，不被复杂度劝退

   每日登录积分激励，清晰的规则说明，降低免费用户的认知负担。
2. 2
   让付费用户清楚看到权益差异，产生升级动机

   个人免费版、进阶版、高阶版、旗舰版、企业标准版，权益对比清晰可感知。
3. 3
   让计费体系与产品能力形成一致感

   订阅管理、详细用量、购买记录、开票等链路，让商业化成为产品体验的一部分，而不是打断体验的部分。

扣子编程上线后取得了比较直接的业务结果，不只是「发布了一个新界面」，而是真正完成了一次从旧平台到新产品形态的迁移。

尤其是部署转化率和留存数据，说明用户不仅会来试，而且愿意继续使用、并把结果真正部署出去。整个项目零设计事故、无设计类负反馈。

如果从作品集表达的角度总结，我在这个项目里的价值，不是某一个页面画得有多好，而是作为设计管理 Owner，在高复杂度、短周期、多模块并行的 AI 产品里，完成了几件关键事情：

• 做对了产品形态判断：从编排平台切到 AI Native Web IDE
• 搭好了推进框架：先锁框架，再拆模块并行
• 建立了高频协作机制：让多人并行但方向不散
• 把 AI 真正引入设计流程：竞品分析、Demo 生成、设计系统搭建都被 AI 重构
• 确保设计结果最终转化为业务结果：高质量上线并拿到明确反馈