AI SHARING · 2026

AI2UI
官网项目实践

从一次官网升级,聊聊我和 AI 的协作方式

朱一江UI DESIGNER
AI辅助开发
UI专业判断
去年 Q4
02 / 11

第一次接触
Vibe Coding

工作里一些重复、又麻烦的事情,
居然可以自己做个工具来解决。

重复、麻烦的工作,也可以自己做个工具解决
Q4去年
重复
麻烦
工具
VIBECODING
第一个 AI 开发实践
03 / 11

UI 界面翻译工具

第一个 AI 开发实践

团队内部工具 · 真实界面
UI 界面翻译工具真实截图
提取文案→可视化翻译→多语言预览→自动存入翻译库
A 修好→B 又出问题反复调整,也在积累协作经验
今年 6 月
04 / 11

从“做出来”到“做好”

模型变强以后,项目的难点也在变化

THEN完成页面实现功能可以运行
官网升级
NOW建立协作流程让过程稳定、可控
风格符合品牌方向
稳定持续完成任务
可控过程可以检查
难点从实现,转向风格、稳定与可控
官网 AI 辅助开发流程
05 / 11

从需求到上线

先建立完整流程,再让 AI 进入每个环节

01需求梳理清楚
02设计方向与规范
03开发计划独立验收
04开发 · 审查形成闭环
05Git · 上线追踪与回退
官网数据与地图页面
Info Terkini Adapundi 新闻模块
REAL PROJECT真实官网页面
需求 → 设计 → 开发计划 → 开发与审查 → Git 与上线
心得 01
06 / 11
?
01

先让 AI
反过来问你

不要只向它要答案,
要它帮你把问题想透。

01真正的目标
02条件与限制
03执行标准
先不要执行每次只问一个最重要的问题,再根据回答继续追问。
心得 02
07 / 11
02

从指令驱动,转向目标驱动

BEFORE一步一步告诉它
下一步做什么
→
NOW先定义清楚
Goal
GOAL
规划任务→执行→检查→纠错
把需求、目标和验收标准定义成一个 Goal
Skill 编排
08 / 11

把模糊想法,逐步变成可执行任务

每个 Skill 只负责一个环节

01需求 SKILL模糊想法目标 · 范围 · 验收标准
→
→
03计划 SKILL可执行任务每一个都能独立验收
✓✓✓
需求 · 设计 · 开发计划,各自完成一个清晰交付
独立审查与版本支撑
09 / 11

开发的重点,是让每个任务形成闭环

独立审查,审过才算完成

01 · BUILD任务完成 02 · REVIEW独立子 Agent 审查新派的,没有参与开发 EXIT通过才算完 03 · FIX修改后再审 ✓ 审过× 没审过
GIT版本追踪 · 及时回退
DOCS上一环节输出 → 下一环节输入
完成 → 独立审查 → 通过;未通过 → 修改 → 再审
心得 03
10 / 11
03

判断什么值得做,
什么才算做好

实现更容易以后,判断力反而更重要。

实现更容易以后,判断力反而更重要
官网数据地图页面
Info Terkini Adapundi 新闻模块
官网产品优势与资质模块
PROFESSIONAL JUDGMENT最终仍然需要
我们自己做判断
品牌经验审美
SUMMARY
11 / 11

三个 AI 协作心得

从这次官网项目中,带走三件事

01?反向提问

先把问题想透

02◎目标驱动

让流程稳定执行

03◇专业判断

决定什么才算做好

THANK YOU谢谢大家
← / → · SPACE · CLICK · SWIPE · F