技能介绍

要解决的具体问题

AI 生成的网页界面往往陷入固定的视觉模板：整页紫色渐变、超大圆角、模板化的卡片网格，以及 Lorem ipsum 式的占位内容。这类界面的问题不在于“不好看”，而在于它没有遵循项目的真实设计系统，忽略了视觉层级与信息优先级，导致在不同产品中反复出现同一种观感，且往往缺少可访问性支持。

技能如何工作

该技能将界面制作视为工程问题，要求从组件架构到样式 token 都遵循生产级实践：

组件结构：将同一组件的文件就近放置，优先使用组合而非配置，保持组件职责单一，并把数据获取与渲染逻辑分离。
状态管理：选择能用的最简方案，避免属性层层透传超过三层，必要时引入 context 或重构组件树。
设计系统遵循：使用语义化颜色 token，如 text-primary，并按一致的间距标尺和排版层级组织内容，不随意自创数值。
规避 AI 美学：避免紫色主色、过度渐变、统一超大圆角、模板化 hero 区和整齐划一的卡片网格，改用贴近真实内容的布局。
可访问性：每个组件需满足键盘导航、ARIA 标签、焦点管理以及有意义的空状态与错误状态。
响应式设计：以移动端优先逐步扩展，并在 320px、768px、1024px、1440px 断点进行测试。

适用边界与注意点

该技能适用于新建或修改面向用户的前端界面，包括响应式布局、交互行为与视觉问题修复。使用时必须以项目既有设计系统为准，不能自创样式；构建完成后应检查控制台报错、键盘可达性、屏幕阅读器语义、断点表现、加载/错误/空状态以及 axe-core 警告。未加样式或仅用 AI 默认美学的界面会掩盖真实问题，后续补救响应式与可访问性的成本远高于一开始就按规范实现。