CARD
评价卡Testimonial Card
五星 + 一句原话 + 头像签名。评价内容要具体到场景，不要笼统的"很好用"。
效果预览
★★★★★
"接入第一周就把周报时间从 4 小时压到 20 分钟，团队再也不抱怨写文档了。"
林
林一舟远航科技 · 联合创始人
适合用在哪
社会证明区、首页评价轮播、案例详情页。
容易踩的坑
- 五角星只用图标没有文字替代，读屏念不出评分，应补「5 分（满分 5 分）」。
- 评价正文超过 80 字不截断，网格里卡片高度悬殊，整体参差不齐。
- 使用图库人像当头像，用户反向搜图即可识破，整页可信度崩塌。
设计提示词 · Prompt
评价卡（Testimonial Card）：结构自上而下——一排五角星（14-16px、琥珀色 #F59E0B）→ 评价正文（15-17px、行高 1.7，可比页面正文略大一号）→ 底部 1px 分隔线隔开的签名区（36-40px 头像 + 姓名 600 字重 + 职位公司 12px 灰）。关键在选词：选包含具体场景与数字的原话（"每周省了 12 小时"），不要"非常好用"。整卡白底 + 1px 描边 + 16px 圆角，或极浅灰底无描边。可在左上角加一个超大引号装饰（8% 透明度）。
Testimonial Card: top to bottom — a row of five stars (14-16px, amber #F59E0B) → the testimonial body (15-17px, line-height 1.7, can be one size larger than page body text) → a signature area separated by a 1px divider (36-40px avatar + name at 600 weight + title and company in 12px gray). The key is word choice: pick quotes with concrete scenarios and numbers ("Saves me 12 hours a week"), not "really easy to use". The card is a white background + 1px stroke + 16px radius, or a very light gray background with no stroke. Optionally add an oversized quotation mark decoration in the top-left corner (8% opacity).
常见搭配
同一页面里经常和「评价卡」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-testi">
<div class="d-testi__stars">★★★★★</div>
<p class="d-testi__quote">"接入第一周就把周报时间从 4 小时压到 20 分钟，团队再也不抱怨写文档了。"</p>
<div class="d-testi__who">
<span class="d-av">林</span>
<span><b>林一舟</b><span>远航科技 · 联合创始人</span></span>
</div>
</div>