tianemon/easymint/ui-aesthetic

UI设计与打磨

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

先识别约束，再动手

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

先用真实场景建立基准

• 若项目有 DESIGN.md、scene-contract.json、showcase.html、showcase-mobile.html，先读这些文件与对应样式/交互。这些是用户实际选择的双端场景，优先于旧组件展厅和通用布局模板。保留辨识度最高的构图、类型角色、材质与有用控件，按真实任务适配功能，而不是照搬演示业务。
• 不要求每种风格展示或实现所有组件。液态玻璃可由导航/播放器体现，新拟态可由旋钮与滑块体现，杂志可由刊头/目录/阅读节奏体现。避免为了“完整”塞入无用表格、按钮集合与数据卡片。
• 复杂材质或交互优先找有源码、可运行示例、明确许可的成熟参考，读核心实现，先保留其有效代码再适配。不把“Web 有限制”当作未做对照实验的结论，也不因实现更复杂就选 GPU 路线。
• 先做一个代表性控件，在同背景、同尺寸、同位置和状态下对比当前版、原始参考与候选。一次只改一组参数。保存用户认可的版本；新候选没有更好就不晋升为基线。
• 玻璃的曲面厚度、边缘位移、反射和透光需要协调；不要靠无关白圈/内阴影叠加体积。检查边缘到平面的渐隐、缩放采样与高像素密度抗锯齿。播放图标等要核对重心及真实按钮内的布局，避免 padding 把内容区挤得比 SVG 还小。

构图要服务真实内容

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

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

用一套视觉语言完成整页

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

细节必须能操作

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

移动端要重新设计优先级

• 保持同一种风格，但按小屏任务重排导航、主动作、内容顺序、卡片密度和作品比例；不能只是桌面缩小、无限堆叠或隐藏掉核心功能。
• 用可用宽高和内容决定断点，兼顾长屏、阔屏、近方屏及横向空间，不把所有手机限制为360/375px。主要触控区域留足空间，避免只靠hover才能发现或完成操作。
• 预览设备比例与宿主窗口分别处理：改变外层缩放不能改变内部逻辑布局，放大预览应有效利用高度；浮层定位也要使用同一坐标系。
• 真正原生平台需把token与材质投影到目标组件并实测，不能用一个HTML截图证明原生实现一致。

交付前看实际结果

有现成渲染能力时，查看真实页面与关键交互状态，不能只判断代码“写了blur/圆角所以好看”。无需为此启动未获授权的程序或安装额外服务。

按本次改动检查最相关的场景：

• 首屏是否首先呈现有用内容？布局、内容密度与风格是否有明确区别？
• 代表性按钮/输入/选择/菜单/弹窗在当前材质下可读、可操作、无意外矩形或遮挡？
• 小屏与阔屏是否仍体现风格，主任务不丢失，内容不溢出？
• 预览、项目文件与实际实现是否同源？修改是否实际生效，已有编辑与业务内容是否保留？

优先修掉最破坏主任务或整体观感的少数问题，再展示结果。报告具体改动与验证范围；没有渲染就明确仅做源码检查。“打开预览”本身不等于验收，不宣称未经验证的审美提升比例。