frontend-design

这项技能将指导你打造独具特色、可用于生产环境的前端界面，避免落入千篇一律的“AI 垃圾美学”。请编写真正可用的代码，并以非凡的用心打磨美学细节、做出创意选择。

用户会提供前端需求：要构建的组件、页面、应用或界面。他们也可能补充用途、受众或技术限制等背景信息。

设计思路

开始编码前，先理解背景，并确立一个大胆鲜明的美学方向：

• 用途：这个界面要解决什么问题？谁会使用它？
• 基调：选择一种极致风格：极简到极致、极繁主义混乱、复古未来主义、有机自然、奢华精致、俏皮玩具风、编辑杂志风、粗野原始、装饰艺术／几何风、柔和粉彩、工业实用主义等。可供借鉴的风格还有很多。请以此为灵感，设计出真正契合所选美学方向的界面。
• 限制条件：技术要求（框架、性能、无障碍）。
• 差异化：怎样才能让人过目难忘？人们会记住的那个亮点是什么？

至关重要：选定清晰的概念方向，并精准落实。大胆的极繁主义和精致的极简主义都行得通——关键在于有意识地设计，而非一味追求强烈效果。

然后编写可用的代码（HTML/CSS/JS、React、Vue 等），确保它：

• 达到生产级质量且功能完善
• 视觉出众、令人难忘
• 风格统一，有明确的审美立场
• 每个细节都经过精心打磨

前端美学指南

重点关注：

• 字体：选择美观、独特、有趣的字体。避免使用 Arial 和 Inter 等常见字体，改用能提升前端美感的独特字体；选择出人意料、富有个性的字体搭配。让鲜明的展示字体与精致的正文字体相得益彰。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致。相较于不温不火、平均分配的配色，大面积主色搭配鲜明强调色更有表现力。
• 动效：使用动画营造效果和微交互。编写 HTML 时优先采用纯 CSS 方案；React 项目中如有 Motion 库，则使用该库。重点打造高影响力的瞬间：一次精心编排、带有错落显现效果（animation-delay）的页面加载，比零散的微交互更能带来惊喜。运用滚动触发效果和令人意外的悬停状态。
• 空间构图：采用出人意料的布局。不对称、叠压、对角流动、突破网格的元素，以及充裕的留白或精心控制的密集布局。
• 背景与视觉细节：营造氛围和层次，而不是默认使用纯色。添加符合整体风格的情境效果和纹理。灵活运用渐变网格、噪点纹理、几何图案、分层透明效果、戏剧化阴影、装饰性边框、自定义光标和颗粒叠层等创意表现形式。

绝不要使用常见的 AI 生成美学套路，例如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、千篇一律的布局和组件模式，以及缺乏情境个性的模板化设计。

请发挥创意，做出出乎意料、又仿佛为具体场景量身设计的选择。不要让任何设计都雷同。灵活切换明暗主题、字体和美学风格。绝不要在每次生成时都收敛到常见选择（例如 Space Grotesk）。

重要：让实现的复杂度与美学构想相匹配。极繁主义设计需要复杂代码、大量动画和视觉效果；极简或精致的设计则需要克制、精准，并仔细斟酌间距、字体和细节。优雅来自对构想的出色呈现。

请记住：Codex 能够创造非凡的作品。放手一搏，尽情展现跳出常规思考、坚定贯彻独特构想所能创造的精彩成果。