Tremor

Tremor
难度:
知名公司
T

效果预览

风格描述

数据仪表盘专用组件库，被 Vercel 收购，Copy-paste 模式，React + Tailwind CSS

标签

Tremor专业与企业

提示词模板

基础模板
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 Analytics Dashboard

Dashboard
Build a data analytics dashboard with Tremor design language, area charts, KPI cards, and #3b82f6 color system.

Tremor Admin Panel

Web App
Create an admin panel using Tremor style with data tables, progress indicators, and Inter typography.

✅ 适合场景

  • Enterprise
  • Dashboard
  • Data visualization

✅ 不适合场景

  • Unrelated design aesthetics
  • Different brand guidelines