ui-aesthetic

UI设计与打磨

目标是让内容、构图与交互形成明确的设计判断。“高级”不能由深色、留白、玻璃或无边框单独证明；“去AI味”也不是禁止所有渐变和卡片。

先识别约束，再动手

• 读当前页面/代码及用户提供的图，确定用户首先要看什么、完成什么，找出主任务受到的具体干扰。已有授权就推进，不为每个视觉参数重复提问。
• 已有设计系统、原型或用户选择是起点。若存在 .easymint/design/visual-spec.json，读它与同目录样式/PORTING契约，复用实际组件与对应模板；改方向用可用的 set_project_design。不另造token、重选品牌，或把结构化选择降成一段形容词。
• 技能里的相对参考路径基于本SKILL.md目录。新定视觉方向、风格被抹平或材质不成立时，读 style-craft.md；局部文案/间距修复无需加载全部参考。
• ui-ux-pro-max 可按具体缺口查询交互/目标技术栈，品牌库仅在需要该参考时读取。搜索结果是材料，不能覆盖项目约束，也不必为一次局部打磨重新生成设计体系。

构图要服务真实内容

先在内部形成一个可执行的画面：首要内容/动作 → 浏览顺序 → 主次区域的面积与对齐 → 风格特征落在哪些真实组件。直接落实到页面，不额外输出长篇设计说明。

• 用真实标题、字段、列表或作品组织布局；未知数据明确为示例。不擅自改产品名，无名称时用清晰的业务名称；工作台的标题说明对象/任务，不用通用抒情口号代替，海报/品牌内容可按目标采用情绪化标题。不为了看起来完整而虚构收益数字、客户Logo、数据图表、设置项或业务流程。
• 选择适合任务的组织方式：工作台强调操作与信息密度；内容页强调阅读节奏；作品/活动页可以放大图像、标题与不对称构图。不要把所有产品套成“居中Hero+三个等宽卡片+渐变按钮”。
• 视觉焦点来自任务重要性。把主要区域与辅助区域拉开尺度、密度和字重；不要给每段内容都套相同圆角框，也不要靠无限加留白制造精致。
• 设计记忆点可以来自构图、排版、真实作品或独特组件比例。只有能解释功能/气质时才加装饰，不强制每页塞一个图形、角标或漂浮光球。

用一套视觉语言完成整页

• 风格应同时作用于版面节奏、形状、字体角色、表面/光照、导航与浮层。去掉颜色后仍应辨认出所选风格；只改accent不算换风格。
• 先确定背景/表面/正文/次级文字/强调/反馈的语义角色，再落实色值。允许干净的红黄蓝绿作为焦点或状态，不默认全屏蓝色，也不把改成全黑白当成完成设计。棕色/土色等偏好按当前项目用户要求处理，不从参考品牌偷偷引入。
• 同类元素重复同一造型规则；不同信息级别不必同一种容器。已有样式包的装饰结构、字体与CSS都要复用，不能只复制颜色JSON。
• 字体选少量清晰角色，字重、行高、行宽与间距随内容密度调整。正文必须易读，辅助信息不能为了显得精致而缩成小灰字；中文标签不机械套英文全大写字距。商业字体缺失时，预览与产出使用同一个可用替代栈，不谎称复刻字体。
• 对齐建立稳定基线，间距形成可复用节奏；可做光学校正，不把所有卡片强制24px或每个页面强制超大标题。边框、阴影、渐变按材质和层级选择，不以硬性数量限制代替判断。

细节必须能操作

• 复用项目图标系统；新增功能图标使用统一SVG或目标平台符号，保持视觉重量、尺寸和对齐，不把emoji或混杂Unicode字符拼成导航/操作图标。小图标不能承载难猜的关键动作，必要的文字/可访问名称保留。装饰不做成假按钮。
• 正常、悬浮、按下、焦点、选中、禁用、错误、加载要在存在的控件上成立。反馈应可见，选中不依赖悬浮；切换选项后内容、值与选中态一致。
• 项目已有组件包时，先使用展厅/模板中控件的实际DOM与类名，不仿写一份近似外壳；输入、单选/复选、滑块、下拉和浮层逐项核对，保留原生交互语义但别遗漏外观与选中态。
• 自定义菜单、弹窗、抽屉沿用同一材质。验证定位、滚动/缩放后的锚点、边界避让、遮挡层级、外点关闭、Escape、键盘与焦点返回，不能只把原生select的外框涂色。
• 检查实际相邻颜色的对比，正文/按钮文字以4.5:1作为检查目标；hover、disabled、透明叠层和品牌覆色都单独看。不能把白字固定配在会变浅的hover背景上。
• 动效帮助理解变化，不造成布局跳动、hover闪块、拖动初始缩小或重置阅读位置。保留用户输入与浏览位置；尊重减少动态效果设置，不为每个元素加进场动画。
• 提示靠近相关动作但不挤动导航/历史入口，不遮挡输入与焦点。文案只保留当前判断必需的信息；关键标签、错误原因和恢复办法不能为了“简洁”被删掉。

移动端要重新设计优先级