Frontend Design

触发条件

当用户提出以下需求时激活此技能：

• 构建网页组件、页面、应用或界面
• 创建落地页、仪表盘或作品集
• 为现有网页 UI 进行样式美化
• 生成 HTML/CSS/JS、React、Vue 或类似前端代码
• 设计用于网络的海报、卡片或其他视觉元素

不适用场景

• 后端逻辑 —— API、数据库、服务器路由、身份验证；请直接使用编程工具
• 数据建模 —— 模式设计、ORM 配置、数据管道
• 命令行或终端界面 —— 本技能仅适用于浏览器/网页界面
• 基础设施或部署 —— Docker、CI/CD、云配置等

决策规则

1. 若请求纯属视觉/UI 方面 → 完全遵循本技能（设计思维 + 美学准则）
2. 若请求混合了前端与后端内容 → 用本技能处理前端部分；后端需单独处理
3. 若用户指定了框架（如 React、Vue、Svelte）→ 使用指定框架；否则默认采用干净的 HTML/CSS/JS
4. 若用户指定了美学风格 → 严格遵循其方向；否则坚持一种大胆且出人意料的设计选择
5. 若产物较小（单个按钮、一张卡片）→ 跳过设计思维步骤，直接实现

本技能指导创建具有辨识度、可投入生产的前端界面，避免平庸的“AI 生成感”审美。输出真实可用的代码，对美学细节和创意选择保持高度关注。

所有生成的代码均写入用户指定的项目目录中。无需外部服务、凭证或网络访问。

用户提供前端需求：需构建的组件、页面、应用或界面。可包含用途、目标用户或技术限制等背景信息。

设计思维

在编码前，理解上下文并确立一个鲜明的美学方向：

• 目的：该界面解决什么问题？目标用户是谁？
• 基调：选择一种极端风格：极简主义、极致繁复、复古未来风、有机自然风、奢华精致、玩趣玩具感、杂志编辑风、粗野主义、艺术装饰几何风、柔和粉彩、工业实用主义等。风格种类丰富，可参考但必须基于方向进行真正原创的设计。
• 约束：技术要求（框架、性能、无障碍性）
• 差异化：它为何令人难忘？人们会记住它的哪一点？

关键提示：必须明确概念方向，并精准执行。大胆的极繁主义与精炼的极简主义皆可，核心在于有意识的选择，而非强度本身。

随后实现符合以下标准的工作代码（HTML/CSS/JS、React、Vue 等）：

• 可投入生产且功能完整
• 视觉冲击力强且记忆点突出
• 整体风格统一，具备清晰的美学立场
• 每一细节都经过精心打磨

前端美学准则

重点关注以下方面：

• 排版：选用美观、独特且富有表现力的字体。避免使用通用字体如 Arial、Inter；应选择能提升整体美感的非主流字体。搭配一个具有个性的标题字体与一个精致的正文字体。
• 色彩与主题：坚持一致的美学调性。使用 CSS 变量确保一致性。以强烈主色搭配鲜明点缀色，优于平淡均匀的配色方案。
• 动态效果：运用动画实现视觉效果与微交互。优先使用纯 CSS 实现 HTML 动效；在 React 中可使用 Motion 库。聚焦高影响力时刻：一次精心编排的页面加载（通过 animation-delay 实现错落揭示），比零散的微交互更能带来愉悦感。利用滚动触发、悬停状态制造惊喜。
• 空间布局：打破常规布局。采用不对称、重叠、斜向流动、突破网格结构的元素。留白充足或密度控制得当。
• 背景与视觉细节：营造氛围与层次感，而非仅使用纯色背景。添加与整体风格契合的纹理与特效。可尝试渐变网格、噪点纹理、几何图案、多层透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠加等创意形式。

切勿使用常见的 AI 生成审美，例如：

• 过度使用的字体家族（Inter、Roboto、Arial、系统字体）
• 陈词滥调的配色方案（尤其是白色背景上的紫色渐变）
• 可预测的布局与组件模式
• 缺乏上下文特征的千篇一律设计

应创造性地解读需求，做出出人意料但贴合情境的选择。每个设计都不应雷同。在明暗主题、字体、风格之间灵活切换。绝不重复使用常见选项（如 Space Grotesk 等）。

重要提示：实现复杂度应匹配美学愿景。极繁设计需复杂的代码结构与丰富的动画效果；极简或精致设计则需克制、精准，注重间距、排版与细微之处。优雅源于对愿景的出色执行。

谨记：Claude 能够完成非凡的创意工作。不要自我设限，展现突破常规、坚定贯彻独特愿景所能达到的真实创作高度。