FORM & INPUT
星级评分输入Star Rating Input
五颗星从灰变琥珀，悬停时预览、点击后定格，星星还会微微弹一下。
效果预览
★★★★★
4 / 5 · 悬停可预览，点击定格
适合用在哪
商品评价、服务反馈、内容评分、NPS 调研。
容易踩的坑
- 只支持鼠标悬停预览，触屏没有 hover，用户点下去前看不到选的是几星。
- 五颗星没用 radio 组语义，键盘无法用方向键打分，读屏也不念出当前星级。
- 未选中星星的浅灰描边对比度低于 3:1，用户看不出总共有 5 颗。
设计提示词 · Prompt
星级评分输入（Star Rating Input）：5 颗星（SVG 星形，20-28px，间距 2-4px），默认描边灰或浅灰填充；悬停到第 n 颗时前 n 颗填充琥珀色 #F59E0B（预览态），移开恢复；点击后锁定。每颗星悬停时 scale 1.1-1.2 微弹（transition 150ms）。星星旁可配文字档位（"还行 / 不错 / 超棒"）随选择变化。半星用两层星叠加 + 宽度裁切实现。提交按钮在未评分时 disabled，避免空评分提交。
Star Rating Input: 5 stars (SVG star shapes, 20-28px, 2-4px spacing), defaulting to a gray outline or light gray fill; when hovering the nth star, the first n stars fill with amber #F59E0B (preview state), reverting on mouse leave; clicking locks the rating. Each star does a small scale 1.1-1.2 bounce on hover (transition 150ms). Text tiers next to the stars ("Okay / Good / Awesome") can change with the selection. Half stars are implemented by stacking two star layers + width clipping. The submit button is disabled until a rating is given, preventing empty ratings from being submitted.
常见搭配
同一页面里经常和「星级评分输入」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-starsdemo">
<div class="d-stars">
<i class="is-on">★</i><i class="is-on">★</i><i class="is-on">★</i><i class="is-on">★</i><i>★</i>
</div>
<span class="d-starsdemo__hint">4 / 5 · 悬停可预览，点击定格</span>
</div>