Created
November 30, 2025 12:49
-
-
Save appleshan/8a924d620e5e5bca202517e204c002f3 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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