frontend-designlisted

# Frontend Design Skill 此技能指导创建独特的生产级前端界面，避免平庸的"AI 粗糙"美学。实现真正可用的代码，并高度关注美学细节和创意选择。 ## When to Use This Skill 使用此技能当用户请求： - 构建 Web 组件、页面或完整应用程序 - 创建着陆页、仪表盘或营销页面 - 设计 React、Vue 或原生 HTML/CSS 界面 - 美化或重新设计现有的 Web UI - 创建海报、素材或视觉设计元素（用于 Web） - 需要高设计品质和独特美学的任何前端项目 **关键触发词**: Web 组件、页面、应用、网站、着陆页、仪表盘、React 组件、HTML/CSS、UI 设计、美化、前端 ## 核心原则 在编写代码之前，必须进行深入的设计思考。每个界面都应该是独特的、有意图的、令人难忘的。 ### 设计思维流程 在实现任何代码之前，回答以下问题： #### 1. 目的 (Purpose) - **问题**: 此界面解决什么问题？ - **用户**: 谁使用它？在什么情境下使用？ - **目标**: 用户需要完成什么任务？ #### 2. 风格方向 (Style Direction) 选择一个**明确且大胆**的美学方向。不要选择"现代简约"这样的通用描述，而是选择极致的风格： **风格选项**（但不限于这些）： - **极简主义**: 极度克制，大量留白，精准排版 - **极致混乱**: 密集布局，重叠元素，视觉冲击 - **复古未来主义**: 80年代霓虹色，网格，��成波风格 - **有机/自然**: 流动形状，自然色调，柔和曲线 - **奢华/精致**: 优雅字体，金色点缀，精细细节 - **俏皮/玩具感**: 明亮色彩，圆角，趣味动画 - **编辑/杂志风格**: 大胆排版，网格系统，黑白为主 - **粗犷/原始**: 单色，硬边，实用主义 - **装饰艺术/几何**: 对称图案，几何形状，高对比度 - **柔和/粉彩**: 温和色彩，渐变，梦幻感 - **工业/实用**: 系统字体，单色，功能优先 - **新拟态**: 柔和阴影，浮雕效果，微妙深度 - **玻璃态**: 模糊背景，透明度，光感 **关键**: 选择清晰的概念方向并精准执行。大胆的极致主义和精致的极简主义都有效——关键在于**意图**，而不是强度。 #### 3. 技术限制 (Constraints) - 使用什么框架？（React, Vue, 原生 HTML/CSS） - 性能要求？（动画复杂度，文件大小） - 可访问性要求？（ARIA 标签，键盘导航，色彩对比度） - 浏览器兼容性？ #### 4. 差异化 (Differentiation) - **记忆点**: 是什么让它令人难忘？ - **独特性**: 用户会记住哪一个细节？ - **惊喜**: 哪里会让用户眼前一亮？ ## 前端美学指南 ### 1. 排版 (Typography) **原则**: 字体选择是设计的灵魂。 **Do**: - ✅ 选择**独特且有个性**的字体 - ✅ 标题使用引人注目的字体，正文使用易读字体 - ✅ 尝试意想不到的字体配对 - ✅ 使用字体变体（font-weight, font-style）创造层次 - ✅ 精确控制字间距（letter-spacing）和行高（line-height） **Don't**: - ❌ 使用通用字体：Arial, Helvetica, Inter, Robot