这个UI设计技能，是把苹果的精细设计理念、Figma 的系统化设计思路，还有包容性设计里的无障碍原则揉到一起做出来的。不是只追求界面好看，核心是让界面用着顺手，不用费脑子琢磨怎么操作，就跟用日常熟悉的东西一样自然。
做这个技能的核心思路，就是对标苹果、谷歌这些大厂的设计标准，把他们做亿级用户产品时关注的像素级细节（比如 1 个像素的对齐）、无障碍规则（比如文字和背景的对比度），还有组件复用的逻辑，都变成可落地的规则，不管是设计师搭界面，还是开发写样式，都能按这套来。
具体使用方法
步骤1：Skills放置位置
-
全局 Skills 目录在系统用户根目录的
.trae/skills -
项目 Skills 目录在项目根目录的
.trae/skills
第一步：调起技能
在 TRAE IDE 的输入框里，只要提和 UI 设计相关的需求就行，不用记复杂指令，比如：
-
“帮我改下登录页的间距，看着太乱了”
-
“检查下我写的按钮 CSS 有没有无障碍问题”
-
“给移动端表单定一套字体大小规则”系统会自动识别 “间距”“按钮”“无障碍” 这些关键词，触发这个 UI 设计技能。
第二步：说清需求
不用绕弯子，直接说清楚要做啥、有啥要求，比如：
-
要改的东西：“按钮”“登录页布局”“图标尺寸”；
-
要做的动作：“设计”“检查”“优化”；
-
特殊要求：“要适配手机端”“得符合无障碍标准”“按钮得够大，好点击”。
第三步：直接用技能给出的落地结果
技能不会只给空泛的建议，而是按预设规则返回能直接用的具体方案：
-
要是做检查：会直接指出具体问题（比如 “按钮间距用了 5px，不符合 4/8px 的规范”“文字和背景对比度不够，没达到 WCAG 标准”），还会说清楚怎么改；
-
要是做设计 / 优化：会给具体的尺寸（比如 “移动端按钮高度设 44px，适配点击需求”）、配色（比如 “文字用 #333，背景用 #fff，对比度刚好 4.5:1”）、样式代码（比如 “按钮 hover 状态加浅灰色背景：hover:bg-gray-100”）；
-
拿到结果后，直接在 IDE 里复制 CSS/JSX 代码用，或者照着改设计稿就行，不用自己再琢磨。
第四步：调整优化
如果觉得结果不合适，直接说要改的地方就行，比如 “按钮 hover 的颜色太浅了，换深一点的灰色”，技能会按规范重新调整，比如改成 “hover:bg-gray-200”，始终符合 8 点网格、无障碍这些标准。
Skill 编写思路
1. 解决设计 / 开发中 “不统一、不规范” 的实际问题
做这个技能，就是冲着日常工作里的常见痛点来的 —— 比如有人随便用 5px、7px 的间距，按钮做得太小不好点，文字对比度不够看不清，这些问题既影响美观又影响使用。所以核心思路是把大厂的设计标准变成 “能查、能验证” 的明确规则，不管谁用，都能按同一套标准来。
2. 把 “好看” 这种模糊感觉，变成能落地的硬标准
不会只凭经验说 “这个看着不好”，而是把规则定死：
-
间距只能用 4、8、12px 这类数值，用了 3、5px 就直接提示错误；
-
移动端按钮尺寸至少 44x44px，小了就标红提醒；
-
文字和背景对比度必须达到 4.5:1，不够就给现成的修复方案；这些规则都写在 validations.md 里，技能判断时只认这些标准，不凭感觉。
3. 不用记复杂指令，说大白话就行
不管是设计师还是开发，不用学特殊语法，只要说日常的需求（比如 “改下按钮样式”），系统能识别 “按钮”“样式” 这些关键词，自动触发技能，返回的结果也是能直接用的代码、尺寸，不是只说 “要规范” 这种没用的话。
4. 坚守标准：不对的地方直接指出来，不迁就
如果有人说 “我想把按钮间距设成 5px，看着舒服”，技能不会顺着来，会明确提醒 “间距得按 4/8px 的规范来，5px 不符合统一规则，改成 4px 或 8px 更合适”，确保输出的方案都符合行业标准，不迁就随意的需求。
5. 设计到开发都能用
不管是从零设计界面、改现有设计稿，还是检查问题，这个技能都能用。设计师可以用它定规范，开发可以用它查代码里的样式问题，不用再分开找不同的工具或方法。
Skills下载链接： https://github.com/Duanjyy/UI-Interface-Design-Review
