前端界面工程

解决什么问题

AI 直接生成的界面有两个通病:一是视觉上有明显的"AI 味"——统一的渐变背景、过大的圆角、没有字号层级的正文;二是结构上把数据请求、状态管理和 DOM 渲染写进同一个函数,组件既不能复用也没法测试。这个技能面向的是已经在写代码、但希望界面达到上线标准的场景:新建组件或页面、改造已有的用户界面、实现响应式布局、补充交互与状态管理,以及修复肉眼可见的视觉与 UX 缺陷。

技能如何工作

核心思路是把"看起来像设计系统产物"这件事拆成可执行的工程约定。

• 文件组织:与组件相关的样式、子组件、测试和类型就近放置(colocate),而不是分散到多个目录。
• 组合优先于配置:通过把小组件组合成大组件来扩展行为,而不是堆 props 开关。
• 组件保持单一职责:一个组件只负责一件事,不要同时兼任布局层、数据层和样式层。
• 数据获取与展示分离:容器负责取数据,展示组件只接收 props。例如 TaskListContainer 内部处理 tasks 与加载状态,渲染逻辑留给展示层。

适用边界与注意点

• 它给出的是工程约束与设计判断,不是现成的组件库;你仍需维护自己的设计 token 和组件。
• 无障碍和性能被视为默认要求,而非可选优化,接入前请确认项目已有可访问性基线。
• 示例使用 tsx 编写,非 React 技术栈需要自行改写容器与展示层的拆分方式。