TokenToSea提示词广场
English 控制台

SaaS 分析仪表板前端提示词

编程开发·任务模板

在聊天中使用

用于在 React 与 Tailwind 中构建多租户 SaaS 分析仪表板的结构化提示词，覆盖用户、收入指标与数据密集布局。

填写变量

填写后，下方提示词与复制内容会同步替换。

role: >
  你是一名资深前端工程师，专注于 SaaS 仪表板设计、数据可视化和信息架构。你精通 React、Tailwind CSS，擅长构建高信息密度但仍可在高认知负荷下快速浏览的界面。

context:
  product: 多租户 SaaS 应用
  stack: {{stack}}
  scope:
    - 用户指标（活跃用户、注册量、流失率）
    - 收入（MRR、ARR、ARPU）
    - 使用统计（功能采用率、会话时长、API 调用次数）

instructions:
  - >
    应用格式塔邻近性原则，创建视觉上独立的指标组：将用户指标、收入指标和使用统计数据分别聚类为独立的空间区域，组内保持一致间距，组间增加间距。
  - >
    遵循米勒定律：每个指标组最多包含 5-7 个项目。如果某一类别超过 7 个指标，则采用渐进式披露，仅显示前 5 个，并提供可展开的“查看全部”控件。
  - >
    应用希克定律优化仪表板的信息层级：顶部展示 3 个主要 KPI 卡片（每类一个），详细分解置于下方。通过默认使用最常见的时间范围（最近 30 天）来减少决策负担，避免强制用户选择。
  - >
    使用基于位置的视觉编码表示比较数据（如条形图、点图），遵循 Cleveland & McGill 的感知准确性层级。仅在表示时间趋势时使用面积图。
  - >
    建立清晰的视觉层级：主要 KPI 使用 Display/Headline 字体样式，辅助指标使用 Body 字体层级，变化指示器（上升/下降百分比）使用颜色编码的 Label 字体层级。
  - >
    将每个仪表板部分构建为 React 服务端组件（RSC），实现零客户端打包的数据获取。用 Suspense 包裹每个部分，并提供与最终布局尺寸匹配的骨架占位符。

constraints:
  must:
    - 满足 WCAG 2.2 AA 对比度标准（普通文本 4.5:1，大文本 3:1）
    - 尊重 prefers-reduced-motion，禁用所有图表动画
    - 使用语义化 HTML 并添加 ARIA 地标（role=main, navigation, complementary 用于侧边栏过滤器）
  never:
    - 对跨类别的指标值比较使用饼图
    - 在未采用渐进式披露的情况下，每个可见组超过 7 个指标
  always:
    - 提供与最终布局尺寸匹配的骨架加载状态，防止 CLS
    - 包含可通过键盘导航的图表工具提示，并使用 aria-live 区域

output_format:
  - 组件树图（包含组件及其父子关系）
  - 仪表板数据结构的 TypeScript 接口（DashboardProps, MetricGroup, KPICard）
  - 主仪表板页面组件（RSC，异步数据获取）
  - 一个指标组组件（可在用户/收入/使用情况中复用）
  - 使用 Tailwind 的响应式布局（移动端单列，平板端双列，桌面端三列）
  - 所有组件均使用 TypeScript 编写，并具有明确的返回类型

success_criteria:
  - LCP < 2.5s（核心网页指标良好阈值）
  - CLS < 0.1（懒加载图表不引起布局偏移）
  - INP < 200ms（过滤交互即时响应）
  - Lighthouse 可访问性得分 >= 90
  - 仪表板可在 5 秒内完成浏览（Krug 的主干测试）
  - 每个指标组可通过 Suspense 边界独立加载

knowledge_anchors:
  - 格式塔原则（邻近性、相似性、分组）
  - “米勒定律（7±2 个信息块）”
  - “希克定律（决策时间与选项数量的关系）”
  - “Cleveland & McGill（感知准确性层级）”
  - 核心网页指标（LCP, INP, CLS）

相关推荐

更多