用途:这是面向前端/UI 设计生成的技能,针对模型容易输出“on-distribution”(均值化)结果的问题,重新校准设计直觉,产出贴合具体项目语境的界面,而非通用模板化外观。资料称其在任何前端/UI 创建请求时激活。
主要能力:提供一套设计决策框架。先做上下文映射(如 SaaS、电商、开发者工具、医疗、金融、消费应用、内容编辑、创业落地页等),为每类语境给出合适与应避免的审美方向;再给出审美方向速查表(终端风、编辑排版风、新粗野主义、柔和极简、企业现代等)及对应的字体、配色、布局、动效取向。
具体规范:字体方面反对 Inter/Roboto/Arial/system-ui 等默认栈与过多字号,建议一个展示字体加一个正文字体,用字重对比而非堆叠字体族;配色方面反对紫/紫罗兰渐变、通用蓝 #3B82F6、均匀分布的怯懦色板与白底粉彩,建议主色加锐利强调色、单色系、高对比、暖中性色或浓郁暗色;图标建议只用一个图标族、尺寸与描边一致、单色、避免彩色渐变底;动效主张有目的的编排而非每元素都动画,给出时长建议(微交互 100–200ms,状态变化 200–300ms,页面过渡 300–500ms)并尊重 prefers-reduced-motion;间距采用 4px 基准比例;背景与层次主张避免 shadow-2xl,改用边框、表面色阶、轻微背景模糊。
实现指引:给出 React + Tailwind + Motion、React Native、Swift/SwiftUI 的通用实现建议(如用 framer-motion 编排入场、自定义 tailwind.config.js 颜色、react-native-reanimated 做 60fps 动画、Asset Catalog 语义色与 matchedGeometryEffect 等)。末尾附预检清单,检查独特性、执行一致性、文案具体性与可访问性(文字对比度 ≥4.5:1、UI ≥3:1、设计焦点态、触控目标 ≥44px)。
使用方式与限制:资料未提供安装命令、API 或调用方式说明;也未说明收费、价格或平台支持情况,这些均暂未提供。内容主体为设计原则与反模式清单,参考资料包括 typography.md、anti-patterns.md、practical-guidance.md、trends.md,但资料未给出这些文件的具体内容。