frontend-ui-system — 前端UI系统

前端 UI 系统目的 本技能旨在使代理设计和实现具有更高视觉和结构水平的用户界面，而不是一般的 UI。目标不仅是产生功能代码，目标是产生一个界面：干净、现代、连贯、商业、可用、视觉层次、可重用、组件级、成长为真正的产品。 参考思维方式是更接近产品设计师 + 前端工程师的标准，而不是简单的 JSX 或 HTML 生成器。 基本原则 在没有足够的视觉清晰度之前，不要编写代码。设计不是装饰，设计是结构、层次、意图、清晰和系统。每个视觉决策都应有功能性原因。 主要目标 当用户请求应用程序、网站、着陆页、仪表盘、屏幕或视觉改进时，本技能应帮助产生一个结果： 从第一版开始看起来更好 默认具有更好的视觉品位 避免通用或混乱的布局 保持屏幕之间的一致性 使用清晰的视觉系统 正确实现前端，而不仅仅是美化它 何时使用此技能 使用此技能，当用户请求以下内容： 设计应用程序 重新设计屏幕 改进 UI 创建着陆页 构建仪表盘 创建现代网站 创建高级界面 改进前端 创建移动优先应用程序 改进 UX/UI 创建视觉一致的组件 将基本界面转换为更现代和商业化的界面 也可以使用此技能，当用户说出模糊的短语，如： “让它看起来更现代” “让它看起来更高级” “让它看起来更干净” “看起来太基本了” “想要看起来专业” “想要看起来像真正的产品” “让它像严肃的应用程序一样” “想要漂亮的 UI” 预期结果 此技能应使代理： 在编码之前思考 提出视觉方向 记录小型设计系统 定义屏幕架构 使用可重用的组件实现 检查视觉层次、间距和一致性 如果结果仍然看起来通用或松散，则迭代。 第 0 阶段：初始诊断 在设计或实现之前，回答以下问题： 基本问题 是什么类型的产品？ 移动应用程序 Web 应用程序 着陆页 仪表盘 电子商务 SaaS 内部平台 管理系统 机构网站 用户是谁？ 消费者 企业 专业人士 年轻人 技术人员 管理员 最终客户 操作人员 用户的主要动作是什么？ 购买 预订 注册 探索 咨询 创建内容 上传信息 查看指标 管理数据 安排 确认操作 产品应传达什么样的个性？ 高级 可靠 现代 友好 技术 企业 年轻 沉稳 创新 运动 优雅 上下文的优先级是什么？ 转化 清晰 速度 信任 易用性 信息密度 探索 移动优先 桌面优先 规则 在没有明确的视觉方向之前，不要进行实现。 第 1 阶段：视觉方向 强制规则 如果没有完全定义的视觉方向，提出 2 或 3 个不同的视觉风格，然后进行实现。 视觉提案格式 对于每个风格，记录： 风格 [字母]："[概念名称]" 概念：1 行描述 调色板：主要颜色 + 中性色 + 强调色 字体：字体家族和个性 个性：3 个形容词 优势：为什么会有效 风险：如果过度强调可能会发生什么 示例结构 风格 A： "企业信任" 概念：专业、严肃、可靠 调色板：海军蓝 + 灰色 + 白色 + 强调色 字体：Inter 个性：可靠、企业、清晰 优势：传达安全感 风险：可能会感到有些通用 风格 B： "现代极简" 概念：干净、现代、高级 调色板：柔和黑色 + 白色 + 中性灰色 + 青柠绿或深蓝色 字体：Geist / Inter / Plus Jakarta Sans 个性：现代、高级、技术 优势：优雅且适应性强 风险：如果过度强调，可能会显得空虚 风格 C： "友好产品" 概念：易于接近、现代 调色板：友好色调与干净中性色 字体：Plus Jakarta Sans / Manrope 个性：易于接近、温暖、现代 优势：与用户有很好的亲和力 风险：在某些情况下可能会失去严肃性 强制推荐 标记一个推荐并解释为什么它最适合产品、用户和主要操作。 第 2 阶段：小型设计系统 一旦选择了视觉方向，记录一个小型设计系统，然后进行编码。 2.1 颜色令牌 定义以下最少令牌： 令牌 使用 主要 品牌、主要 CTA、焦点 主要前景 文本在主要上 背景 主要背景 前景 文本主要 卡片 卡片背景 卡片前景 文本在卡片上