Authentic Product Representation

真实产品视觉呈现

The fastest way to lose a visitor's trust is a product visual that is obviously staged. People have seen thousands of landing pages; they recognise a fabricated dashboard, a screenshot full of lorem ipsum, or a "terminal" that prints things the real tool never would. The visual that converts is the one that looks like it was screenshotted straight out of the working product — because it was, or because it was built to be indistinguishable from it.

The principle is simple: the visual is the product, not a poster of it. Every shortcut away from that — invented data, decorative chrome, a capability shown that does not exist — is a small withdrawal from the trust account.

This skill governs whether a visual is credible; what it has to accomplish in the page's argument comes from the product narrative framework in [[layout-paradigms-and-consistency]]. A fabricated proof point proves nothing.

最容易让访客失去信任的方式，就是使用明显经过摆拍的产品视觉素材。人们看过成千上万的落地页，一眼就能识别出伪造的仪表盘、满是lorem ipsum的截图，或是打印出真实工具绝不会输出内容的“终端界面”。真正能促成转化的视觉素材，看起来就像是直接从运行中的产品截取的——要么确实是实拍，要么制作得与实拍毫无差别。

原则很简单：**视觉素材就是产品本身，而非宣传海报。**任何偏离这一原则的取巧行为——虚构数据、装饰性元素、展示不存在的功能——都是在消耗用户的信任。

本规则决定了视觉素材是否具备可信度；而它在页面叙事中需要达成的目标，则源自[[layout-paradigms-and-consistency]]中的产品叙事框架。虚假的证明素材毫无说服力。

Design With Real Content

使用真实内容进行设计

Idealised placeholder content hides the problems your design will actually face.

No lorem ipsum. Use real copy, or the closest draft of it. Real words have real lengths, real line-wraps, real awkward edge cases. Latin filler is uniformly tidy in a way your content never will be.
Real names, real numbers, real lengths. "John Smith / $1,234" is a fantasy dataset. Use the longest realistic name, the account with 0 items, the title that wraps to three lines. If the design only looks good with perfect data, it is not finished.
Design the empty, loading, error, and overflow states too — they are the product as much as the happy path. A screenshot that only ever shows the full, perfect state is selling a product that does not exist.

If you genuinely cannot use production data, generate the mock from the real schema and the real renderer, so its shape, formatting, and constraints match what ships.

理想化的占位内容会掩盖设计实际面临的问题。

禁止使用lorem ipsum：使用真实文案，或最接近最终版本的草稿。真实文本有真实的长度、换行方式，以及各种棘手的边缘情况。这种拉丁语占位符的规整性是真实内容永远无法达到的。
真实名称、真实数字、真实长度：“John Smith / $1,234”是虚构的数据集。使用最长的真实姓名、包含0项内容的账户、换行至三行的标题。如果设计只有在数据完美时才美观，那它就不算完成。
同时设计空状态、加载状态、错误状态与溢出状态——这些状态和理想状态一样，都是产品的一部分。只展示完整、完美状态的截图，相当于在推销一款不存在的产品。

如果确实无法使用生产环境数据，请基于真实的数据结构和渲染器生成模拟内容，使其形状、格式和约束条件与实际交付的产品一致。

Mirror the Real Output

复刻产品实际输出

When a visual stands in for what the product produces — a CLI run, a generated file, a report, a chart, an editor — reproduce the actual format, not a prettier reinterpretation.

Use the product's real output structure: the same labels, the same ordering, the same tree/log/table shape, the same truncation rules ("+4 more").
Pull the values from a real run where possible. If the visual claims to process
```
yourdomain.com
```
, show what processing
```
yourdomain.com
```
actually yields — not another site's values relabelled.
Reuse the real rendering component if one exists. A faithful embed beats a hand-built lookalike that drifts from reality the moment the product changes.
Breadth is more convincing shown than claimed. Listing the real categories the tool already covers ("also: borders, shadows, motion, components") communicates scope truthfully; a "coming soon" teaser for things that already exist communicates the opposite.

A reinterpreted mock is a maintenance liability and a credibility risk: it looks like the product until someone compares it to the product.

当视觉素材代表产品的输出内容时——比如CLI运行结果、生成的文件、报告、图表、编辑器——要复刻实际格式，而非经过美化的重新演绎。

使用产品真实的输出结构：相同的标签、相同的排序、相同的树状/日志/表格形态、相同的截断规则（如“+4 more”）。
尽可能从真实运行场景中提取数值。如果视觉素材声称处理了
```
yourdomain.com
```
，请展示处理
```
yourdomain.com
```
的实际结果——而非将其他站点的数值重新标记。
如果存在真实的渲染组件，请直接复用。忠实的嵌入组件胜过手工制作的仿制品，后者会在产品更新后立即与现实脱节。
广度用展示而非宣称更有说服力。列出工具已覆盖的真实类别（如“还包括：边框、阴影、动效、组件”）能真实传达功能范围；而对已存在的功能标注“即将推出”则会起到相反的效果。

经过重新演绎的模拟素材既是维护负担，也是可信度风险：它看起来像产品，直到有人将其与真实产品对比。

Keep It Truthful

保持内容真实可信

The visual makes claims. Every one must hold.

Numbers reflect reality. Stats, counts, and metrics are real or clearly illustrative — never inflated fiction presented as fact.
Labels match content. Do not relabel one thing as another (a screenshot of system A captioned as system B; a domain in the command that does not match the results shown).
Show only real capabilities. A demo that performs a feature the product does not have is a promise you will break on first use.
"Soon" means soon, and rarely earns its place. A pending/soon badge on something that already ships is a lie; a pending badge on a real roadmap item is usually just noise in a product shot. Prefer showing what works.

视觉素材会传递各种信息，每一条都必须符合事实。

数字反映现实：统计数据、计数和指标要么是真实的，要么明确标注为示例——绝不能将夸大的虚构数据当作事实呈现。
标签与内容匹配：不得将一物重新标记为另一物（如将系统A的截图标注为系统B；命令中的域名与显示的结果不匹配）。
仅展示真实功能：演示产品不具备的功能，相当于在用户首次使用时违背承诺。
“即将推出”需名副其实，且慎用：对已上线的功能标注“即将推出”是谎言；对真实路线图中的项目标注“即将推出”，通常只是产品素材中的冗余信息。优先展示已可用的功能。

Refuse Fabricated Marketing Chrome

摒弃虚假营销装饰元素

A recognisable visual dialect signals "generated to look impressive" rather than "screenshotted from a real product." It reads as AI-slop and erodes the authenticity you are trying to build.

Avoid:

Invented dashboards, fake charts, and decorative "terminals" that print marketing copy
Gradient-filled text, sparkle/star accents, aurora glows, and glassmorphism used as a substitute for substance
Typewriter/rotator headlines and faux-AI chrome (scanning lines, "thinking" shimmers) with no real function
Pill badges and ornaments that exist only to fill space, especially in places where they clash with the medium (e.g. a label chip dropped into monospace output)

The restraint test: if an element does not exist in the real product, it does not belong in a visual that represents the real product. Decoration that carries no information is the first thing to cut.

辨识度高的视觉风格会传递“为了显得亮眼而生成”的信号，而非“从真实产品截取”。这种风格看起来像AI生成的劣质内容，会破坏你试图建立的真实性。

需避免：

虚构的仪表盘、假图表，以及打印营销文案的装饰性“终端界面”
渐变填充文本、闪光/星星装饰、极光效果，以及用毛玻璃效果替代实质内容的设计
打字机/滚动式标题，以及无实际功能的仿AI装饰（扫描线条、“思考”闪烁效果）
仅用于填充空间的胶囊形徽章和装饰元素，尤其是在与媒介风格冲突的场景中（如在等宽字体输出中加入标签芯片）

约束测试：如果某个元素在真实产品中不存在，那它就不该出现在代表真实产品的视觉素材中。无信息传递作用的装饰元素是首先要剔除的。

When You Must Stage

不得不摆拍的情况

Sometimes a literal screenshot is impossible (pre-launch, sensitive data, a composite view). Stage honestly:

Build from the real schema, the real component, and realistic values.
Match the product's real states and formatting, including the unglamorous ones.
Keep claims conservative — under-promise in the visual, let the product over-deliver.
Label clearly illustrative figures as such rather than passing them off as measured.

有时无法直接截取真实截图（如产品未上线、包含敏感数据、需要合成视图），此时需诚实摆拍：

基于真实的数据结构、组件和符合现实的数值进行制作。
匹配产品真实的状态和格式，包括那些不够美观的状态。
保守传递信息——在视觉素材中少承诺，让产品实际交付超出预期。
明确标注示例数据，而非将其当作实测数据。

authentic-product-representation

Original

Translation