Was ist enthalten

Eine SKILL.md (die Anleitung) + eine Startvorlage. Eine Vorschau:

Portrait Overlay Testimonials

When to use

• Your website's testimonial section is a gray wall of text quotes nobody reads, and you want faces to make it believable
• You have great customer quotes and portrait photos, but layering text over faces keeps turning into unreadable mush
• You are redesigning a landing page, a services page, or a homepage and the testimonial block is the part that has to earn trust
• You need a testimonial section that works on mobile (where overlays collapse) as well as on desktop
• You have permission to use people's photos and quotes and want to handle that permission properly, not as an afterthought

Workflow

1. Pick the quotes that earn trust (input: raw testimonials → output: 3–6 edited quotes)
   Choose quotes that are specific, not superlative: "Onboarding took one afternoon and our team actually uses it" beats "Amazing product, highly recommend!" Cut each quote to one or two sentences — the length a visitor will actually read — keeping the customer's own words and cutting only filler. For each quote, record the person's name, role, and company, and confirm you have their permission to publish the quote with their photo. If a quote cannot be attributed to a real person, do not use it: anonymous praise in a testimonial section reads as invented, because often it is.
2. Choose and prepare the portraits (input: photos + permissions → output: prepared portrait set)
   Pick portraits that are consistent: same crop (head and shoulders), same orientation, similar lighting and background tone, eyes toward the camera. Crop each to the same aspect ratio and check that faces stay clear of the overlay zone — the area where the quote card will sit. Confirm written permission for each photo (a message saying "yes, use my photo" counts if you save it; a verbal yes you cannot prove does not). Never crop a photo in a way that misrepresents the person, and never use a stock face next to a real customer's words.
3. Design the overlay (input: quotes + portraits → output: overlay spec)
   Specify the layout: portrait full-bleed with the quote card overlapping one corner or the lower third, a solid or semi-opaque card (never raw text straight onto a busy photo), and a contrast check — the card background must keep the text readable against every portrait, not just the lightest one. Set the type rules: quote at 20–24px minimum, attribution smaller but never below 14px, line length capped so the card never covers the face. Define the desktop layout and the mobile fallback (card slides below the photo, or the photo shrinks to a circular avatar) — the overlay must degrade gracefully, not just shrink.
4. Build the section (input: overlay spec → output: section markup + styles)
   Build one testimonial as a repeatable component: portrait image with alt text naming the person, quote in a blockquote, attribution with name / role / company, and a link (to the full case study or the customer's site) only where it is real. Make the component responsive: desktop shows the overlay, mobile stacks photo above card, and the layout never depends on a fixed pixel height. Add keyboard and screen-reader support — the quote must read in logical order (quote, then attribution) regardless of how the layers are positioned visually.
5. Verify trust and ship (input: built section → output: verified section + permission log)
   Run the checks: every quote matches the customer's original words (edits marked and approved), every photo has a saved permission, every portrait's alt text is correct, contrast passes on every card, the section works with images off (text still readable), and the mobile layout has been tested on a real phone. Keep a permission log — person, quote, photo, date permission given, and where it is saved — alongside the site source. If a permission is ever withdrawn, the log tells you exactly what to remove, and the component makes removal a one-line change.

Vorschau der Startvorlage

Portrait Overlay Testimonials — Build Sheet

One section, real people, real permission. Fill this in before building.

Quotes (3–6, specific over superlative)

Quote {1}

> "{edited quote — 1–2 sentences, customer's own words, filler cut only}"

• Name / role / company: {…}
• Original wording kept on file at: {path}
• Permission to publish quote + photo: [ ] confirmed, saved at {path / message date}

*(Repeat for each quote.)*

Portraits

Consistency check: same crop, same orientation, similar tone — [ ] Never: stock faces, another person's photo, AI faces next to real words.

Overlay spec

Das Skill-Paket selbst (SKILL.md + Vorlage) ist auf Englisch verfasst.

Das komplette Skill-Paket kaufen — $4.99 Pro — alle 511 Skills