用途:在实现落地页、仪表盘与应用前端时,帮助摆脱统计意义上常见的“AI 生成感(AI slop)”设计,构建让用户感到惊喜的原创界面。
主要能力与要点:
- 排版:选择美观、独特、有吸引力的字体,避免 Arial、Inter 等泛用字体,优先能提升前端美感的特色字体。
- 配色与主题:坚持统一的美学风格,用 CSS 变量保持一致性,优先“强烈主色 + 锐利辅助色”的结构;可从 IDE 主题、赛博朋克、复古、北欧现代等文化美学中获取灵感。
- 动效:引入有效动画与微交互,HTML 优先纯 CSS 方案,React 可优先使用 framer-motion 等库;重点放在页面加载时的错峰(staggered)呈现等关键时刻,而非零散动效。
- 背景:避免纯色,用 CSS 渐变分层、几何图案、契合语境的背景效果营造氛围与纵深。
应避免的特征:过度使用 Inter、Roboto、Arial 与系统字体;白底加紫色渐变这类典型配色;可预测的组件布局与模板感;脱离语境的“随处可用”式设计。
使用方式:作为技能/规范在前端实现过程中应用,鼓励在明暗主题切换、字体尝试和意外选择上积极发挥,不要固守某个具体字体(如 Space Grotesk),始终给出跳出框架的提案。
限制:该资料未提供具体安装命令、配置文件、依赖版本或量化效果说明,相关事实暂未提供。