Authentic Product Representation
dembrandt/dembrandt-skillsProduct 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 fabricated marketing chrome. Use when building landing pages, hero sections, product screenshots, demo panels, or any visual that stands in for the real thing.
At a glance
This skill is for Presentations and helps you create authentic product screenshots, design landing page hero sections, and build product demo visuals.
git clone --depth 1 https://github.com/dembrandt/dembrandt-skills
cp -r dembrandt-skills/skills/authentic-product-representation ~/.claude/skills/authentic-product-representation
Setup, runtime and requirements describe dembrandt/dembrandt-skills, the repo this skill ships in.
Product MarketingLanding PagesAuthenticityVisual DesignHero ShotsUser Trust
Also in dembrandt/dembrandt-skills
View the repoDerive a full UI colour palette algorithmically from one or two brand colours. Darker and lighter variants for interactive states, desaturat...
A brand's visual tone — playful or serious, rounded or angular — should be consistent across all UI elements. Shape language in typography,...
Every interactive element needs a complete set of visual states — rest, hover, active/pressed, focus, disabled, and loading. States should b...
Choose light, dark, or combined color mode deliberately based on brand tone and user context. Offer a theme selector only when user control...
Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour...
When data has both a tabular/list representation and a visual representation, show both simultaneously and keep them synchronized. Clicking...
Complex data deserves multiple view modes — grid, list, table — chosen by the user based on their task. Row and item selection should use la...
Orchestrator for the full dembrandt UX pipeline. Routes a UI/UX task through six ordered stages — brand foundation → design tokens → layout...
Configuration UIs for domain experts — users who understand their field deeply but are not software developers — require domain language, se...
Elevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface. Combined with border-radius,...
Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dem...
Forms have three layers of guidance: helper text below the input explains what to enter, placeholder shows the expected format, and validati...
Other Presentations skills
Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch...
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set t...
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world prese...
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composit...
Open Design's Series A growth story: the traction curve, the expansion motion, and why it's venture-scale. Built as a decision-grade fundrai...
Open Design's community-growth campaign across GitHub, Discord, and X: the loops, the content calendar, and the pipeline math. Built as a de...