组件 · 内容 · 28
阶段卡 阶段卡 = 带序号的步骤卡片，顶部强调色表明该步骤已完成或正在进行。
直达修改 Prompt →
PHASE 01 MVP One engine, one protocol.
PHASE 02 Integration Adapters for all engines.
PHASE 03 Polish Native features and sync.
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a roadmap of phase cards.
STYLE
- responsive card grid, top 4px accent edge, 12px radius
- monospace phase number in accent color
- 16px title, one muted description line
- three phases side by side
STATES
- default, current phase with a teal top edge
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Mark the second phase as current in the existing roadmap.
Use:
- a teal top edge instead of the accent color
- a small "Now" badge next to the phase number
- keep the grid, copy and spacing unchanged
Only change the current-phase treatment.
Create a roadmap of phase cards, replacing the existing one.
Requirements:
- responsive grid, min 160px per card, top 4px accent edge
- monospace phase number, 16px title, one muted line
- current phase: teal top edge plus a "Now" badge
- completed phases: green number and a check mark
- stacks to one column on mobile
Keep the surrounding page layout unchanged.
MOTION
- Progress: 300ms ease-out. Animate transform, never width.
- Completion tick: 160ms, scale 0.6 to 1.
- The card itself does not lift or scale on hover.
- prefers-reduced-motion: instant state change, progress bar still moves.
修改类 Prompt 只动目标，不碰页面其余部分。
阶段卡是什么？ 阶段卡是一个有序步骤。给每张卡编号、标题、一行说明，并标出当前阶段。
变体 点击属性即可在预览中高亮。
编号 在 Prompt 里写明这个类型。
当前 在 Prompt 里写明这个类型。
顶部强调边 给具体值，不要只给感觉词。
阶段编号 给具体值，不要只给感觉词。
布局 给具体值，不要只给感觉词。 状态 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
当前 在 Prompt 里写明这个状态。 结构解剖 这些是 Prompt 里应该点名的部件。
什么时候用 产品或交付路线图 有先后顺序的新手引导 带当前阶段的发布计划 什么时候别用 步骤没有顺序——改用卡片网格 每步要写很多——改用页面章节 超过六个阶段——先分组 复制 Prompt Create a roadmap of phase cards.
STYLE
- responsive card grid, top 4px accent edge, 12px radius
- monospace phase number in accent color
- 16px title, one muted description line
- three phases side by side
STATES
- default, current phase with a teal top edge
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui