用途：这是 RAPID 前端的 UI/CSS 设计模式与组件速查参考，用于在开发中保持视觉一致性。
主要能力：
- 动作层级与颜色语义：给出动作类型与按钮变体的对应关系，如提交/创建用 primary 且 outline=false，取消/返回用 primary 且 outline=true，删除用 danger，替代操作用 secondary，UI 切换用 text，行内操作用 text + size="sm"，表格操作用 outline=true。核心模式为描边 primary 表示取消/关闭，填充 primary 表示提交/创建。
- 颜色映射：列出 primary、secondary、success、danger、warning、info 对应的具体色值（如 aws-sea-blue-light、aws-aqua、aws-lab、red-500、yellow-400、aws-font-color-blue 等）。
- 五步颜色决策流程：识别动作语境、评估视觉层级、考虑后果、遵循既有模式（可用 grep -r "variant=" frontend/src/features/{similar-feature}/ 查找）、验证。
- 反模式：同一视图多个填充 primary 按钮、可逆操作用填充 danger、取消/关闭用 primary。
- 状态与反馈颜色：Toast 成功用 success、错误用 error；状态徽章 PENDING=黄、PROCESSING=蓝、DETECTING=紫、COMPLETED=绿、FAILED=红；评审结果 UNDER_REVIEW=蓝、PASS=绿、NOT_PASS=红、LOW_CONFIDENCE=黄、USER_OVERRIDE=AWS 蓝。
- 间距与排版：8px 基准（gap-2、gap-4、p-4、p-6），页面容器 max-w-7xl mx-auto px-4 py-8，标题 text-3xl font-bold，正文 text-sm/text-base，深色模式成对写法。
- 组件放置原则与交互元素可供性：动作靠近其语境；仅 cursor-pointer 不够，元素在悬停前就应看起来可交互；条件 UI 使用平滑过渡。
- 组件规则：创建新组件前先查 src/components/；不用原生 button，改用 Button 组件；不用原生 alert()/confirm()，改用 useAlert hook；始终使用 react-icons（禁止 SVG）；颜色始终搭配图标或文字以保障可访问性。
- 组件速查表：列出 Button、FormTextField、FormTextArea、FormFileUpload、Modal、useAlert、PageHeader、Table、StatusBadge、Skeleton、Pagination、ErrorAlert、InfoAlert、Breadcrumb、SegmentedControl、Tooltip 及其关键 props。
使用方式：作为前端开发时的速查参考，按上述规则选择按钮变体、颜色、间距与组件。常见布局实现（页面布局、网格、表单、模态、Toast）见 references/LAYOUT-PATTERNS.md。
适用场景：RAPID 前端界面开发与评审，需要统一视觉与交互规范时。
限制：资料未提供安装命令、依赖版本、平台支持范围及收费信息。