Detail Hero Prompt
Fill-in prompt that generates a Detail Hero component
Component：Detail Hero
Fill in the blanks to build your prompt
- color/primary → #141414
- color/ink/primary → #141414
- color/ink/secondary → #55534E
- color/surface → #FFFFFF
- color/line → #E8E8E8
- radius/md → 10px
- spacing/4 → 16px
- font/size/body → 16px
- motion/duration/normal → 250ms
- motion/easing/ease-out-expo → cubic-bezier(0.22, 1, 0.36, 1)
Pending verification: this prompt has not been run against a live model yet; each one will be re-verified before launch.
Your assembled prompt
Original seven-part text
角色 Role
你是一名资深产品设计师兼前端工程师，深谙移动与 Web 界面规范，输出的设计克制、标准、可直接开发。
任务 Task
为我生成一个「详情页头图区」组件。用途：详情页开头那块：大图或封面、标题、关键信息，再往下才是正文，底部常吸一个购买/收藏条。使用场景：商品详情、文章详情、课程详情、房源详情——一切「看清一个再决定」的页面开头。
效果描述 Description
详情页头图区在三秒内回答「这是什么、值不值得继续看」：媒体先给感性判断，标题给理性确认，元信息（作者/评分/价格）给信任，之后正文展开，转化动作吸底常驻。
细节要求：
- 头图区总高度别超过首屏 60%，要给正文露一截钩子
- 吸底操作条最多两个按钮：主行动 + 一个次行动（收藏/分享二选一）
- 标题字号是全页最大，但别超过 28px 在移动端喧宾夺主
设计 Tokens
颜色 #141414、#141414、#55534E、#FFFFFF、#E8E8E8；圆角 10px；间距 8pt 体系 16px；字阶正文 16px；动效 250ms + cubic-bezier(0.22, 1, 0.36, 1)。以上令牌替换为我项目自己的变量也可，保持层级关系不变。
本组件参数（在参数范围内取值，我没指定时用默认）：
| 参数 | 类型 | 默认 | 范围 |
|---|---|---|---|
| {{media-ratio}} | enum | 4:3 | 16:9 / 4:3 / 1:1 |
| {{sticky-cta}} | enum | 底部吸底操作条 | 有 / 无 |
| {{meta-items}} | text | 作者、时间、评分 | 2–4 项 |
约束 Constraints
不要这样做：信息密度优先的工作页面（数据详情、工单详情）别用大头图占首屏，字段前置更重要。
触控目标至少 44×44（Web 鼠标场景至少 24px），正文不小于 14px；
颜色对比满足 WCAG AA（正文 ≥4.5:1）；状态不能只靠颜色区分；
文案用我给的真实内容占位：【在此粘贴真实文案，如标题、按钮字】，不要用 Lorem ipsum；
只实现这一个组件，不要顺带生成整页或其他组件。
框架目标 Target
【html-css / tailwind / react，三选一，默认 html-css】
输出格式 Output
输出完整可运行代码，并逐项自检：
- 结构与「效果描述」一致，参数与参数表一致；
- 包含默认 / 悬停 / 按下 / 禁用等必要状态；
- 键盘可达，焦点样式可见；
- 在 375px 宽移动屏与 1440px 桌面屏下都不溢出、不重叠。
（验证状态：待复验。本条提示词尚未经真实模型实测，验证字段如实留空。）