组件 · 内容 · 26
提示块 提示块 = 带彩色强调边和淡色背景的行内区块，用于补充说明而不打断阅读流。
直达修改 Prompt →
Key correction
The adapter layer replaces the single-format assumption.
MVP pick
One engine exposes an OpenAI-compatible API out of the box.
Risk note
The WebSocket adapter is the largest work item in this phase.
Breaking change
The migrate command is one-way — do not build sync on it.
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a callout component.
STYLE
- 4px left accent bar, 8% tinted background, rounded right corners
- four severities: info purple, success green, warning orange, danger red
- bold 14px title plus one body line
STATES
- default, dismissible with a close icon
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing callout dismissible.
Use:
- a close icon at the top-right of the callout
- clicking it collapses the callout over 200ms
- keep the accent bar, colors and copy unchanged
Only add the dismiss behavior.
Create a callout component, replacing the existing one.
Requirements:
- 4px left accent bar, 8% tinted background, rounded right corners
- four severities: info, success, warning, danger
- bold title with a leading icon, one body line
- dismissible: close icon, collapse over 200ms
- full-width in a narrow content column
Keep the surrounding article layout unchanged.
MOTION
- Render static. No enter animation by default.
- If it must be noticed, fade the icon once over 200ms. Nothing else moves.
- Dismiss: same as the alert pattern, 120ms fade with a 4px lift.
- prefers-reduced-motion: no animation.
修改类 Prompt 只动目标，不碰页面其余部分。
提示块是什么？ 提示块是常驻说明。选定严重度，点名竖条与浅色底，保持一行标题加一行正文。
变体 点击属性即可在预览中高亮。
信息 在 Prompt 里写明这个类型。
成功 正向确认提示（已保存、已发送、已复制）。
警告 在 Prompt 里写明这个类型。
危险 在 Prompt 里写明这个类型。
强调竖条 给具体值，不要只给感觉词。
浅色底 给具体值，不要只给感觉词。
标题 给具体值，不要只给感觉词。 状态 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
可关闭 在 Prompt 里写明这个状态。 结构解剖 这些是 Prompt 里应该点名的部件。
什么时候用 在文档里强调修正或关键事实 长内容中的风险与警告说明 留在页面上的轻量成败说明 什么时候别用 瞬时反馈——改用轻提示 需要用户做决定的消息——改用对话框 一页超过三个 复制 Prompt Create a callout component.
STYLE
- 4px left accent bar, 8% tinted background, rounded right corners
- four severities: info purple, success green, warning orange, danger red
- bold 14px title plus one body line
STATES
- default, dismissible with a close icon
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui