用途:对已有项目做设计升级,在原有技术栈上改进而非重写,目标是让界面摆脱通用 AI 设计痕迹、达到更高质感。技能声明其建立在 design-foundation 之上,后者是共同底线,本技能只在其上添加风味。
使用流程:一是扫描代码库,识别框架、样式方案(Tailwind、原生 CSS、styled-components 等)与现有设计模式;二是按审计清单诊断通用的模式、薄弱点与缺失状态;三是针对性修复,配合现有技术栈,只在原有基础上改进。
审计范围涵盖:字体(避免浏览器默认字体或清一色 Inter,正文宽度约 65 字符,引入 500/600 字重,数据界面用等宽或表格数字);颜色与表面(避免纯黑背景、过饱和强调色、多个强调色、冷暖灰混用、常见的紫蓝 AI 渐变,阴影跟随背景色调,避免大面积纯平);布局(避免全居中对称、等高三列卡片、height: 100vh,建议 min-height: 100dvh,使用网格与最大宽度容器,注意卡片按钮底部对齐与垂直节奏);交互与状态(悬停、按下、过渡、焦点环、加载骨架、空状态、错误状态、当前页导航、平滑滚动、使用 transform 与 opacity 动画);内容(避免 John Doe 之类假名、整齐假数字、Acme 类公司名、AI 文案套话、感叹号、Lorem Ipsum);组件与图标(避免通用卡片三件套、左边色条、胶囊徽章、手风琴 FAQ、三塔定价表、全用 Lucide/Feather 图标);代码质量(语义化 HTML、避免内联样式、相对单位、alt 文本、合理 z-index、真实存在的导入、缺失的 meta 标签);常被遗漏项(隐私与条款链接、返回路径、自定义 404、表单校验、跳转到内容链接、Cookie 同意)。
升级技术包括:可变字体动画、描边转填充、文字遮罩;破格网格、留白最大化、视差卡片堆叠、分屏滚动;惯性平滑滚动、交错入场、弹簧物理、滚动驱动揭示;真实玻璃拟态、光标聚光边框、噪点叠加、着色阴影。修复优先级为:换字体、清理配色、补悬停与按下状态、布局与间距、替换通用组件、补加载/空/错误状态、打磨字体比例与间距。
规则:沿用现有技术栈,不迁移框架或样式库;不破坏现有功能,每次改动后测试;引入新库前先查依赖文件;用 Tailwind 需先确认版本;无框架则用原生 CSS;保持改动可审阅、小步进行。
完成后需按指定格式写一份草稿到 wiki,文件名为 DDMMYY-<ten>.md,路径为 llmwiki/wiki/draft/uiux/,并按给定模板填写类型、状态、标签、日期与产出说明。
限制:资料未说明收费、价格、适用平台与具体效果数据,亦未提供安装命令。