看板靠描述生成,不靠拖拽搭建
告诉 agent 要展示什么、要什么感觉。Open Design 提供图表范式、布局系统和视觉语言,你拿到的是连贯、能拿得出手的看板,而不是一堆默认样式的控件。
一句话
Open Design 把你对指标的大白话描述变成有样式的看板,由 agent 渲染成 HTML——在你的 repo 里版本化、随处可托管、无需按席位订阅 BI。
用 Open Design 做看板的流程
- 01
描述指标
列出你关心的——"周活、按套餐分的收入、流失率、近 30 天趋势"。agent 加载看板 skill,知道要排布 KPI 卡片、图表和表格,而不是一段文字。
- 02
选择图表范式
Open Design 自带图表和布局模板,趋势变折线、占比变柱状、比例用对的图——全程字体和间距统一,而不是一堆不搭的默认样式。
- 03
接入数据
把看板指向 CSV、JSON 接口,或粘贴示例行。它渲染成自包含 HTML,数据变它就变——任何浏览器能打开,任何静态托管能放。
- 04
打磨并交付
靠跟 agent 对话来调——"收入按地区分组、把 KPI 行挪到顶部"。产物在你的项目里,看板像任何代码一样可 review、可版本化。
你能做出哪些看板
原型 查看完整提示词 → 仪表盘
单文件 HTML 管理/分析仪表盘。固定左侧边栏,顶部用户/搜索栏,主区域显示 KPI 卡片网格和图表。适用于需要'仪表盘'、'管理后台'、'数据分析'或'控制面板'界面的场景。
原型 查看完整提示词 → GitHub 仪表板
GitHub 仓库分析仪表板 — 星标、分支、贡献者、议题、拉取请求、近期活动和主要贡献者。适用于 GitHub 仓库仪表板、开源增长报告、仓库健康页面或 GitHub 分析视图。
原型 查看完整提示词 → 数据可视化报告
把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
原型 查看完整提示词 → 财务报告
季度/月度财务报告——包含关键指标的报头、收入与消耗图表、损益汇总表、重点摘要和展望段落。当需求提到'财务报告'、'Q3报告'、'MRR审查'、'P&L'或'财报'时使用。
原型 查看完整提示词 → 最近30天
最近30天的社区和社交趋势研究。适用于了解当前舆论、近期情绪、社区反应、社交证明、发布反馈、趋势扫描或最近30天的背景信息。
原型 查看完整提示词 → Flowai 实时仪表板模板
FlowAI 风格的团队管理仪表板,包含三个标签页(团队成员、团队详情、活动日志)、KPI 统计行、成员表格、角色分布条形图、在线状态和活动趋势图、顶级贡献者面板,支持亮暗主题切换、图表悬停提示、面板点击缩放和 CSV 导出功能。
用 Open Design 做看板 vs. 老办法
| 你需要什么 | 用 Open Design | BI 工具 / 纯手写 |
|---|---|---|
| 从指标清单到布局 | ●一句话,agent 排布卡片、图表、表格 | 一个个拖控件,或从零写图表代码 |
| 一致的视觉系统 | ●图表范式和间距来自可复用设计系统 | 默认控件样式,或每张图手动调 |
| 接入数据 | ●CSV / JSON / 粘贴行,渲染成实时 HTML | 厂商连接器或定制数据管道 |
| 托管与分享 | ●自包含 HTML 放任何静态托管,不要账号 | 查看者要 BI 厂商的席位 |
| review 与版本化 | ●在 repo 里,像代码一样可 diff | 锁在厂商里,无法真正 diff |
| 成本与锁定 | ●开源、自带密钥、本地运行 | 按席位订阅、厂商托管 |
下面是从 prompt + 数据源渲染出的真实看板。挑一个接近你的,描述你要盯的指标。
看板常见问题
-
01 需要 Tableau、Looker 这类 BI 工具吗?
不需要。Open Design 在你的编码 agent 里把看板渲染成 HTML。你描述指标、指向数据,没有额外的 BI 平台要授权或学习。
-
02 数据从哪来?
CSV、JSON 接口,或你粘贴的行。看板是纯 HTML + JavaScript,你完全控制它从哪读——不经任何托管服务中转。
-
03 非技术同事能看吗?
能。产出是自包含网页,任何人拿到链接或文件就能在浏览器打开——不要账号、不要席位。
-
04 可以用哪些 agent?
Claude Code、Codex、Cursor Agent、Gemini CLI 等十多个一方适配,自带 provider 密钥。
今晚就把看板做出来
给 repo 点个 star、装上 Open Design,把你的指标变成一个随处可托管的看板——在你本来就用的 agent 里。