frontend-design

前端设计

此技能用于前端界面设计与实现。每当用户希望你构建可用的 UI（组件、页面、落地页、仪表盘、海报风格的网页作品、HTML/CSS 布局、UI 重新设计，或要求“让它更好看”）时，都应使用此技能。目标是打造观点鲜明、制作精良、个性十足的界面，避免模板化、千篇一律的“AI 垃圾美学”。

工作方式

编写代码之前，先确定设计方向。做出一个大胆、明确的美学选择，然后始终如一地贯彻。

1 设计思考

先回答以下问题（将答案写在输出中，或作为内部检查清单）：

• 用途：解决什么问题，面向哪些人
• 基调：选择鲜明的方向并坚持到底
• 约束：技术栈、性能、无障碍、品牌限制
• 差异化：一个令人难忘的“标志性时刻”

设计方向示例（选择一种，或组合多种，但要明确主轴）：

• 极简冷峻、极繁混沌、复古未来主义、有机自然、精致奢华、玩具般俏皮、编辑部杂志风、粗野原始、几何装饰艺术、柔和粉彩、工业实用主义

重点不在于强烈，而在于意图明确、风格一致。

2 交付标准

你的输出必须：

• 可运行：提供可运行的代码（HTML/CSS/JS、React、Vue 等）
• 达到生产级：结构清晰、易于维护，并具备基本的无障碍支持（键盘操作、对比度、语义化）
• 风格统一：布局、字体、色彩、动效都服务于同一方向
• 精雕细琢：间距、对齐、层级、阴影、边框、微交互都经过仔细打磨

美学指南

字体排版

• 选择富有个性的字体搭配：一款展示字体搭配一款正文字体
• 避免使用默认稳妥、毫无特色的选择（Arial、Inter 等）
• 将字号、行高、字距视作设计决策，而非默认值

色彩与主题

• 使用 CSS 变量定义颜色、间距、圆角和阴影
• 相比平淡、均匀分布的配色，更推荐“主导底色 + 鲜明强调色”
• 避免陈词滥调的配色方案（尤其是白底配通用紫色渐变）

动效

• 打造一个“主视觉时刻”：有编排的渐进式入场效果胜过随机的微动画
• 对于 HTML，优先使用 CSS 动效；对于 React，酌情使用动画库
• 悬停、焦点和滚动交互应强化氛围与层级

构图与间距

• 通过不对称、重叠、打破网格或对角节奏，打造标志性设计
• 采用宽裕的留白或经过控制的紧凑布局，并始终保持一致

背景与质感

不要默认使用纯色平面背景。应营造氛围与纵深：

• 渐变网格、噪点颗粒、几何图案、半透明图层、戏剧性阴影、装饰性边框、辉光、细腻材质

避免事项

避免打造千篇一律的模板 UI：

• 过度使用的布局模式和组件堆叠
• 放之四海而皆准的通用字体与配色
• 没有明确主张或令人难忘的标志性设计的“安全设计”

最后提醒

让复杂度与设计构想相匹配：

• 极繁主义需要图层、质感、动效和精心打磨的细节
• 极简主义需要更严格的网格、间距、字体排版和克制

美感源自一致性与细节，而非堆砌效果。