前端设计

打造独具特色、具备生产级质量的前端界面，彻底规避千篇一律的“AI 套路化”视觉风格。实现真实可运行的代码，并在美学细节与创意决策上倾注极致关注。

设计思维

编码前，须深入理解使用场景，并坚定确立一种大胆（BOLD）的美学方向：

• 目的：该界面解决什么问题？面向哪类用户？
• 基调：选择一种极致风格——极简至冷峻、繁复至混沌、复古未来主义、有机/自然风、奢华/精炼感、玩具般 playful、杂志/编辑风、粗野主义/raw、装饰艺术/几何风、柔和/低饱和、工业/功能主义
• 约束条件：技术要求（框架选型、性能、无障碍访问等）
• 差异化：什么让这个设计令人“过目不忘”？用户最可能记住的唯一亮点是什么？

关键原则：明确选定一个概念性方向，并以高度精准的方式贯彻执行。大胆的繁复主义与精炼的极简主义同样有效——核心在于设计意图的清晰性，而非表现强度本身。

前端美学规范

排版

选用兼具美感、独特性与趣味性的字体。避免使用 Arial、Inter 等泛用字体；应选择能显著提升界面质感的特色字体。建议采用一款富有表现力的展示字体（display font）搭配一款细腻考究的正文字体（body font）。

色彩与主题

坚持统一协调的整体美学。通过 CSS 变量确保样式一致性。以主色为基底、辅以锐利醒目的强调色，效果远优于畏首畏尾、平均分配的配色方案。

动效

将动画用于视觉效果与微交互。HTML 场景优先采用纯 CSS 方案；React 环境下如有需要，可使用 Motion 库。聚焦高影响力时刻：一次精心编排的页面加载动效（含错落有致的内容逐次呈现），其愉悦感远胜于零散分布的多个微交互。

空间构成

打破常规布局：采用非对称构图、元素重叠、对角线视觉流、突破网格限制的元素、大量留白（negative space）或高度可控的密集排布。

背景与视觉细节

营造氛围与纵深感，而非简单使用纯色背景。可创造性地运用渐变网格（gradient meshes）、噪点纹理（noise textures）、几何图案、多层透明叠加、戏剧性阴影、装饰性边框、自定义光标（custom cursors）、颗粒覆盖（grain overlays）等手法。

反模式（切勿采用的做法）

绝对禁止使用：

• 已被过度使用的字体族（Inter、Roboto、Arial、系统默认字体）
• 陈词滥调的配色方案（例如白色背景上滥用紫色渐变）
• 可预测的布局结构与组件范式
• 缺乏上下文特性的模板化设计（cookie-cutter design）

切勿趋同于常见 AI 生成设计所偏爱的选择（例如 Space Grotesk 字体），尤其在多次迭代生成中需保持风格多样性。

实现

实现复杂度须与美学构想严格匹配：

• 繁复主义（Maximalist）设计需配备结构复杂、动画丰富、特效密集的代码实现
• 极简主义（Minimalist）设计则强调克制、精准与对间距、排版及细微质感的苛刻把控

优雅感源于对设计愿景的卓越执行。

输出要求

交付真实可运行的代码（HTML/CSS/JS、React、Vue 等），须满足以下标准：

• 具备生产级质量，功能完整可用
• 视觉表现震撼且令人印象深刻
• 整体风格高度统一，具备清晰明确的美学立场
• 每一处细节均经反复打磨、精益求精

应在明暗主题、字体选择、美学风格等方面充分变化。严禁出现雷同设计。

请谨记：Claude 具备非凡的创造力。请勿自我设限——尽情展现跳出固有框架、全情投入于独树一帜的设计愿景时，所能真正达成的创作高度。