落地页是视觉产品：图片优先级三档与被禁的 div 假截图
本文所有仓库信息核对日为 2026-08-09，以上游仓库最新内容为准。
让模型写一个落地页，十有八九会拿到一份「文字很完整、一张图没有」的产物：hero 是标题加一块渐变，产品预览是一堆 <div> 拼出来的假仪表盘，客户 logo 墙是一排 <span>Acme Co</span>。taste-skill v2 的 §4.8 就是专门对着这个结果写的。
先把性质说在前面：下面这些规则来自 skills/taste-skill/SKILL.md（文件夹 taste-skill，install name design-taste-frontend）第 4.8 节。它们是写给模型看的提示词约束，不是 lint 规则，不是构建期检查。装了不等于你的页面里就不会再出现假截图——这一条在本站的 taste-skill 系列里会反复说，因为它决定了你该对这个仓库抱什么期待。
一、原文的立场：纯文字页面不是极简，是没做完
§4.8 开头的立场很直接：落地页和作品集是视觉产品；纯文字页面配假截图 div 就是 slop。
同一节里还有一句更具体的：即使是 editorial 的 Linear 风站点，也至少需要 2-3 张真图——hero 一张、产品或生活方式图一张、辅助图一张。需求本身很克制的话，原文给的做法是去生成黑白极简摄影，而不是干脆不放图。这里有一条明写的禁令：不许因为旋钮低就完全跳过图片（DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY 这三个旋钮的具体基线我们另有一篇专讲，本篇只用到「低不等于不用图」这一层）。
这句话值得单独拎出来，是因为它堵掉了一个非常顺手的借口。模型很容易把「简洁」当成「省掉资产环节」的理由，而省掉之后的页面在观感上和「没写完」是一样的。
二、三档优先级：怎么判断自己该走哪一档
§4.8 把视觉资产的来源排成了有先后的三档：
| 档位 | 原文要求 | 触发条件 |
|---|---|---|
| 第一档 | 图像生成工具优先，用它做区块专属资产 | 环境里存在任意图像生成工具 |
| 第二档 | 真实网络图片次之 | 没有生成工具 |
| 第三档 | 告诉用户缺图，留标注好的占位槽 | 前两条路都走不通 |
第一档的触发条件写得很宽：generate_image、MCP 图像工具、IDE 集成的生成能力、OpenAI 图像工具——只要环境里有任何一个，就必须用它产出区块专属资产：hero 摄影、产品图、纹理背景、氛围图，并且要按该区块正确的宽高比生成。原文特意堵了一句：不许因为「手写 CSS 更快」就跳过这一步。
判断依据其实落在你自己身上而不是模型身上：你得知道你当前这套工具链里到底有没有图像生成能力。有，就该在提示里点名让它去用；没有，硬要求它「必须生成」只会把它逼到第二档甚至逼出幻觉。
第二档给了三类可接受来源：
https://picsum.photos/seed/{descriptive-seed}/{w}/{h}作占位摄影，原文强调 seed 要描述该区块，举的例子是marrow-cookware-kitchen这种写法；- 需求方提供的实际图库或品牌 URL；
- 明确允许时才用开放许可来源（直链 Unsplash、Pexels）。
第三条里的「明确允许时」是个前置条件，不是修饰语。图片来源的授权范围各家各有条款，这里只指路：以对应站点的官方许可说明为准。至于 picsum 这个服务本身怎么响应、同一个 seed 会不会稳定返回同一张图，原文没写，我们也没有调用过，只能照抄这个 URL 形状。
第三档才是最容易被跳过的一档。原文的处置是：两条路都走不通时，不要用手绘 SVG 插画或 div 假截图把页面填满，而是留下明确标注的占位槽，例如
<!-- TODO: hero product photo, 1600x1200 -->
并在回复末尾对用户说明：“This page needs real images at: [列出位置]. Please generate or provide them.”
这一档的价值在于它承认了「做不到」。模型的默认行为是把空缺补满——补出来的东西看着完整，但你后面还得先把它拆掉才能放真图。留一个带尺寸的 TODO 注释，反而是把交接成本降到最低的做法。
三、div 假截图为什么被单拎出来禁
§4.8 里点名的一类东西是：用 <div> 矩形手搭的「产品预览」、假任务列表、假仪表盘、假终端窗口。原文的判断是——这是一个 Tell。
给的替代路径有四条（原文并列给出，没有标先后）：用真实截图 URL、用图像工具生成、用真实组件预览（在页面里塞一个真的迷你版 UI），或者干脆不放预览，改用 editorial 摄影。
第三条替代值得多说一句，因为它对「产品还没做出来」的场景是唯一可走的：截图 URL 需要产品已经存在，而一个真的迷你版 UI 是可以现写的。区别在于它是真的能跑的组件，不是外形像 UI 的静态 div。
假截图被禁还有一层连带效应，落在同一份 SKILL.md 的 §4.9 上：那一节规定 AI 自己编的精确数字（92%、4.1×、48k、5.8 mm、13.4 lb 这类）被禁，只有「来自真实数据」或「明确标注为模拟」两种归宿是允许的。而你一旦动手搭假仪表盘，就必然要往里填指标、填任务数、填增长曲线——两条规则会在同一个组件上撞上。这是我们引用 §4.9 这一行的原因：它解释了为什么假截图不是「不好看」的问题，而是会连带产出一批编造数字。
顺带，§4.8 结尾还有一句同源的话：文字 + 渐变色块不是 hero，是占位符。注意别和 §4.7 那条 Bento Background Diversity 混为一谈——后者要求多格网格里至少 2-3 个格子有真实视觉变化，并把「贴合品牌的渐变（不是 AI 紫）」列为可用的一种。两处说的是不同位置：hero 不能只有渐变，bento 格子里渐变可以充当变化手段之一。
四、logo 墙：LOGO-ONLY 是强制项
社交证明这块单独有一组规则，因为默认做法（一排纯文字字标 <span>Acme Co</span>）被明确否掉了。原文要求用真 SVG logo，给的来源是：
- Simple Icons：
https://cdn.simpleicons.org/{slug}/ffffff，颜色可任意替换，也可用simple-iconsnpm 包，覆盖多数知名品牌； - devicon 作备选，用于技术栈 logo；
- 品牌名是编的（demo、样例站点常见），那就自己编一个 SVG 标记：圆圈里一个字母、双字连字、抽象字形，作为内联
<svg>渲染并匹配页面风格。原文的理由是，给虚构品牌用纯文字字标看着就很通用。
还有两条硬的：务必保证 logo 在明暗两种模式下都能显示（白压深、黑压浅，或走单色主题变量）；以及 LOGO-ONLY rule（强制）——logo 墙上就只有 logo，不许在每个 logo 下面印行业标签，原文举的反例是 Vercel 下面写 hosting、Stripe + payments、Cloudflare + infra。理由写得很干脆：logo 本身就是可信度，标签没有增加任何用户不知道的信息。可选项只剩两个——品牌名做屏幕阅读器的 alt 文本、链接到品牌站。
这条规则和 §4.7 的一行放在一起看会更清楚：「Used by / Trusted by」logo 墙属于 hero 下方，绝不在 hero 内部。也就是说，logo 墙的位置和内容都被钉住了：位置在 hero 之外，内容只有 logo。
五、手绘 SVG：本节写得最明确的例外路径
§4.8 对手绘插画的处置分成两层。来自图标库的 SVG 图标是可以的（原文交叉引用到 §3.C，那一节本篇不展开）。而手绘装饰性 SVG——自定义插画、logo、标记——原文的措辞是「强烈不建议，绝不作默认」。
只有三种情况可接受：
- 需求明确要求（原文的例子是用户直接说 “draw me an SVG logo”）；
- 是单个简单几何标记（方形、圆形、display 字体的字标）；
- 你对输出质量有把握。
这三条就是本节能拿到的 override 依据。它们的共同点是由外部条件或明确判断触发，而不是由「我觉得这里配张插画挺好」触发。第 3 条给的余地最大，但它本质上是把责任交回给人：你得真的看得出这张图行不行，而不是默认它行。
六、这套规则在你的场景里该不该照做
拆完之后，几条能直接用的判断：
如果你在做的是对外落地页或作品集，这一节基本可以整段照抄进你的提示词，因为它的每一条都指向同一个失败模式——页面上没有真视觉。这也是原文写它的语境。
如果你在做的是内部工具、后台或数据密集界面，先别急着套。同一份 SKILL.md 的 §13 明确把仪表盘、后台管理面板、数据表格列为 out of scope，并要求遇到这类需求时明确说出来、指向别的工具，只把营销页/关于页/落地页那部分应用到适用的界面上。图片策略这一节的立论前提是「落地页是视觉产品」，这个前提在后台界面上不成立。
如果你的项目根本还拿不到图，走第三档，而不是把第一二档硬凑出来。带尺寸的 TODO 注释加一句明确的缺图说明，比一屏拼出来的假仪表盘更省事。
最后回到性质。这一整节是提示词，不是校验器。真要保证上线页面里没有 div 假截图、没有编造的规格数字，最终还是得靠人审或者你自己构建链里的检查。这一节写下的是一组约束文本，模型实际照做到什么程度，我们没有安装或运行过任何一个 skill，给不出结论——默认 skill 当前自标 v2 (experimental)，README 原文也说 “It is still iterating”，请按这个前提去用。
本文依据 taste-skill 官方仓库（github.com/Leonxlnx/taste-skill）的 README、CHANGELOG、
skills/ 下的 SKILL.md 与 .claude-plugin/ 清单整理，核对日 2026-08-09。
本文内容为仓库文档口径，我们没有安装或运行过其中任何一个 skill，
文中所有规则均为写给模型的提示词约束，不构成对输出结果的保证。
skill 内容随上游更新而变动，默认 skill 当前自标为 v2 (experimental) 且仍在迭代，请以仓库最新内容为准。
许可条款请以官方 LICENSE 原文为准，本文不构成法律意见。