name: frontend-design description: “设计和实现具有强烈美学方向、生产就绪的独特前端界面。当被要求创建或重新设计网页、组件或应用程序（HTML/CSS/JS, React, Vue等）时使用。”
前端设计技能
设计与实现令人难忘的前端界面，具有清晰、有意向的美学。输出必须是真实、可运行的代码——不仅仅是情绪板。这个技能是关于设计思维 + 执行：每一个视觉选择都应该根植于目的和上下文。
何时使用
当用户想要时使用此技能：
- 创建一个新的网页、着陆页、仪表板或应用UI
- 设计或重新设计前端组件或屏幕
- 改进排版、布局、颜色、动画或整体视觉抛光
- 将概念或简报转换为高保真、编码的界面
需要收集（或假设）的输入
在编码之前，确定：
- 目的与受众：这个UI解决了什么问题？谁使用它？
- 品牌/声音：任何参考品牌、语调或视觉灵感？
- 技术约束：框架、库、CSS策略、可访问性、性能
- 内容约束：必需的副本、资产、数据、功能
如果用户没有提供这些，提出2-4个有针对性的问题，或在一个简短的序言中陈述合理的假设。
设计思维（必需）
致力于一个单一的、大胆的美学方向。命名它并一致地执行它。例子：
- 粗野主义 / 原始 / 功利主义
- 编辑 / 杂志 / 排版
- 奢华 / 精致 / 极简
- 复古未来主义 / 赛博 / 霓虹
- 装饰艺术 / 几何 / 装饰性
- 手工制作 / 有机 / 纹理化
避免通用的人工智能美学。 没有“默认”字体、配色方案或库存布局。
在编写代码之前，定义系统：
- 视觉方向 — 一句话描述氛围
- 差异化因素 — 这个UI应该有什么令人难忘之处？
- 排版系统 — 展示字体 + 正文字体、比例、重量、大小写
- 颜色系统 — 主导色、强调色、中性色；定义为CSS变量
- 布局策略 — 网格节奏、间距比例、层级计划
- 动画策略 — 1-2个有意义的交互时刻
如果用户只想要代码，跳过解释但内部仍遵循此。
实施原则
- 可运行代码：HTML/CSS/JS或框架代码，可以直接运行
- 语义化与可访问性：标题、标签、焦点状态、键盘导航
- 响应式：流动布局、断点、响应式排版
- 标记化样式：用于颜色、间距、半径、阴影的CSS变量
- 现代布局：优先使用CSS Grid/Flex，避免脆弱的定位技巧
美学指南
排版
- 排版应定义设计的声音
- 避免默认字体（Inter, Roboto, Arial, 系统堆栈）
- 使用独特的展示字体 + 精致的正文字体
- 实现清晰的层级（大小、重量、间距、大小写）
颜色与主题
- 致力于一个有强烈观点的调色板
- 避免胆小、过度使用的渐变（例如，白色上的紫到粉）
- 有意识地使用对比并检查可读性
构图与布局
- 鼓励不对称、比例对比、重叠或网格打破
- 有意识地使用负空间（或如果是极简主义，控制密度）
- 通过间距和对齐创建视觉节奏和层级
细节与氛围
- 当适当时添加纹理或深度（噪音、颗粒、微妙的图案）
- 仅当它们服务于概念时使用阴影/发光
- 考虑独特的边框、遮罩或剪切路径以创造独特的形状
动画与交互
- 少而精地使用动画
- 倾向于一个突出的交互而不是许多小交互
- 尊重
prefers-reduced-motion
避免
- 千篇一律的英雄+3卡片布局
- 通用渐变和默认字体选择
- 无动机的装饰元素
- 过于扁平、无特色的组件库
交付物
- 提供完整代码，包括文件名或组件边界
- 使用CSS变量或配置对象使定制容易
- 如果需要资产，提供内联SVG或生成式CSS图案
质量检查清单（自我验证）
- 美学方向是明确的
- 排版感觉有意向和表达力
- 布局和间距是一致和有目的的
- 颜色调色板感觉连贯和可读
- 交互增强体验而不杂乱
- 代码按提供运行且生产就绪
记住： 设计只有在其承诺的强度下才强大。选择一个方向并不懈地执行它。