Glass morphismStyle
Glass buttonsComponent
Glassmorphic loginTheme
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a search component.
STYLE
- 36px field, 10px radius, #F5F5F7 surface, no border
- 16px leading magnifier in #6E6E73, 8px gap to the text
- a clear button appears only when the field has a value
- focus widens the field to 280px with a 220ms ease
STATES
- empty, typing, with results, no results, focus with a 2px ring
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing search field clearable.
Use:
- a 14px clear button at the right edge, visible only with a value
- clearing returns focus to the field
- keep the field size, icon and focus behavior unchanged
Only add the clear button.
Create a search component, replacing the existing one.
Requirements:
- 36px field, 10px radius, #F5F5F7 surface, no border
- leading 16px magnifier, trailing clear button when a value exists
- focus grows the field to 280px in 220ms with a 2px accent ring
- a suggestion list drops below: five rows, keyboard navigable, Esc closes
- an empty state reads “No matches for [query]”
Keep the surrounding toolbar unchanged.
MOTION
- Expand: 200ms ease-out on the field. Results panel fades in from 8px below, 140ms.
- Clear icon: 120ms cross-fade, scale 0.25 to 1.
- Keystroke filtering is instant. Never animate per result row.
- prefers-reduced-motion: instant panel, no slide.
修改类 Prompt 只动目标，不碰页面其余部分。
搜索是什么？ 搜索是带结果承诺的输入框。点名图标位置、清空入口，以及快捷键做什么。
变体 点击属性即可在预览中高亮。
行内 在 Prompt 里写明这个类型。
带建议 在 Prompt 里写明这个类型。
全局 在 Prompt 里写明这个类型。
占位符 给具体值，不要只给感觉词。
清空 给具体值，不要只给感觉词。
建议列表 给具体值，不要只给感觉词。
快捷键 给具体值，不要只给感觉词。
范围 给具体值，不要只给感觉词。 状态 点击属性即可在预览中高亮。
空 无数据时的状态，需给出提示与下一步操作。
输入中 在 Prompt 里写明这个状态。
有结果 在 Prompt 里写明这个状态。
无结果 在 Prompt 里写明这个状态。
聚焦 键盘聚焦状态：清晰的焦点环或边框变化，永远不要去掉。 结构解剖 这些是 Prompt 里应该点名的部件。
01 输入框 02 前置图标 03 清空按钮 04 建议列表 什么时候用 筛选已在页面上的表格 顶栏带快捷键的全局搜索 直达操作的命令式搜索 什么时候别用 条目不足十条——直接展示比搜索更好 结果需要分面筛选——改用搜索页 还没有可搜的内容 Put the shortcut hint inside the field — a bare magnifier tells the user nothing about where search lives.
复制 Prompt Create a search component.
STYLE
- 36px field, 10px radius, #F5F5F7 surface, no border
- 16px leading magnifier in #6E6E73, 8px gap to the text
- a clear button appears only when the field has a value
- focus widens the field to 280px with a 220ms ease
STATES
- empty, typing, with results, no results, focus with a 2px ring
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui