authentic-product-representation

Name: authentic-product-representation
Author: dembrandt

27stars5forks

How to install authentic-product-representation?

dembrandt/dembrandt-skills/authentic-product-representation

$npx -y skills add dembrandt/dembrandt-skills --skill authentic-product-representation

Installs into the current project.

Summary

Product visuals — hero shots, demos, screenshots, landing-page panels — must reproduce the real product, not a stylised poster of it. Design with real content and real data, mirror the actual output the product generates, keep every label and number truthful, and refuse fabricate

Files · 1

View on GitHub

SKILL.md

1	# Authentic Product Representation
2
3	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.
4
5	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.
6
7	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.
8
9	---
10
11	## Design With Real Content
12
13	Idealised placeholder content hides the problems your design will actually face.
14
15	- 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.
16	- 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.
17	- 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.
18
19	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.
20
21	---
22
23	## Mirror the Real Output
24
25	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.
26
27	- 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").
28	- 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.
29	- 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.
30	- 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.
31
32	A reinterpreted mock is a maintenance liability and a credibility risk: it looks like the product until someone compares it to the product.
33
34	---
35
36	## Keep It Truthful
37
38	The visual makes claims. Every one must hold.
39
40	- Numbers reflect reality. Stats, counts, and metrics are real or clearly illustrative — never inflated fiction presented as fact.
41	- **Labels match

dembrandtPublisher · 41 listings

Preview

dembrandt/dembrandt-skills

# 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

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

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-parad

Repodembrandt/dembrandt-skills

LicenseMIT

TypeSkills

CategoryDesign

UpdatedJul 2026

Repo stars27

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type

authentic-product-representation

27stars5forks

View on GitHub

How to install authentic-product-representation?

dembrandt/dembrandt-skills/authentic-product-representation

$npx -y skills add dembrandt/dembrandt-skills --skill authentic-product-representation

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Authentic Product Representation
2
3	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.
4
5	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.
6
7	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.
8
9	---
10
11	## Design With Real Content
12
13	Idealised placeholder content hides the problems your design will actually face.
14
15	- 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.
16	- 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.
17	- 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.
18
19	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.
20
21	---
22
23	## Mirror the Real Output
24
25	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.
26
27	- 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").
28	- 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.
29	- 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.
30	- 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.
31
32	A reinterpreted mock is a maintenance liability and a credibility risk: it looks like the product until someone compares it to the product.
33
34	---
35
36	## Keep It Truthful
37
38	The visual makes claims. Every one must hold.
39
40	- Numbers reflect reality. Stats, counts, and metrics are real or clearly illustrative — never inflated fiction presented as fact.
41	- **Labels match

dembrandtPublisher · 41 listings

Preview

dembrandt/dembrandt-skills

# 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

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

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-parad

Repodembrandt/dembrandt-skills

LicenseMIT

TypeSkills

CategoryDesign

UpdatedJul 2026

Repo stars27

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type