组件 · 内容 · 25
数据卡 数据卡 = 一个数字、一个标签、一个变化量；三项都说清楚，Prompt 才有效。
直达修改 Prompt →
Prompts copied · 30 days 12,480 ▲ 8.4%
Failed exports · 30 days 37 ▼ 2.1%
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a stats card component.
STYLE
- 12px radius card, 16px padding, #FFFFFF on #F5F5F7 page
- label 12px #6E6E73, value 28px 600 #1D1D1F, 4px apart
- delta chip 11px: #248A3D for up, #FF3B30 for down, with an arrow
- an optional 40px sparkline sits under the value
STATES
- default, positive, negative, loading with a 28px skeleton bar
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing stats cards show a period-to-period delta.
Use:
- an 11px chip next to the value with an arrow and the change
- green #248A3D when it is an improvement, red #FF3B30 when not
- keep the card padding, value size and label unchanged
Only add the delta chip.
Create a stats card component, replacing the existing one.
Requirements:
- 12px radius, 16px padding, white card on a #F5F5F7 surface
- label 12px #6E6E73, value 28px 600 tabular numerals, 4px apart
- delta chip 11px with an arrow; green for improvement, red otherwise
- a 40px sparkline variant that shares the accent color
- loading state shows a 28px skeleton in place of the value
Keep the dashboard grid unchanged.
MOTION
- Number: 600ms count-up, once, only when the card first enters the viewport.
- Group enter: stagger ~100ms.
- Hover: border only, 140ms. No lift, no shadow bloom.
- prefers-reduced-motion: show the final number immediately.
修改类 Prompt 只动目标，不碰页面其余部分。
数据卡是什么？ 数据卡只报一个数字。点名数字、它隐含的比较周期，以及涨跌如何配色。
变体 点击属性即可在预览中高亮。
单指标 在 Prompt 里写明这个类型。
带涨跌 在 Prompt 里写明这个类型。
带迷你折线 在 Prompt 里写明这个类型。
数值 给具体值，不要只给感觉词。
标签 字段的名称文字，简短并置于输入框上方。
涨跌 给具体值，不要只给感觉词。
迷你折线 给具体值，不要只给感觉词。
周期 给具体值，不要只给感觉词。 状态 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
正向 在 Prompt 里写明这个状态。
负向 在 Prompt 里写明这个状态。
加载中 操作进行中显示进度并禁止重复点击，禁用控件并替换为加载指示。 结构解剖 这些是 Prompt 里应该点名的部件。
01 标签 02 数值 03 涨跌标签 04 迷你折线 05 周期 什么时候用 控制面板里四到六个关键数字 周报月报汇总 变化比数值本身更重要的指标 什么时候别用 数字没有可比较的周期 它是页面唯一内容——改用图表 超过六张卡互相争夺注意力 State the period in the label — “Revenue” alone is a number, “Revenue · last 30 days” is a metric.
复制 Prompt Create a stats card component.
STYLE
- 12px radius card, 16px padding, #FFFFFF on #F5F5F7 page
- label 12px #6E6E73, value 28px 600 #1D1D1F, 4px apart
- delta chip 11px: #248A3D for up, #FF3B30 for down, with an arrow
- an optional 40px sparkline sits under the value
STATES
- default, positive, negative, loading with a 28px skeleton bar
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui