frontend-design

name frontend-design description 创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。 license Complete terms in LICENSE.txt 本技能指导创建 独具一格、可交付生产 的前端界面，规避千篇一律的「AI 感」审美。在实现可运行代码的同时，对美学细节与创意选择给予充分关注。 用户会提供前端需求：要做的组件、页面、应用或界面，可能附带使用场景、目标用户或技术约束。 设计思维 动手写代码前，先理解上下文并 选定一个明确、大胆的美学方向 ： 目的 ：这个界面解决什么问题？谁在用？ 调性 ：选一个鲜明风格并贯彻到底，例如：极简克制、繁复张扬、复古未来、有机/自然、奢华精致、 playful/玩具感、编辑/杂志风、粗野/原始、装饰艺术/几何、柔和/马卡龙、工业/实用主义等。用这些作灵感，但最终要忠于你选定的那一套美学。 约束 ：技术条件（框架、性能、可访问性等）。 差异化 ：什么会让用户 过目不忘 ？你最希望被记住的那一点是什么？ 关键 ：选定清晰的概念方向并精准执行。大胆的繁复与克制的极简都成立——核心是 有意图 ，而不是单纯「够猛」或「够淡」。 在此基础上，用可运行代码（HTML/CSS/JS、Vue、React等）实现： 达到生产可用、功能完整 视觉上有冲击力、易被记住 整体统一、有明确的美学立场 细节经得起推敲 前端美学指南 重点把握以下维度： 字体与排版 选用 有辨识度、耐看、有趣 的字体，避免 Arial、Inter、思源黑体等「默认感」过强的选择。 用有性格的字体提升整体气质；可尝试非常规、带个性的字体组合。 标题用一款有表现力的展示字体，正文用一款清晰易读的字体 ，形成层次。 建立清晰的 字号与字重层级 （标题 / 小标题 / 正文 / 辅助说明），配合行高、字间距与留白。 色彩与主题 围绕一套 统一的色彩体系 ，用 CSS 变量管理，便于维护与主题切换。 主色明确 + 少量高对比强调色 ，比「平均分配」的配色更有力。 兼顾 无障碍 ：重要文字与背景对比度建议 ≥ 4.5:1（WCAG AA）；不要仅靠颜色传达信息，需配合形状、图标或文字。 动效与微交互 用动画营造反馈与氛围。纯 HTML/CSS 场景优先用 CSS 实现；React 项目可配合 Motion 等库。 集中做好少数高光时刻 ：例如一次精心编排的页面进入（错落出现、animation-delay）比零散的微动效更打动人。 适度使用滚动触发、悬停状态，让交互有惊喜感。 尊重用户偏好 ：通过 prefers-reduced-motion 媒体查询为「减少动效」用户提供静态或简化动效，不强制观看动画。 空间与版式 非常规布局 ：不对称、重叠、斜线走向、打破网格的元素。 留白（负空间） ：要么给足留白、营造呼吸感，要么刻意做高密度信息排布，二者都要有明确意图。 留白能引导视线、建立层次、减轻视觉疲劳；重要元素周围留白越多，注意力越集中。可尝试「比你以为需要的再多留 30% 空间」以提升品质感。 背景与视觉细节 用 层次与氛围 替代纯色块：渐变网格、噪点纹理、几何图案、半透明叠加、强烈阴影、装饰边框、颗粒叠加等，与整体风格一致。 根据场景选择：定制光标、细线、底纹等，增强情境感。 禁忌：避免「AI 通用审美」 不要 使用以下套路： 泛滥的字体：Inter、Roboto、Arial、系统默认字体堆砌。 陈词滥调的配色：尤其是白底 + 紫色/蓝色渐变。 机械的、模板化的布局与组件样式，缺乏与业务/场景相关的个性。 要在理解需求的基础上做 有创意的解读 ，做出让人感觉「是为这个场景专门设计」的选择。每次设计都应有差异：明/暗主题、字体、风格都可以变化， 不要 反复收敛到同一套常见组合（例如 Space Grotesk 等）。 实现复杂度与美学一致 重要 ：实现量要和美学目标匹配。 繁复/张扬 的风格：需要更完整的动效、层次和细节代码。 极简/克制 的风格：需要克制的代码、精确的间距、字体与细微对比，少即是多。 优雅来自 把选定的方向执行到位 ，而不是堆砌效果。 可访问性（WCAG 导向） 可感知 ：内容可被不同用户感知（色彩+形状/文字/图标等多通道）。 可操作 ：支持键盘、触控与指针，焦点顺序合理，使用 :focus / :focus-visible 等。 可理解 ：结构清晰，语义化 HTML（标题、链接、表单等），必要时用 ARIA 增强。 健壮 ：兼容主流浏览器与辅助技术；文本可放大（如 200%～400%）仍可用。 动效部分务必考虑 prefers-reduced-motion ，避免强制动画。 总结 在明确目的与调性的前提下，用 大胆、一致、有记忆点 的视觉与交互实现生产级前端。留白、层次、动效与可访问性共同支撑「既好看又好用」的界面。敢于做非常规选择，把一次设计做到让人过目不忘。