让 AI 生成一个界面，得到的往往是它最好看的样子：内容齐全、没有加载、没有报错、权限已授予、网络正常。像案例展示里的产品，而不是真实使用中的产品。这常被归为模型能力限制，但更准确的原因是：公开的界面图片几乎全是营销图，没人会把空状态或错误页放进作品集。模型不是失败，它只是如实返回了见过一万次的东西。
状态是穿着视觉外衣的产品决策。空状态不是删掉内容的界面，它要回答：用户为什么没有内容——是新用户、筛选无结果、还是加载失败？三种情况对应三种文案和操作。错误状态也不是红框，它决定用户能否恢复、输入是否丢失、该不该展示技术原因。模型能生成任何一种状态，但无法判断你实际处于哪种情境，它只会选最常见的那个并渲染得很漂亮。
一个预订产品有 68 个功能、44 个进 MVP、7 条流程、28 个主界面。28 听起来是小项目，但真实画板数量要高出数倍——每个界面都有加载、空、错误、权限、离线等状态。团队按 28 个界面排期，做完一半才发现每个界面还有三四个没算进去的兄弟。同样的工作量，在项目后半段才被发现，时机最糟。
我的做法是：生成前先定状态，而不是生成后补。事后补状态会让空状态继承完成界面的布局，出现一个空状态里带着控制不了任何东西的筛选栏。组件也一样——输入框有聚焦、填充、禁用、错误、只读，按钮有按下、禁用、加载，复选框有半选状态。库只收录界面上出现过的状态，缺失的就会在压力下被开发者临时发挥，三处实现各不相同。
状态是产品真正接触用户的地方。没人靠营销截图体验产品，真实体验是搜索无结果那天、支付失败那天、在火车上打开应用那天。精修界面用来展示，状态界面才被真正使用。
过度细化也有代价。我为后来被砍掉的界面做过完整状态覆盖，浪费了工作量，还让状态清单显得像官僚流程。离线行为对野外工具至关重要，对内网仪表盘几乎无所谓，区别只能靠想清楚谁在用、在哪用。
作者把完整流程——简报、结构与流程、生成界面、锁定 token 系统、带真实组件和变量的 Figma、可点击原型、开发者交付——记录在单个真实项目上，包括翻车过程：Claude AI UI/UX: Complete Workflow from Brief to Figma。作者还提到，最容易被遗漏的状态是权限。
#GitHub #开源 #AI设计 #Figma #UX #Claude #界面设计
@GitHubTrendingHub