本文用于指导创建具有鲜明特色、生产级质量的前端界面，避免通用的「AI 味」审美；要求产出真正可运行的代码，并对美学细节与创意选择保持高关注度。
用户通常会说明前端需求（组件、页面、应用或界面），并可能附带用途、目标用户或技术约束等上下文。
目录
设计思考
在编码之前，先理解上下文，并确定一个大胆、明确的美学方向。
美学维度
- 目的：这个界面解决什么问题？谁会使用它？
- 调性：选择一个极端方向：极致极简、极繁混沌、复古未来主义、有机/自然、奢华/精致、玩具般俏皮、编辑部/杂志风、粗粝主义/原始感、装饰艺术/几何风、柔和/粉彩、工业/实用主义等。可从这些方向获得灵感，但最终要设计出符合该美学方向的作品。
- 约束：技术要求，例如框架、性能、可访问性。
- 差异化：是什么让它令人难忘？用户会记住的那个点是什么？
关键要求：选择一个清晰的概念方向，并精准执行。大胆的极繁主义和克制的精致极简都可以成立，关键在于设计意图明确，而不是单纯追求强烈。
代码实现要求
实现可运行代码（例如 HTML/CSS/JS、React、Vue 等），并满足：
- 达到生产级质量，且功能可用；
- 视觉上突出且令人印象深刻；
- 拥有清晰、一致的美学观点；
- 在每个细节上都经过精心打磨。
前端美学指南
字体排版
选择美观、独特、有趣的字体。避免使用 Arial、Inter 等过于通用的字体；应优先选择能提升前端美感、出人意料且富有个性的字体。可将有特色的展示字体与精致的正文字体搭配使用。
颜色与主题
坚持统一的美学方向，使用 CSS 变量保持一致性。主导色搭配锐利的强调色，通常比胆怯、平均分布的配色更有效。
动效
使用动画增强效果与微交互。HTML 优先采用纯 CSS；React 中若可用，可使用 Motion 库。优先追求高影响力的瞬间：例如一次精心编排、带有错落延迟的页面加载动画，往往比零散的微交互更令人愉悦。可配合滚动触发与令人惊喜的 hover 状态。
空间构成
采用非预期布局：不对称、重叠、斜向流动、打破网格的元素；或使用大量留白，或受控的高密度布局。
背景与视觉细节
营造氛围与深度，避免默认纯色扁平背景。添加与整体美学匹配的上下文效果与纹理，例如渐变网格、噪点纹理、几何图案、分层透明、戏剧化阴影、装饰性边框、自定义光标、颗粒叠加等。
应避免的做法
不要使用通用 AI 生成式审美，例如：
- 过度使用的字体家族（Inter、Roboto、Arial、系统字体等）；
- 陈词滥调的配色（尤其是白底紫色渐变）；
- 可预测的布局与组件模式；
- 缺乏上下文特色的模板化设计。
要进行创造性理解，做出出人意料但真正符合场景的选择；任何设计都不应千篇一律。应在浅色/深色主题、不同字体与不同美学风格之间有所变化，避免在多次生成中趋同到常见选择（例如 Space Grotesk）。
重要：让实现复杂度与美学愿景匹配。极繁主义需要更复杂的代码（丰富动画与效果）；极简或精致设计则需要克制、精确，以及对间距、排版与细微细节的高度关注。优雅来自对设计愿景的良好执行。
结语
有能力完成高质量的创意前端作品：不要保守，在跳出常规思维并全力投入鲜明设计方向时，展示出真正能创造出的效果。