02-listed

# 设计规范 — UI/UX 标准应用库 > **定位：** 这不是建议，是强制标准。所有 AI 输出的 UI 代码必须符合这套规范。 > **数据来源：** Material Design 3 / Ant Design 5 / Tailwind CSS / Apple HIG / Shopify Polaris / IBM Carbon / shadcn-ui --- ## 开发 UI 时的必读流程 ### 第一步：确认基础参数 → 读取 `DesignTokens-标准值.md`（间距/字体/颜色/圆角/阴影/按钮尺寸/z-index） - 所有数值必须从这个文件取，不允许凭感觉写 ### 第二步：确认交互模式 → 读取 `交互模式-完整版.md`（表单/导航/弹窗/Toast/数据展示/响应式/反馈） - 每种交互有标准方案和精确 Tailwind 类，直接复用 ### 第三步：确认动效 → 读取 `动效标准库.md`（缓动/时长/入场/滚动/悬停/加载/页面转场/keyframes） - 每种动效有 Framer Motion 和 Tailwind 代码，直接复制 ### 第四步：质量自检 ★ 必须执行 → 读取 `质量自检清单.md` - P0 项全部通过才能交付 - 常见违规：按钮过大、没有 hover、没有 loading、顶格摆放 ### 补充参考（按需） - 选库选型 → `UI选型标准.md` - 项目布局 → `布局模式/` 对应文档 - 基础交互 → `交互模式/` 对应文档（简版，完整版见 `交互模式-完整版.md`） - 配色 → `色彩和字体.md`（60/30/10 配色 + 对比度速查） - 无障碍 → `无障碍规范.md`（WCAG 2.1 AA 完整清单） - 品牌写作 → `写作和品牌规范.md` - **品牌 logo / wordmark / favicon / brand mark → `品牌视觉/`**（含 Anthropic/Stripe/Vercel/Cohere 真实 SVG 拆解、商业级标准、反模式清单、构造方法论、SVG 技术手册、品牌 brief 模板、质量门禁。**做 logo 之前必读**，否则会重蹈业余覆辙） - 设计系统 → `DESIGN-SYSTEM.md` - 设计执行标准 → `UI_DESIGN_STANDARD.md` --- ## 核心铁律（始终生效，不读详细文档也必须遵守） ### 尺寸铁律 ``` 按钮高度：admin h-8(32px)~h-9(36px) / landing h-9~h-10(40px) / Hero CTA h-12(48px) 最大 按钮文字：text-sm (14px)，禁止 text-base 或更大 按钮宽度：inline-flex，禁止 w-full（登录页除外） 输入框：与按钮等高 触摸目标：移动端 ≥ 44×44px ``` ### 间距铁律 ``` 基础单位：4px grid 标准值：p-1(4) / p-2(8) / p-3(12) / p-4(16) / p-6(24) / p-8(32) / p-12(48) 页面边距：px-4(移动) / px-6(平板) / px-8(桌面) 区块间距：py-12 ~ py-24 禁止：随意数值如 p-[13px]、p-[17px] ``` ### 动效铁律 ``` 用户触发动画 ≤ 300ms 最长动画 ≤ 500ms（Hero 特效除外） 所有可交互元