Tremor 是专注数据可视化的 React + Tailwind 组件库，被 Vercel 收购后延续开源与 copy-paste 模式。其界面以白画布配浅灰描边（#e5e7eb）保持干净，Tremor 蓝（#3b82f6）统领图表、KPI 与交互元素，Inter 以 400-600 字重保证数据密集下的易读性，卡片模块化布局、12-16px 圆角，面积图、柱状图、进度条与迷你走势线就是它的主要视觉语言。适合仪表盘与分析产品。
专业与企业现代极简
提示词模板
基础模板
Design a Tremor-inspired interface. - Clean white canvas with subtle gray borders (#e5e7eb); - Tremor Blue (#3b82f6) as primary accent for charts, KPIs, and interactive elements; - Inter typeface at weights 400–600 for data-dense readability; - Modular card-based layout with 12–16px radius; - Data visualization as the primary visual language: area charts, bar charts, progress bars, sparklines. Colors: #3b82f6, #10b981, #f59e0b, #ef4444 with #3b82f6 accent. Typography: Inter.
变体提示词
📱 移动端
Design a mobile app with Tremor aesthetics. Use Tremor color identity with #3b82f6 accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Tremor style. Use Tremor color identity with #3b82f6 accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Tremor design language. Use Tremor color identity with #3b82f6 accents. Data-rich, organized, clear hierarchy with charts and KPI cards.
📄 落地页
Design a landing page with Tremor visual identity. Use Tremor color identity with #3b82f6 accents. Compelling, conversion-focused.
使用示例
Tremor 分析仪表板
仪表板Build a data analytics dashboard with Tremor design language, area charts, KPI cards, and #3b82f6 color system.
Tremor 管理面板
Web 端Create an admin panel using Tremor style with data tables, progress indicators, and Inter typography.
✅ 适合场景
- 企业级产品
- 数据仪表盘
- 数据可视化
❌ 不适合场景
- 以内容阅读为主的站点
- 游戏化社交界面
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。