一个人做完整产品界面,这10个Skill顶一支小团队

一个人从想法做到能交付的界面,问题通常不是不会画,而是顺序乱、验证少、返工多。

一个人做界面,最容易卡住的地方不是画不出来,而是没人帮你把关:方向对不对、流程顺不顺、代码里有没有藏错,全靠自己盯。

比如你要做一个订阅管理页。先用 wireframe-prototyping 把信息架构和关键流程画成低保真线框,别急着上高保真;再让 usability-test-plan 把测试目标、任务和指标定下来,这样原型才有人替你验证。

原型跑过一轮后,design-critique 用固定反馈句式把讨论从个人偏好拉回观察和建议,产出的修改项才可执行。接着 shadcn 把方案落成可复用组件,figma-use 在 Figma 文件里按小步骤调整节点,保持设计稿和代码结构一致。

方向仍有分歧时,prototype 一次只做一个组件,把几个真正不同的版本放进选择器里并排看,而不是在单一方案上反复争论。页面成型后,webapp-testing 用 Playwright 跑通交互,browser-testing-with-devtools 在真实 Chrome 里查控制台和性能,screen-reader-testing 用 VoiceOver、NVDA 验证可访问性,最后 pr-writer 把改动写成给审阅者的说明信。

这套顺序的价值在于:每一步都为下一步减少不确定性,而不是把十个工具堆在一起。

wireframe-prototyping

先把产品想法画成线框图和可点击原型,验证信息架构和关键流程

design-critique

组织结构化设计评审,收集反馈并产出可执行的修改项

shadcn

把评审后的视觉方案落成可复用的界面组件,搭建页面骨架

figma-use

在 Figma 文件中直接创建和调整节点,把设计稿同步成开发可用的结构

prototype

构建多个不同的 UI 版本,用并排对比代替在单一方案上反复争论

webapp-testing

用 Playwright 跑通页面交互,验证前端功能并截图定位 UI 问题

screen-reader-testing

用 VoiceOver、NVDA 验证无障碍支持,确保界面可被屏幕阅读器使用

pr-writer

整理改动说明和 PR 描述,把界面交付内容清晰交给协作者