---
title: 前端视觉设计原则
description: Lark 设计系统下的视觉/交互/可访问性原则与检查清单，供 frontend-main 技能引用。
---

# 设计系统即契约
- 单一事实来源：`./design-system-standards.md`（Lark）。
- 所有颜色/渐变/阴影/字体必须来自设计系统；未定义时复用现有组件或提出更新建议，禁止硬编码新样式。

# 视觉策略
- 用层级、留白、网格、对比、排版节奏提升质感。
- 背景只用允许的浅色层次/装饰，不新增颜色。
- 动效以页面进入与分段揭示为主，数量/强度受控。

# 设计原则
- 核心理念：用户至上（简单一致、反馈明确）、效率优先（减少步骤、智能默认）、容错（防错、可撤销、友好提示）。
- 版式：亲密性/对齐/重复/对比，主次层级清晰。
- 交互：可见性、即时反馈、明确约束、一致性。
- 可访问性：键盘可达、焦点顺序、Escape 关闭弹窗；alt/aria/label 完整；对比度正文≥4.5:1，大字≥3:1。
- 响应式与触达：移动优先，逐级扩展；触摸友好（≥44x44px）。
- 视觉层次建议：字号 24/18/16/14/12；颜色层级主色>深灰>浅灰；间距层级 48/32/24/16/8。

# 输出与检查清单
- 输出可运行的 UI 代码与必要样式，兼容移动/桌面。
- 需要新增视觉规范时，先提出更新 `./design-system-standards.md` 建议。
- 检查：可用性（易理解/高效）、一致性（符合同一风格与交互）、可访问性达标、响应式合理。

# 禁止事项
- 使用 Lark 调色板之外的颜色。
- 自定义渐变、阴影、字体或圆角体系。