AI-NativeProduct Builder

四段实践:从真实产品问题出发,用设计和代码验证,再把反复出现的判断沉淀成团队和下一次项目都能继续使用的系统。

  • Product Designer · Design Engineer
  • AI Agent / SaaS
  • Shenzhen · Remote

ROADMAP

四条实践线。把产品、系统和交付连起来。

  1. 01

    AI PRODUCT

    从场景验证,到用户能直接复用的 AI Agent 模板。
  2. 02

    DESIGN SYSTEM

    让设计系统和产品实现一起更新。
  3. 03

    VIBE CODING

    把体验判断带进代码,而不是停在交接。
  4. 04

    METHOD SYSTEM / AGENT SKILLS

    把反复出现的工作,写成有输入、输出和责任边界的 Skill。

WORKING CHAIN

从问题到上线,是一条连续的工作链。

  1. 01

    发现

    从用户路径、设计走查和真实协作中找到具体阻塞。
  2. 02

    验证

    用场景、交互 Demo 或可运行原型把判断变得可讨论。
  3. 03

    交付

    把体验和样式推进到代码、PR、验收与正式环境。
  4. 04

    沉淀

    整理为变量、组件、模板或 Skills,让下一次不必重新开始。

FOUR PRACTICES

每一段都从一件具体的事开始。

01

AI PRODUCT

从场景验证,到用户能直接复用的 AI Agent 模板。

问题当 AI Agent 与自动化还停留在抽象能力时,用户很难判断它能不能解决自己的业务问题。

推进先用交互 Demo 验证“表格驱动自动化任务与项目管理”的场景和路径,再把可理解的 AI Agent 模板推进到 Template Center。

留下场景验证不止停在提案里,而是变成用户可以直接开始使用的模板入口。

  • Interaction demos
  • AI Agent templates
  • Template Center
查看 bika.ai 案例
02

DESIGN SYSTEM

让设计系统和产品实现一起更新。

问题变量、图标和主题一旦只停留在设计文件里,产品迭代越快,设计和实现就越容易慢慢走散。

推进从 0 建立设计系统,并和研发共建设计变量与图标 SVG 的 API、数据库同步机制,让 Token 和资源能在产品迭代中持续更新。

留下这套系统既服务百人团队的日常协作,也发布到 Figma Community,成为可以被团队外复用的资源。

  • 200+ semantic color tokens
  • 300+ product-native icons
  • API + database sync
  • Figma Community
查看维格表案例
03

VIBE CODING

把体验判断带进代码,而不是停在交接。

问题真实产品的体验和样式问题常常出现在实现之后,只靠设计稿很难完整验证,也难以快速修正。

推进在 AI Agent、海外发布和 Web 产品迭代中,用 Vibe Coding 直接处理界面、状态、响应式与多语言问题,提交 PR,并参与合入与上线。

留下重复出现的交付问题会继续整理成可复用的 Skills、检查清单和内容生产流程。

  • UI + styling fixes
  • PR → merge → release
  • Reusable Skills
  • QA checks
查看 Buda 案例
04

METHOD SYSTEM / AGENT SKILLS

把反复出现的工作,写成有输入、输出和责任边界的 Skill。

问题一次性 Prompt 会丢失项目约束、资产位置、完成状态和人工确认点;同类任务每次都要重新解释。

推进从 Buda 的真实视频生产与产品表达任务中提取稳定部分,为每个 Skill 写清触发条件、输入、输出、执行步骤和不可跳过的人工边界。

留下形成一个 Video Studio 与四个产品表达 Skill;它们不是万能提示词,而是可以被调用、检查和持续维护的工作接口。

  • 1 Video Studio
  • 4 Product-expression Skills
  • Approval gates
  • Maintained Markdown interfaces
/buda-video-studio
触发
需要从选题推进到多渠道视频交付
输入
选题、脚本、品牌资产、语言与渠道
输出
生产状态、AI 视频、封面和渠道交付包
边界
脚本、真人录屏和发布前必须人工确认
/buda-feature-video-remotion
触发
需要用真实产品状态讲清一个功能过程
输入
用户任务、产品录屏、文案与 CTA
输出
可编辑功能 Demo 与渠道版本
边界
产品真实性和叙事节奏由人验收
/buda-landing-feature-vignette
触发
官网功能文案需要一个可理解的产品时刻
输入
核心动作、真实 UI 状态与页面语境
输出
功能 Vignette 与页面动效构图
边界
不能为了画面效果改写产品行为
/buda-mini-ui
触发
完整工作台截图过密,无法作为清晰证据
输入
必要对象、关键状态与真实组件规则
输出
可复用 Mini UI、状态规范和展示组件
边界
压缩信息,但不虚构不存在的能力
/project-illustration
触发
项目卡需要表达产品关系而非装饰图形
输入
项目语义、产品对象与插画 Token
输出
项目插画概念与可复用动态组件
边界
先验证对象是否可识别,再进入视觉制作
查看完整 Skill 系统

WHAT I KEEP LEARNING

工具会变,判断和复用会留下来。

我持续学习 AI Agent、代码工具和新的产品交付方式,但不会把它们当成目的。更重要的是:它们有没有让一个问题被理解得更清楚、被实现得更可靠,或让下一个人更容易继续。

查看完整项目