91 lines
7.0 KiB
Markdown
91 lines
7.0 KiB
Markdown
# 元宝提示词 → 七虎 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 个决策，直接开始第二步"。
|