怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a skeleton component.
STYLE
- placeholders in #E5E5EA at 12px radius, shaped like the real content
- a shimmer sweeps left to right in 1.2s, 8% white highlight
- text lines are 12px tall with 8px gaps, the last line is 60% width
- nothing appears before 300ms of loading
STATES
- loading with shimmer, revealing with a 160ms crossfade, error falls back
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing skeleton delay before it appears.
Use:
- hold for 300ms before rendering any placeholder
- after that, crossfade to real content over 160ms
- keep shapes, colors and the shimmer unchanged
Only add the delay.
Create a skeleton component, replacing the existing one.
Requirements:
- placeholders #E5E5EA, 12px radius, matching the real element sizes
- shimmer sweeps left to right over 1.2s with an 8% white highlight
- text lines 12px tall, 8px gaps, last line at 60% width
- a 300ms delay before anything renders, then a 160ms crossfade
- variants: text lines, card, avatar row, and table rows
Keep the page layout identical during and after load.
MOTION
- Shimmer: 1.4s linear loop using translateX, not background-position.
- Handoff to real content: 120ms fade out. Do not cross-fade both at full opacity.
- Do not pulse the whole block opacity; it reads as a loading error.
- prefers-reduced-motion: static fill, no shimmer.
修改类 Prompt 只动目标，不碰页面其余部分。
骨架屏是什么？ 骨架屏为即将到来的内容占位。点名形状、微光动画，以及何时替代转圈。
变体 点击属性即可在预览中高亮。
文本行 在 Prompt 里写明这个类型。
卡片 在 Prompt 里写明这个类型。
头像行 在 Prompt 里写明这个类型。
表格 在 Prompt 里写明这个类型。
形状 给具体值，不要只给感觉词。
微光 给具体值，不要只给感觉词。
时长 提示条自动消失前的停留时长（ms 或 s）。
贴合布局 给具体值，不要只给感觉词。
延迟 给具体值，不要只给感觉词。 状态 点击属性即可在预览中高亮。
加载中 操作进行中显示进度并禁止重复点击，禁用控件并替换为加载指示。
揭示中 在 Prompt 里写明这个状态。
错误 无效状态：红色边框 + 提示文案，通常阻止提交。 结构解剖 这些是 Prompt 里应该点名的部件。
什么时候用 多张卡片加载时间不一的控制面板 行结构稳定的信息流与列表 超过 300 毫秒且布局已知的等待 什么时候别用 等待不足 300 毫秒——骨架一闪比不显示更糟 最终布局未知——改用转圈 内容只是很短的一串文字——显示占位横线即可 If the skeleton shape does not match the loaded content, the page jumps — draw the placeholder from the real layout, not from taste.
复制 Prompt Create a skeleton component.
STYLE
- placeholders in #E5E5EA at 12px radius, shaped like the real content
- a shimmer sweeps left to right in 1.2s, 8% white highlight
- text lines are 12px tall with 8px gaps, the last line is 60% width
- nothing appears before 300ms of loading
STATES
- loading with shimmer, revealing with a 160ms crossfade, error falls back
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui