界面：网页

• 内容站｜内容消费：内容站、媒体展示站、个人主页
• 数据站｜数据分析：数据可视化/分析应用
• 工具站｜任务工具：Web App/小工具站、看板/驾驶舱（Dashboard）、后台管理系统（Admin/CMS）
• 协作站｜协作实时：协作/社交/实时应用，API 后端/服务
• 交易站｜交易商业：电商/交易站，落地页/营销站

思路/经验

1. 不一定是有了顶板栏才更好看，像是日历型的话可以加顶板栏，有些页面（个人CRM)不加顶板栏反而更美观

设计和实现

> 前端通用逻辑 ｜26-09-10 追加｜26-09-10 更新
1. 先考虑一个页面应该放几个视图（可以用 URL 视图来实现）

  1. 考虑逻辑切换，实现方式有两种：一种是页面内顶部切换栏，一种是内容中操作，目前更喜欢后者，把视图切换的入口藏到某个组件的某个按钮上
  2. 考虑 header 和 footer 设计，header 可以考虑“插画➕hero title➕简单线条”的形式，footer 可以考虑写一些可爱的话“左对齐的为中文，右对齐的为年份·英文”

2. 再考虑每个视图的容器/组件布局：顶部栏、KPI、日历图、详情面板
3. 接着考虑每个容器/组件的内部布局

  1. 逻辑：
    1. 下滑
    2. 悬停：气泡 
    3. 点击：下拉菜单、悬浮窗、抽屉、展开

    4. sticky：顶边栏、侧边目录栏
  2. 视觉：文本的字号和类型（flex/普通）、颜色、高度对齐情况、完整显示
4. 考虑不同大小浏览器的优化：移动端视图，半屏视图

> 让Agent 去重构或者开发一个内容站的 pipeline｜26-09-09 追加｜26-09-10 更新

## Step1：粗实现
1. 熟悉当前的“数据与业务规则”
2. 按需设计几套 UI。
3. 选一张 UI， 进行视觉反解，输出 UI 包（组件➕整体）➕“组件拆解和分阶段实现规范文档”
4. 根据上述产物给出初始提示词。
5. 找一个靠谱模型动工
   1. 第一部分是数据业务规则。
   2. 第二部分是UI包。
   3. 第三部分是“组件拆解和分阶段实现规范文档”。
   4. 第四部分是提示词

## Step2： 细调整
1. 先检查页面级逻辑：视图入口等
  - 页面标题｜侧边栏入口|顶部导航|底部栏
  - 视图切换与返回逻辑
  - URL 状态
2. 再检查页面级容器布局
  - 主列和侧列比例
  - KPI 与日历的上下关系
  - 详情面板的位置
  - 各看板的行列分布
  - 页面整体宽度、高度和留白
  - 底部 Footer 是否贴底
3. 再检查容器内部布局
  - 标题、图标、按钮是否同一行
  - 内容默认显示几条
  - 卡片内部上下左右对齐
  - 表格列宽
  - 分页位置
  - 统计信息的位置
  - 容器之间的间距
4. 文字与视觉参数
  - 字号
  - 字重
  - 行高
  - 字体颜色
  - 图标尺寸
  - 图标与标题间距
  - 卡片边框、圆角、阴影
  - 金额颜色和强调层级
5. 交互细节
  - 悬停显示什么
  - 点击是展开还是气泡窗
  - 是否显示完整内容
  - 截断文本如何处理
  - Popover 的位置和样式
  - 分页、切换、开关的反馈
  - 空状态和边界状态
6. 响应式与 Sticky
  - 移动端卡片顺序
  - 字号自适应
  - 容器间距
  - 横向溢出
  - 侧边栏展开方式
  - 顶部栏、侧边栏、底部栏的 sticky 行为
7. 验收标准
  - 所有视图入口和返回逻辑稳定
  - 数据和计算结果正确
  - 页面级布局不再变化
  - 容器比例和对齐稳定
  - 字号、颜色、间距完成统一
  - 桌面端和移动端都能正常显示
  - 悬停、点击、分页、气泡窗行为明确
  - 构建和截图验证通过

> 提示词模版｜26-09-09 追加｜26-09-10 更新
## 粗实现
1. 熟悉“数据与业务规则”
  - 请熟悉当前站点（url或者本地模型中指定）的数据与业务规则，包括但不限于
    - 数据字段和计算规则，分清哪些数据来自真实文件，哪些是派生数据
    - 页面有哪些视图，以及视图之间的切换逻辑
    - 熟悉URL、返回、分页、筛选等逻辑
2. 根据需求让GPT设计UI（这一部分变动会比较多，不限制）
  - 看里面的图片，看里面的 UI 图。然后我现在的诉求就是让你依据现在的内容、数据、交互逻辑和 UI 去进行重构，现在这个 4 个视图集成到一个大视图，也就变成了一个更有工作台的感觉。有一些信息可以用悬浮窗或者说悬停状态来这个进行交互的，那你就改成这样收起来的逻辑，把他们 4 个视图的内容集中到一个视图里面，帮我设计更美观、信息量更高、更简洁、交互逻辑更明确的UI 稿，请帮我设计三套不同的风格。
3. 从 UI 反解组件: “组件拆解和分阶段实现规范文档”
  - 请根据我选中的 UI 进行反解，产出一份“组件拆解和分阶段实现规范文档”，第一部分为“组件清单 + 布局关系 + 状态说明”
    - 页面级区域：侧边栏、顶部栏、主内容区、底部
    - 视图级区域：主视图、收支记录、会员订阅
    - 容器：KPI、日历、详情面板、趋势图、列表
    - 组件：标题、图标、按钮、胶囊、卡片、气泡窗
    - 设计参数：颜色、字号、间距、圆角、边框、阴影、比例
    - 状态：默认、悬停、点击、展开、空数据、移动端
  - 第二部分为明确的“实现协议”
    - 页面布局使用什么 Grid / Flex 结构
    - 每个区域的宽高关系
    - 桌面端和移动端断点
    - 视图切换使用 URL、状态还是路由
    - 交互是展开、Popover、Drawer 还是 Modal
    - 哪些元素固定，哪些元素自适应
    - 字号、间距、颜色使用哪些 token
    - 数据字段映射到哪些组件
  - 第三部分为 UI 包
    - 即每个小组件/容器的局部视图
4. 让 GPT 出提示词
  - 接着根据当前“数据与业务规则”、UI以及“组件拆解和分阶段实现规范文档”生成一版不错的初始提示词，注意一定要分阶段实现和验证，最好是实现哪部分容器时只视觉验收对应部分而不是看整体，最后整体视觉验收时再看整体，这一部分验收时主要关注
    - 真实数据能正确显示
    - 所有视图入口能正常切换
    - 主要容器层级和页面布局成立
    - 原有业务逻辑不被破坏
## 细调整
> 这部分没有提示词，是按照逻辑走，看到哪里有问题了就让他修哪里

测试

> 测试技巧 | 26-09-10 追加｜26-09-10 更新
1. 学会使用URL参数调试：如`/todo-board/?previewDate=2026-08-05`

案例

1. 小红书帖子提供的调研财报，输出网页思路

2. 2026-08-01，DeepSeek V4 Flash、43 条请求、230 积分，把熊窝 personal 站点 的英雄联盟板块从”手工攻略”重构为”RESG 实战数据驱动的全 173 英雄速查”。

会话记录在 CodeBuddy（可搜索跳转）：personal：英雄联盟板块重构-0.21.0（会话索引 7e52d63d963b49d4861b441e2f7b2253）。

资源

灵感参考

Notion 仪表盘可复用的小组件来源