如何让 AI 构建符合现代标准的 UI 界面

解决 AI 生成 UI 界面时缺乏设计感、不符合工程实践的问题：通过引入一套标准化的约束（Constraints），引导 AI 产出具有一致性、可维护且符合现代交互逻辑的界面代码。

为什么需要这个技能

直接让 AI 写 UI 代码往往会出现两个极端：要么是毫无设计感的“裸 HTML”堆砌，要么是过度复杂、难以维护的冗余代码。AI 缺乏对现代前端设计系统（Design Systems）的深刻理解，容易忽略响应式布局、无障碍访问（Accessibility）以及组件的解耦。

本技能通过定义一套“有观点”（Opinionated）的约束集，为 AI 设定明确的界面构建边界。它不仅仅是告诉 AI “怎么写”，更是告诉 AI “在什么标准下写”，从而确保生成的界面不仅好看，而且符合生产环境的工程要求。

注入约束上下文：在开始 UI 任务前，加载 ui-skills 提供的约束规范，告知 AI 当前项目遵循的设计风格和技术堆栈。
定义界面边界：明确界面的核心功能点，利用规范中的模式（Patterns）引导 AI 决定使用哪种 UI 控件（例如：何时使用 Modal 而非 Page）。
迭代优化与验证：根据 AI 输出的初稿，利用约束集中的校验清单进行审查，要求 AI 修正不符合现代 UI 标准的细节（如对比度、间距或响应式断点）。

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

暂无推荐