初始化

docs/guides/ui-specs.md

@@ -0,0 +1,47 @@
+# 🎨 UI Specifications
+
+> 通用 UI 设计规范。具体以 `ui-specs-user.md`（用户端）和 `ui-specs-admin.md`（管理端）为准。
+
+---
+
+## 设计系统
+
+| 维度 | 用户端 (Case-Database-Frontend-user/) | 管理端 (Case-Database-Frontend-admin/) |
+|---|---|---|
+| **组件方案** | Tailwind CSS + 自定义组件 | Element Plus + Tailwind CSS |
+| **图标** | Lucide Icons | @element-plus/icons-vue |
+| **字体** | 系统字体栈 (system-ui) | 系统字体栈 (system-ui) |
+| **设计风格** | 品牌化、轻量、视觉吸引力 | 专业、实用、信息密度高 |
+| **响应式** | 移动优先 (xs → xl) | 桌面优先 (≥ 1280px) |
+
+## 间距
+
+使用 Tailwind 默认间距 (4px 基准):
+- 紧凑: `gap-2` (8px)
+- 标准: `gap-4` (16px)
+- 宽松: `gap-6` (24px)
+- 区块: `gap-8` (32px)
+
+## 响应式断点
+
+| 断点 | 宽度 | 说明 |
+|------|------|------|
+| sm | 640px | 大手机 |
+| md | 768px | 平板 |
+| lg | 1024px | 小桌面 |
+| xl | 1280px | 桌面 |
+| 2xl | 1536px | 大屏 |
+
+## 视觉还原流程
+
+当提供设计稿截图时:
+1. 确认目标前端（用户端 or 管理端）
+2. 分析颜色、间距、字体
+3. 识别组件层级
+4. 用户端：使用 Tailwind CSS 还原；管理端：优先使用 Element Plus 组件
+5. 注意细节: 阴影、圆角、边框
+6. 如不确定，列出选项询问
+
+---
+
+*最后更新: 2026-02-26*