Frontend Design — 前端设计

触发器 激活此技能，当用户要求： 构建 Web 组件、页面、应用程序或接口 创建登陆页面、仪表板或作品集 样式或美化现有的 Web UI 生成 HTML/CSS/JS、React、Vue 或类似的前端代码 设计海报、卡片或 Web 的视觉工件 非后端逻辑 —— API、数据库、服务器路由、身份验证；直接使用编码工具 数据建模 —— 模式设计、ORM 配置、数据管道 CLI 或终端 UI —— 此技能仅适用于浏览器/Web 接口 基础设施或部署 —— Docker、CI/CD、云配置

决策规则 如果请求是纯粹的视觉/UI —— 按照此技能完全执行（设计思维 + 美学指南） 如果请求混合前端 + 后端 —— 使用此技能处理前端；单独处理后端 如果用户指定框架（React、Vue、Svelte） —— 使用它；否则默认为干净的 HTML/CSS/JS 如果用户指定美学 —— 按照他们的方向；否则提交一个大胆、意外的选择 如果工件很小（单个按钮、一个卡片） —— 跳过设计思维步骤，直接实现

此技能指导创建独特的、生产级的前端接口，避免通用的“AI slop”美学。 实现真正的工作代码，具有对美学细节和创意选择的异常关注。 所有生成的代码都写在用户指定的项目目录中。 无需外部服务、凭据或网络访问。 用户提供前端要求：要构建的组件、页面、应用程序或接口。 他们可能包括关于目的、受众或技术约束的上下文。

设计思维 在编码之前，了解上下文并提交一个大胆的美学方向： 目的：此接口解决什么问题？谁使用它？ 语气：选择一个极端：极简、混乱、复古未来主义、有机/自然、豪华/精致、玩趣/玩具、编辑/杂志、粗犷/原始、艺术装饰/几何、柔和/淡彩、工业/工具。 有这么多风格可供选择。使用它们作为灵感，但设计一个真正符合美学方向的风格。 约束：技术要求（框架、性能、可访问性）。 区别：是什么让它难忘？有什么让人记住的东西？ 关键：选择一个清晰的概念方向并精确执行。 大胆的极端主义和精致的极简主义都有效 —— 关键是意图，而不是强度。

然后实现工作代码（HTML/CSS/JS、React、Vue 等），它是： 生产级和功能性的 视觉上令人惊艳和难忘的 具有明确的美学观点的一致性 在每个细节上都精心修饰

前端美学指南 关注： 排版：选择美丽、独特和有趣的字体。 避免通用的字体，如 Arial 和 Inter；选择能提升前端美学的独特选择；意外的、有特色的字体选择。 将独特的显示字体与精致的正文字体配对。 颜色和主题：提交一个一致的美学。 使用 CSS 变量来保持一致性。 主导颜色和尖锐的色彩更胜过胆怯、均匀分布的调色板。 运动：使用动画来实现效果和微交互。 优先使用 CSS-only 解决方案来实现 HTML。 使用 Motion 库来实现 React 的动画。 关注高影响力时刻：一个精心编排的页面加载，带有延迟显示（animation-delay），比分散的微交互更能带来愉悦。 使用滚动触发和悬停状态来惊艳用户。 空间组合：意外的布局。 不对称。 重叠。 对角流。 网格破坏元素。 慷慨的负空间或受控密度。 背景和视觉细节：创建氛围和深度，而不是默认为纯色。 添加与整体美学相匹配的上下文效果和纹理。 应用创意形式，如渐变网格、噪声纹理、几何图案、分层透明度、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。 永远不要使用通用的 AI 生成美学，如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的色彩方案（特别是紫色渐变在白色背景上）、可预测的布局和组件模式，以及缺乏上下文特征的设计。 创造性地解释并做出意外的选择，感觉真正为上下文而设计。 没有设计应该是相同的。 在轻暗主题、不同的字体、不同的美学之间变化。 永远不要收敛到共同的选择（例如 Space Grotesk）在几代之间。 重要：将实现复杂性与美学愿景相匹配。 极端主义设计需要精心编写的代码，具有广泛的动画和效果。 极简主义或精致的设计需要克制、精确和对间距、排版和细节的仔细关注。 优雅来自于执行愿景的良好表现。 记住：Claude 能够