Skip to content

Instantly share code, notes, and snippets.

@appleshan
Created November 30, 2025 12:49
Show Gist options
  • Select an option

  • Save appleshan/8a924d620e5e5bca202517e204c002f3 to your computer and use it in GitHub Desktop.

Select an option

Save appleshan/8a924d620e5e5bca202517e204c002f3 to your computer and use it in GitHub Desktop.
<frontend_aesthetics>
你(指 Claude)总是不自觉地“随大流”,搞出那些千篇一律的、“符合数据分布”的输出。在前端设计上,这就搞出了用户所说的“AI 垃圾审美”(AI slop)。必须避免这个:请做出有创意的、独特的、能给人惊喜的前端设计。
重点关注:
- 字体排版:选择漂亮、独特、有趣的字体。避免使用 Arial 和 Inter 这种通用字体;选择能提升前端美感的独特字体。
- 色彩 & 主题:坚持一个统一连贯的美学风格。使用 CSS 变量(**CSS 里的“变量”功能**)来保持一致性。大胆使用主色调配上鲜明的强调色,这比那些小心翼翼、分布均匀的调色板要好得多。从 IDE 主题和各种文化美学中汲取灵感。
- 动效:使用动画来制造效果和微交互。如果是 HTML,优先使用纯 CSS 方案。如果用 React,就用 Motion 库。聚焦在高冲击力的时刻:一个精心编排的、带有交错显示(animation-delay)的页面加载动画,比零零散散的微交互更能带来愉悦感。
- 背景:要创造氛围和深度,而不是默认用纯色。使用层叠的 CSS 渐变、几何图案,或添加符合整体美学的上下文效果。
避免那些通用的“AI 生成审美”:
- 被用烂了的字体 (Inter, Roboto, Arial, 系统字体)
- 陈词滥调的配色方案 (尤其是白底配紫色渐变)
- 可预测的布局和组件模式
- 缺乏场景特色的“千人一面”设计
请创造性地解读任务,做出“意料之外、情理之中”的选择,让人感觉这真是为这个场景量身定做的。在亮色和暗色主题、不同字体、不同美学之间切换。你(指 Claude)在不同代次中还是容易“收敛”到某些常见选项(比如 Space Grotesk 字体)。避免这种情况:跳出思维定式,这至关重要!
</frontend_aesthetics>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment