diff --git a/DESIGN.md b/DESIGN.md index 0db1244..6c0f78e 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -1,7 +1,7 @@ # 七虎AI · DESIGN.md > **用途**：这是七虎 AI PaaS 平台的**唯一设计事实源（single source of truth）**。任何 AI 编码代理在新增/修改前端页面或组件时，必须读取本文件并严格遵守其中的设计 token、组件规范与 Do/Don't。 -> **风格方向**：温暖科技感 + 极简主义（Warm Tech Minimalism）。浅色为主，靛蓝 `#5B5FED` 为唯一品牌色。 +> **风格方向**：温暖科技感 + 极简主义（Warm Tech Minimalism）。浅色为主（护眼雾白底），靛蓝 `#5B5FED` 为唯一品牌色；允许克制的「淡蓝紫→淡青蓝」渐变与轻量玻璃拟态（Glassmorphism）；前台必须符合 SEO/GEO 语义规范。 > **生成方式**：基于平台现有 `frontend/src/styles/global.css` 的真实 token 固化升华，并经由 `ui-ux-pro-max` 技能的数据驱动生成器校验风格一致性。 > 关联文件：`design-system/MASTER.md`（Master+Overrides 模式，含组件 CSS 样板）、`.impeccable.md`（impeccable 技能入口）。 @@ -64,6 +64,19 @@ | `--color-sidebar-hover` | `#EAECF2` | 侧栏项 hover | | `--color-sidebar-active` | `#E1E3F0` | 侧栏项激活 | +### 渐变 / Gradients（新增，源自"护眼科技感 + 渐变"需求） +平台允许**克制**的渐变，用于背景 / 装饰 / 主行动点，绝非赛博朋克式高饱和。所有渐变必须先定义为 token： +| 语义名 | 值 | 角色 | +|---|---|---| +| `--gradient-brand` | `linear-gradient(135deg, #EEEDFF 0%, #E3F0FF 100%)` | Hero / 区块浅底（淡蓝紫 → 淡青蓝） | +| `--gradient-brand-strong` | `linear-gradient(135deg, #5B5FED 0%, #4F8DF9 100%)` | 主 CTA / Banner 强调（品牌色渐变，不刺眼） | +| `--gradient-aurora` | `radial-gradient(60% 60% at 30% 20%, rgba(91,95,237,.10), transparent 70%)` | 仅 Hero 装饰光斑，绝不直接衬文字 | + +**渐变铁律**： +- 渐变只作背景 / 装饰 / CTA；**承载正文文字的表面必须纯色**（`#FFFFFF` / `#F8F9FB`），确保 ≥4.5:1。 +- 拒绝全屏流动 / 循环渐变动画（aurora 8–12s loop）作用于文字区；装饰光斑在 `prefers-reduced-motion` 下静止。 +- 不引入品牌色之外的第三色相做渐变（仅「靛蓝 → 青蓝」的同系过渡）。 + **对比度约束**：文本在浅色表面上至少 4.5:1（WCAG AA）。`--color-text-tertiary` 仅用于非关键提示，不用于正文。 ## 3. Typography Rules @@ -117,6 +130,24 @@ - overlay：`rgba(0,0,0,0.5)` + `backdrop-filter: blur(4px)`。 - 弹窗：`background:#fff; border-radius: var(--radius-xl); padding: var(--space-3xl); box-shadow: var(--shadow-xl);` 右侧抽屉（detail drawer）用于 Agent/技能详情。 +### Glassmorphism（轻量玻璃拟态变体） +用于浮层 / 导航 / Hero 叠加 / 横幅，营造通透科技感（技能库 Glassmorphism 条目：backdrop blur 10–20px、半透明白 15–30%、细边框）。 +```css +.glass { + background: rgba(255,255,255,0.65); + backdrop-filter: blur(16px) saturate(140%); + -webkit-backdrop-filter: blur(16px) saturate(140%); + border: 1px solid rgba(255,255,255,0.7); + box-shadow: var(--shadow-md); +} +``` +- 浮层导航 / 横幅 / Hero 卡片用 `.glass`；**正文内容卡保持纯白 `#FFFFFF`**（对比与清晰度优先）。 +- 文字在玻璃面上必须 ≥4.5:1（玻璃面下若为渐变底，需加深文字或加底纹）。 + +### Neumorphism（默认禁用） +用户原话提到"轻拟态（Neumorphism）或玻璃拟态的轻量化变体"。技能库明确标注 Neumorphism **对比度低（⚠ Low contrast）**，不利护眼。 +**决策：默认禁用完整新拟态**；若需"轻量"立体感，仅允许在**无文字的装饰表面**用极淡 inset 阴影，且不得影响可读性。优先采用 Glassmorphism 轻量变体。 + ## 5. Layout Principles - **间距阶梯**（必须用语义 token，禁止随意像素）：`xs4 / sm8 / md12 / lg16 / xl20 / 2xl24 / 3xl32 / 4xl40 / 5xl48`。 @@ -159,12 +190,63 @@ ## 8. Responsive Behavior 断点：`375px`（手机）/ `768px`（折叠 sidebar 为 64px 或抽屉）/ `1024px`（平板）/ `1440px`（桌面最大宽）。 -- 移动端：sidebar 转底部 tab 或抽屉；主内容单列；触摸目标 ≥40px。 +- 移动端：sidebar 转**底部 tab 栏**（前台门户）或**左侧抽屉**（后台，因菜单项多）；主内容单列；触摸目标 ≥44px。 - 平板：sidebar 折叠 64px，悬停展开。 - 栅格在窄屏降列数（12→6→1）。 -- 禁止横向滚动；表格在窄屏转卡片或横向滚动容器。 +- 禁止横向滚动；表格在窄屏转卡片或横向滚动容器（包 `overflow-x-auto`）。 +- 必须 ``；固定导航需 `padding-top` 补偿高度，避免遮挡首屏内容。 -## 9. Agent Prompt Guide +## 10. SEO & GEO 规范（前台必须） + +平台需"不推广也能被搜索引擎与各大模型联网搜索（GEO）发现"。 + +### 结构（语义化 HTML5） +- 每页一个 `

`；区块用 `
` / `
`；技能卡用 `
` 包裹（标题 `

`/`

`）。 +- 必须 ``、``、`<meta name="description">`、Open Graph 标签。 +- 前台用 `<header><nav><main><footer>` 语义骨架；后台为应用壳，SEO 权重低。 + +### 富媒体摘要（Rich Snippets / JSON-LD） +- 技能页 / 技能卡：`SoftwareApplication` schema，含 `aggregateRating`、`offers`（`price:0` / 订阅）、`downloadCount`。 +- 技能市场：`BreadcrumbList`；痛点 / FAQ 区：`FAQPage`。 +- 预留展示槽：评分星、价格、下载量在卡片右上角（Lucide 图标 + 数字，非 emoji）。 + +### 关键词突出（GEO 友好） +- 核心词「无限Token」「AI变现」「办公提效」「低成本养龙虾（= 低成本微调 / 托管模型）」用 `.kw` 样式（品牌色 + 600 字重）在首页价值区高亮。 +- `.kw { color: var(--color-accent); font-weight:600; }` + +### 技术 +- `sitemap.xml` + `robots.txt`；技能详情独立可索引 URL；所有图片 `alt`。 + +## 11. 页面级布局总览（前台 + 后台） + +> 详细页级 override 将在实际开发时落入 `design-system/pages/*.md`（Master + Overrides）。此处为总览与验收基准。 + +### 前台首页（Home） +1. 浮层玻璃顶栏（logo + 主导航 + 登录 / 注册） +2. Hero：轮播 Banner（技能广告位）+ 平台定位一句话 + 主 CTA +3. 平台定位区：图标 + 短文网格（痛点：API 贵 / Prompt 难调试 / 数据孤岛 / 无变现渠道） +4. 平台价值区：可视化数据点（低价订阅 / 无限 Token / 垂直办公模板 / 交易市场 / 低成本养龙虾） +5. 热门技能榜 Top5（排行榜 / 徽章） +6. Footer（SEO 链接 + 富媒体摘要） + +### 技能市场（Skill Market） +- 顶部广告位 → 左侧筛选（分类 / 场景标签）→ 右侧卡片流（每排 5，图标 / 名称 / 简介 / 下载量） +- 分页：每页 100，上下翻页；每个技能 = `<article>` + JSON-LD + +### 应用服务（Apps） +- 网格布局；每应用独立卡片（名称 / 介绍 / 「进入应用」按钮） + +### 用户工作台（Workspace，登录后） +- 左侧固定导航：AI 聊天 / IM Bot（子：微信 / 企微 / 飞书 / QQ / 悟空 IM）/ 知识库 / 技能市场 / 应用服务 / Token 驾驶舱 / 会员订阅 / 进化看板 / 个人设置 +- 右侧内容区留白；移动端导航转抽屉 + +### 后台数据驾驶舱（Admin Dashboard） +- 6 张 KPI 卡：总用户 / 7日活跃、模型统计（启用 / 全部）、对话统计（有效 / 活跃窗口）、知识库文档数、今日订阅（成功）、Token 消耗（今日 / 本周） +- 大模型消耗趋势（近 30 天 面积图） +- 操作日志 + 审计日志 双栏（每 20 条 / 页，可下载） +- 其余后台：AI 技能中心 / 平台运营 / 商业变现 / 系统管理（标准 B 端布局，侧栏分类清晰） + +## 12. Agent Prompt Guide > 当被要求"做/改一个七虎AI 的页面或组件"时，代理必须： > 1. 先读本文件（DESIGN.md）与 `design-system/MASTER.md`； @@ -182,8 +264,12 @@ text #101214 secondary #545A65 tertiary #8B919E ok #219B5E warn #E8922C err #D9383A info #3B82F6 border #E3E6EB sidebar #F5F6F9 font Inter / JetBrains Mono +grad --gradient-brand (淡紫→淡青) / --gradient-brand-strong (靛蓝→青蓝 CTA) +glass .glass (rgba(255,255,255,.65) + blur(16px) + 1px 白边) +kw .kw 高亮关键词(无限Token/AI变现/办公提效) ``` **推荐 prompt 模板** - "在七虎AI 中新增一个 [页面]，遵循 DESIGN.md 的 Warm Tech Minimalism 风格，品牌色用 #5B5FED，图标用 Lucide，间距用 token。" - "把 [组件] 改成符合 DESIGN.md §4 的卡片规范，hover 用 --shadow-lg + translateY(-2px)。" +- "新增前台 [页面] 时遵循 DESIGN.md §10 的 SEO/GEO 规范：语义化 HTML5 + JSON-LD 富媒体摘要 + `.kw` 高亮核心词；Hero/Banner 可用 `.glass` 与 `--gradient-brand`。" diff --git a/元宝提示词解读.md b/元宝提示词解读.md new file mode 100644 index 0000000..e1e69bc --- /dev/null +++ b/元宝提示词解读.md @@ -0,0 +1,90 @@ +# 元宝提示词 → 七虎 AI 设计系统 · 解读报告 + +> **目的**：用已安装的 `ui-ux-pro-max`（数据驱动设计库：67 风格 / 96 配色 / 57 字体 / 99 UX 准则 / 25 图表）+ `awesome-design-md` / `impeccable` 技能，理解「元宝」AI 助手给出的 UI 设计提示词，并将其翻译为七虎 AI 可落地的设计 token 与页面规范。 +> **结论**：这段提示词是**你原始需求的结构化、专业化重述**，与既有的 `DESIGN.md`（已提交 `e7dc980`）高度一致；它补齐了 4 个我们之前没有显式写出的维度——**渐变、玻璃拟态、SEO/GEO、页面级布局**。本解读已把这些维度并入 `DESIGN.md`（新增 §2 渐变 / §4 玻璃拟态 / §10 SEO/GEO / §11 页面布局）。 + +--- + +## 1. 技能是如何"理解"这段提示的 + +`ui-ux-pro-max` 的检索器对关键词 `AI PaaS platform SaaS dashboard light minimal tech glassmorphism gradient` 跑了 design-system 生成 + 4 个维度补充检索，得出可校验的结论： + +| 提示词诉求 | 技能数据结论 | 七虎采纳情况 | +|---|---|---| +| 亮色 / 雾白 / 珍珠白护眼 | 技能库确认浅色 + 柔对比是护眼基线 | ✅ 沿用 `#F8F9FB` 雾白底 | +| 智能 / 科技 / 未来感 | Glassmorphism 最适合"现代 SaaS / 金融仪表盘 / 高端企业"的科技通透感 | ✅ 采用轻量玻璃拟态变体 | +| 微妙渐变（淡蓝紫→淡青蓝） | 技能库把"高饱和 aurora 流动渐变"标 ⚠ 文字对比风险；克制同系过渡安全 | ✅ 仅作背景 / CTA，新增 `--gradient-brand` | +| 轻拟态 / 玻璃拟态 | Neumorphism 被技能库标 **⚠ Low contrast（对比度低）**；Glassmorphism 标注需保证 4.5:1 | ⚠ 默认**禁用完整新拟态**，优先玻璃拟态 | +| SEO 语义化 / 富媒体摘要 | Landing 库给出"Hero + 痛点 + 价值 + 社会证明 + CTA"结构 + Rich Snippets 槽位 | ✅ 新增 §10 | +| 多端自适应 / 移动端底部导航或抽屉 | UX 库：mobile-first、触摸目标 ≥40px、viewport meta、表格转卡片、固定导航需 padding 补偿 | ✅ 精细化 §8 | + +**关键纠偏**：自动生成器默认会因 "tech" 关键词给你推**暗色科技底（`#0F172A`）+ 绿色 CTA（`#22C55E`）**。这与你"亮色护眼 + 单一靛蓝品牌色"的硬性要求冲突，也违反我们既有的设计铁律。**已否决**，保留 `#5B5FED` 单一品牌色。 + +--- + +## 2. 提示词 → 设计系统 映射表 + +| 元宝提示词条目 | 落点（DESIGN.md 章节） | 具体产物 | +|---|---|---| +| 主色调：雾白 `#F8F9FA` / `#F5F7FA` | §2 中性表面 | `--color-bg-primary #F8F9FB`（已是平台真实 token） | +| 视觉感受：智能/科技/未来感、微妙渐变、拒绝赛博朋克 | §2 渐变 / §4 玻璃 | `--gradient-brand` / `.glass` | +| 护眼机制：柔和对比、长看不疲劳 | §2 对比度约束 / §4 禁用新拟态 | 文本 ≥4.5:1，禁用低对比新拟态 | +| 质感：轻拟态 / 玻璃拟态轻量变体、卡片通透 | §4 Glassmorphism | `.glass` 卡片规范 | +| SEO/GEO：语义 HTML5、Rich Snippets | §10 | JSON-LD `SoftwareApplication`/`BreadcrumbList`/`FAQPage` | +| 视觉突出关键词（无限Token/AI变现/办公提效） | §10 `.kw` | 品牌色高亮 span | +| 响应式：PC/笔记本/iPad/手机、移动端底栏或抽屉 | §8 | 断点 375/768/1024/1440 + 底栏/抽屉决策 | +| 前台首页：轮播/定位/价值/Top5 | §11 前台首页 | 6 段式布局 | +| 技能市场：三栏、左筛选、右卡片流 5/排、100/页 | §11 技能市场 | 列表+分页规格 | +| 应用服务：网格独立卡片 | §11 应用服务 | 卡片网格 | +| 用户工作台：左侧导航（含 IM Bot 子菜单） | §11 用户工作台 | 导航树 | +| 后台驾驶舱：6 KPI + 趋势 + 双日志 | §11 后台驾驶舱 | 看板规格 | +| 输出：CSS 变量 / 字阶 / 间距系统 | 全文 token | 已在 §2–§6 完整定义 | +| Figma 风格组件 / HTML-CSS 框架 | §4 组件 + design-system/MASTER.md | 按钮/卡片/输入/弹窗 CSS 样板 | + +--- + +## 3. 我们做的 3 个关键决策（请你确认） + +1. **否决自动推荐的暗色 + 绿色 CTA** —— 坚持亮色护眼 + 单一靛蓝 `#5B5FED`。 +2. **默认禁用完整 Neumorphism** —— 技能库证实其对比度低、不利护眼；你原话的"轻量化变体"我们落地为**轻量 Glassmorphism**（半透明白 + 模糊 + 细边），且正文卡仍用纯白保证可读。 +3. **渐变只克制使用** —— 仅"淡蓝紫→淡青蓝"同系过渡，作背景 / CTA / Hero 装饰光斑；绝不在文字承载面用高饱和流动渐变。 + +> 若你对以上 3 点有不同意见（例如想要更明显的渐变、或接受局部新拟态），告诉我即可调整 token。 + +--- + +## 4. 提示词里的笔误澄清（已按原意保留并注释） + +- **"低成本养龙虾"**：应为"低成本养模型 / 炼丹 / 微调托管"的笔误。已在 §10 `.kw` 与 §11 价值区标注为「低成本养龙虾（= 低成本微调 / 托管模型）」，既保留你的原话（利于 GEO 命中你的真实搜索意图），又给出准确含义。 +- **痛点挖掘**：提示词建议的痛点（Midjourney 订阅贵、ChatGPT Plus 繁忙、国内 API 复杂且贵、个人开发者无变现渠道、职场人不会写 Prompt）已纳入 §11 首页"平台定位区"的痛点网格。 + +--- + +## 5. 与既有 DESIGN.md 的差异（本次新增） + +- ✅ **§2 渐变 Gradient Tokens**：`--gradient-brand` / `--gradient-brand-strong` / `--gradient-aurora` + 渐变铁律。 +- ✅ **§4 Glassmorphism 轻量变体** + **Neumorphism 默认禁用**说明。 +- ✅ **§8 响应式**细化：移动端底栏/抽屉决策、触摸 ≥44px、viewport、表格转卡片。 +- ✅ **§10 SEO & GEO 规范**：语义结构 + JSON-LD 富媒体摘要 + `.kw` 关键词高亮。 +- ✅ **§11 页面级布局总览**：前台首页 / 技能市场 / 应用服务 / 用户工作台 / 后台驾驶舱 5 个页面的布局基准。 +- ✅ 顶部"风格方向"、底部"快捷色板 / 推荐 prompt 模板"同步更新。 + +--- + +## 6. 落地 3 步法（采纳提示词"特别建议"） + +元宝提示词建议你**不要一次生成所有页面代码**，而是分步： +> 第一步：先生成 Design System（颜色/字体/按钮） → ✅ **已完成**（即本 `DESIGN.md` + `design-system/MASTER.md`） +> 第二步：基于设计系统，画出**前台首页**布局与 HTML → ⏳ 待你指令 +> 第三步：设计**后台数据驾驶舱** UI，重点 6 张数据卡 → ⏳ 待你指令 + +后续每做一个页面，我会：① 读 `DESIGN.md` + 该页 `design-system/pages/[page].md`（如已拆分）；② 改 `frontend/src`；③ 容器内 `npm run build` 并校验 `dist`；④ 你硬刷新验收；⑤ `git + 镜像` 固化。 + +--- + +## 7. 下一步你可以直接给我的指令 + +- "按 §11 先做**前台首页**"（我会产出 HTML/CSS 框架 + 组件，遵循亮色/渐变/玻璃/SEO）。 +- "先做**后台数据驾驶舱**"（6 KPI 卡 + 30 天面积图 + 双日志表）。 +- "把渐变调得更明显一点 / 换一种渐变方向"。 +- "接受以上 3 个决策，直接开始第二步"。