frontend-design

前端设计

在选择模型前，先选择分支。协调工作和确定性命令均在调用权限范围内执行。在当前角色中应用此方法。此方法不会调度工作者。如需调度工作者，请使用 shared/references/model-preview.md 及其中唯一获批的路由快照。嵌套技能和运行器会使用该快照，不会再次选择模型或工作者。

此技能指导你创建独具特色、可用于生产环境的前端界面：实现真正可用的代码，并对美学细节和创意选择给予格外关注。

核心理念是概念统一性：每个界面都应贯彻一个连贯的设计理念，所有字体、色彩、动效和布局选择都应服务于这一理念。开始编码前，明确说出这种美学方向，并始终遵循——醒目却缺乏一致性的界面不符合此技能的要求。

如需从设计系统数据库中系统地查找样式、颜色和字体，请参阅 ui-ux-pro-max；此技能专注于纯创意、量身定制的美学方向。

注意：此技能取代了随附的 frontend-design:frontend-design 插件技能；其触发条件和指导内容涵盖了后者的全部内容。如果两者都可用，请优先使用此技能（或禁用插件版本，以避免激活结果不确定）。

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

设计思路

对于现有产品，除非用户要求采用新方向，否则应保留其组件、主题、信息密度和交互惯例。仅在定制设计或获准进行视觉重设计时，才使用以下美学指导。不要仅仅为了让结果更有特色，就替换既有字体、控件或布局。

如果用户要求采用新方向，应先了解背景并确定清晰的美学方向：

• 用途：此界面要解决什么问题？谁会使用它？
• 基调：选择一种鲜明的风格：极简、混乱繁复、复古未来主义、有机自然、奢华精致、活泼玩具感、编辑杂志风、粗野原始、装饰艺术／几何、柔和粉彩、工业实用主义等。可供选择的风格非常多。可以从中汲取灵感，但最终应设计出真正契合所选美学方向的方案。
• 限制条件：技术要求（框架、性能、无障碍性）。
• 差异化：是什么让它令人难忘？人们会记住它的哪一点？

至关重要：选择清晰的概念方向并贯彻到底——这就是概念统一性的实际体现。

然后实现可运行的代码（HTML/CSS/JS、React、Vue 等），使其具备以下特点：

• 达到生产级质量且功能完善
• 视觉醒目、令人难忘
• 风格统一，并具有鲜明的美学主张

前端美学指南

重点关注：

• 字体排版：选择美观、独特且有趣的字体。避免使用 Arial 和 Inter 等通用字体，转而选择能提升前端美感、独具特色且富有个性的字体。将独特的展示字体与精致的正文字体搭配使用。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致性。大胆的主色搭配鲜明的点缀色，胜过保守且均匀分布的配色。
• 动效：使用动画营造效果并实现微交互。对于 HTML，优先采用纯 CSS 方案。条件允许时，在 React 中使用 Motion 库。重点打造影响力强的时刻：精心编排一次页面加载，并以交错方式呈现内容（animation-delay），比零散的微交互更能带来愉悦感。运用滚动触发效果和悬停状态，制造惊喜。
• 空间构图：尝试出人意料的布局、不对称、重叠、对角线流动、打破网格的元素，以及宽敞的留白或经过控制的密集布局。
• 背景与视觉细节：营造氛围与层次感，而不是默认使用纯色。添加与整体美学相契合的情境效果和纹理。运用创意形式，例如渐变网格、噪点纹理、几何图案、分层透明效果、戏剧化阴影、装饰边框、自定义光标和颗粒叠加。

打造全新的定制风格时，应避免千篇一律的美学：避免使用过度泛滥的字体系列（Inter、Roboto、Arial、系统字体，也不要一味选择 Space Grotesk），避免陈词滥调的配色方案（尤其是白色背景上的紫色渐变），避免可预测的布局与组件模式，也要避免缺乏情境特色的模板化设计。做出令人意外、又真正契合具体情境的设计。每个设计都应各不相同——在不同生成结果中变化主题、字体和美学风格。

重要：实现的复杂度必须与美学构想相匹配。极繁主义设计需要精细的代码、大量动画和效果。极简或精致的设计则需要克制，并注重间距、字体排版和细节。优雅源自对构想的出色实现。

交付要求

每次交付都必须包含：

1. 可运行的代码
2. 无障碍说明
3. 运行和验证所需的命令
4. 所做的权衡
5. 一段关于桌面端与移动端行为差异的总结

如果无法使用所要求的框架或工具，则应提供可运行的纯 HTML/CSS/JS 替代方案，并说明这一点。