关于 creative-frontend-aesthetics
面向前端开发者的设计技能，帮助构建避免常见 AI 生成风格的界面。内容涵盖字体、统一配色、有目的的动效和分层背景。
主要功能
- 01选择鲜明的字体
- 02用 CSS 变量统一配色
- 03设计有目的的动画与微交互
- 04通过分层背景营造纵深
- 05避免套路化布局
适用场景
- 01为前端界面确立视觉风格
- 02为页面选择字体与配色
- 03为页面关键时刻添加动效
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/creative-frontend-aesthetics确认已加载。
详细介绍
富有创意的前端美学技能
你必须摆脱统计意义上常见的“仿佛由 AI 生成”的设计（AI slop），打造能够让用户惊喜、愉悦的独特前端。
重点事项
1. 字体排印
- 选择美观、独特且引人注目的字体。
- 避免： Arial、Inter 等通用字体。
- 推荐： 选择能提升前端美感的个性字体。
2. 色彩与主题
- 坚持统一的美学风格（Cohesive aesthetic）。
- 使用 CSS 变量保持风格一致，并优先采用“强烈的主色 + 鲜明的强调色”，而不是模糊的配色。
- 灵感来源： 从 IDE 主题、文化美学（赛博朋克、复古、北欧现代风等）中汲取灵感。
3. 动效（动态效果）
- 加入恰到好处的动画和微交互。
- 对于 HTML，优先使用纯 CSS 方案；对于 React，优先使用
framer-motion等库。 - 策略： 与零散的动态效果相比，应着重设计“关键时刻”的演出，例如页面加载时的错峰显示。
4. 背景
- 避免使用纯色，营造氛围与纵深感。
- 叠加 CSS 渐变图层、几何图案和符合语境的背景效果，增强质感。
应避免的“AI 生成设计”特征
- 字体： 过度使用 Inter、Roboto、Arial 和系统字体。
- 配色： 白色背景搭配紫色渐变（过于典型）。
- 布局： 可预测的组件摆放、模板化的设计。
- 个性： 无视语境、“随处可见”的设计。
创意诠释
积极尝试浅色／深色主题切换、大胆探索字体，并做出出人意料的选择。 不要拘泥于某种特定字体（例如 Space Grotesk），始终提出“跳出框框”的方案。
评论
支持 Markdown