High-converting web design techniques that dazzle and persuade. Covers social proof design, pricing page architecture, CTA optimization, scroll-driven persuasion, interactive demos, trust signals, and the visual craft behind sites that sell. Activate on 'sales page design', 'conversion design', 'high-converting', 'landing page that sells', 'pricing page design', 'social proof', 'dazzle', 'wow factor', 'persuasive design', 'conversion rate', 'make it sell'. NOT for copywriting (use marketing copywriting skills), not for A/B testing setup (use frontend-developer), not for paid ad creative (use marketing skills).
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Instruções da origem · Visualização somente leitura
license
Apache-2.0
name
web-sales-design
description
High-converting web design techniques that dazzle and persuade. Covers social proof design, pricing page architecture, CTA optimization, scroll-driven persuasion, interactive demos, trust signals, and the visual craft behind sites that sell. Activate on 'sales page design', 'conversion design', 'high-converting', 'landing page that sells', 'pricing page design', 'social proof', 'dazzle', 'wow factor', 'persuasive design', 'conversion rate', 'make it sell'. NOT for copywriting (use marketing copywriting skills), not for A/B testing setup (use frontend-developer), not for paid ad creative (use marketing skills).
allowed-tools
Read,Write,Edit,Glob,Grep,WebSearch,WebFetch
metadata
{"category":"Design & UX","tags":["sales","conversion","persuasion","landing-page","pricing","social-proof","cta","trust"],"pairs-with":[{"skill":"hero-section-design","reason":"Hero is the first sales moment — sets conversion trajectory"},{"skill":"web-design-expert","reason":"General design foundation that sales design builds upon"},{"skill":"product-appeal-analyzer","reason":"Evaluates whether the design actually creates desire"},{"skill":"ux-friction-analyzer","reason":"Removes barriers between desire and action"},{"skill":"motion-design-web","reason":"Animations that demonstrate, reveal, and persuade"},{"skill":"webapp-paywall-implementation","reason":"The actual gate after the design has done its job"}]}
The craft of building websites that sell. Not marketing strategy, not copywriting, not A/B test infrastructure — the actual design patterns, visual systems, and interactive techniques that turn visitors into customers.
Core principle: The best sales design is invisible. Visitors don't think "this is selling to me." They think "this is exactly what I need." Every pixel, every scroll reveal, every social proof placement either builds trust and desire or erodes it. There is no neutral.
When to Use
Use for:
Designing landing pages that need to convert visitors to signups/purchases
Building pricing pages with effective tier architecture
Placing and designing social proof (testimonials, logos, case studies)
Crafting CTA buttons that get clicked (size, color, copy, placement)
What the best do differently (Stripe, Linear, Vercel, Notion):
Stripe: Animated gradient backgrounds that feel alive, not decorative. Product capability revealed through micro-interactions — you scroll and the product demos itself.
Linear: Dark mode that signals "power tool for serious builders." Zero visual waste. The design IS the product promise — speed and precision.
Vercel: Typography-forward hero with one line that frames the entire product. CTA is "Start Deploying" not "Sign Up" — action-oriented.
Notion: Shows the product working, not a screenshot. The hero IS a mini-demo.
Section 2: Logo Bar (The Trust Shortcut)
4-6 recognizable logos. Not 20. Quantity dilutes; quality validates.
function LogoBar() {
return (
<section className="logo-bar">
<p className="logo-bar-label">
Trusted by teams at
</p>
<div className="logo-bar-logos">
{logos.map(logo => (
<img
key={logo.name}
src={logo.src}
alt={logo.name}
className="logo-bar-logo"
/>
))}
</div>
</section>
);
}
Grayscale logos by default (less visual noise, more credibility paradoxically)
All logos same visual height (28-32px) regardless of original proportions
5 logos is the sweet spot — fewer feels sparse, more feels cluttered
Label above ("Trusted by," "Used by teams at") not below
If you don't have recognizable logos, use metrics instead: "2,400+ teams", "10M+ deploys"
Section 3: Problem (Pain Acknowledged)
The visitor must feel seen. This section validates their struggle.
Pattern: The three-pain grid
function ProblemSection() {
return (
<section className="problem-section">
<h2 className="section-eyebrow">Sound familiar?</h2>
<div className="pain-grid">
<PainCard
icon={<ClockIcon />}
title="Weeks lost to review cycles"
description="PRs sit for days. Context is lost. Engineers context-switch
between features while waiting for approvals."
/>
<PainCard
icon={<AlertTriangleIcon />}
title="Bugs slip through anyway"
description="Manual review catches style issues, not logic bugs.
The things that break production still break production."
/>
<PainCard
icon={<TrendingDownIcon />}
title="Shipping velocity flatlines"
description="More engineers, same output. Process overhead grows
faster than the team."
/>
</div>
</section>
);
}
Design rules:
Use the visitor's words, not your product's jargon
3 pain points maximum (more dilutes impact)
Icons should reinforce the emotion, not decorate
The section should make visitors nod, not flinch — empathy, not fear
Section 4: Agitate (The Cost of Doing Nothing)
This section raises the stakes. Not with fear — with clarity about what the problem actually costs.
Pattern: The consequence cascade
Show escalating consequences: time wasted, money lost, opportunity missed, team morale eroded. Use real numbers when possible ("The average team loses 14 hours/week to code review overhead").
Design approach: Darker background, slightly tighter typography, optional animated counter showing accumulating waste. This section is visually "heavier" than the problem section — it's the low point before the solution arrives.
Section 5: Solution (Product as Resolution)
The emotional pivot. The page shifts from problem to possibility.
Pattern: Feature showcase with scroll-triggered reveals
Anchoring (Vercel pattern): Enterprise tier with "Custom" pricing appears first or last, anchoring the Pro tier as reasonable by comparison.
Decoy pricing: The Starter tier exists partly to make Pro look like a bargain. If Starter has 3 projects and Pro has unlimited, the $29 gap feels trivial.
Annual nudge (Stripe pattern): Default to annual billing with a visible "Save 20%" badge. Monthly option available but not default. The toggle defaults to the position that benefits both parties.
Feature comparison table (Vercel pattern): Sticky header with plan names. Checkmarks and dashes (not just text). The highlighted column stays visually distinct as you scroll. Group features by category with section dividers.
What to learn from each:
Company
Pricing Strength
Design Technique
Stripe
Radical transparency
Usage-based pricing with calculators, no hidden fees
Linear
Simplicity
Two tiers, no feature matrix clutter
Vercel
Developer trust
Dark mode, technical detail, code-native feel
Notion
Accessibility
Free tier generous enough to hook, paid tier for teams
Framer
Visual proof
Pricing page itself demonstrates the product's capabilities
CTA Button Design
The CTA button is the single most revenue-critical element on any page. Every property matters.
Color choice for CTAs is not arbitrary — it must contrast with the page palette while matching the emotional register of the action.
Color
Hex Range
Emotional Register
Best For
Blue
#2563eb - #1d4ed8
Trust, reliability, professionalism
SaaS signups, B2B, finance
Green
#16a34a - #15803d
Safety, go, affirmation
Free trials, "safe" actions, eco products
Orange
#ea580c - #c2410c
Energy, warmth, urgency (mild)
E-commerce, limited offers, creative tools
Purple
#7c3aed - #6d28d9
Premium, creative, innovative
Design tools, premium tiers, creative SaaS
Black
#18181b - #09090b
Authority, premium, confidence
Luxury, developer tools, minimalist brands
Red
#dc2626 - #b91c1c
Urgency, importance, stop-and-look
USE SPARINGLY — cancellations, warnings only
The real rule: Your CTA must be the highest-contrast interactive element on the page. If your page is blue-themed, a blue CTA disappears. Use the complementary color or a warm accent.
CTA Copy That Converts
Weak (Generic)
Strong (Specific)
Why It Works
Submit
Get my free report
Specific outcome
Sign Up
Start building free
Action + benefit + risk removal
Learn More
See how it works
Lower commitment, higher curiosity
Buy Now
Secure my spot
Ownership + mild urgency
Get Started
Launch my first project
Visualizable action
Download
Get the playbook
Named deliverable
Rules:
First person when possible ("Start my free trial" outperforms "Start your free trial")
2-5 words maximum
Verb-first (action-oriented)
Benefit-laden, not task-describing
Never "Submit" — that is not a human word
CTA Placement Strategy
┌─────────────────────────────────────┐
│ Hero CTA │ ← For visitors who arrive ready
│ (Primary + Secondary) │
├─────────────────────────────────────┤
│ ...content... │
├─────────────────────────────────────┤
│ Mid-page CTA │ ← After the solution section
│ (Inline, less prominent) │ For visitors convinced midway
├─────────────────────────────────────┤
│ ...more content... │
├─────────────────────────────────────┤
│ Sticky CTA (optional) │ ← Appears after hero scrolls
│ (Compact bar, top or bottom) │ out of view
├─────────────────────────────────────┤
│ Final CTA │ ← After all proof is delivered
│ (Large, with guarantee text) │ For visitors who read everything
└─────────────────────────────────────┘
Show the sticky bar only after the hero CTA scrolls out of view. Hide it when the final CTA section comes into view. This ensures there is always a CTA available without being obnoxious.
Social Proof Design Patterns
Social proof is the single highest-leverage conversion element after the hero. Placement and design matter as much as the content.
The Social Proof Pyramid
Layer different types of proof throughout the page:
Place the base layers (logos, counters) near the top. Place deeper proof (testimonials, case studies) further down where visitors are making decisions.
ETHICAL CONSTRAINT: These must be real events, not fabricated. If you have actual signups, show them (with privacy consent). If not, use aggregated metrics instead. See the Anti-Patterns section for why fake activity feeds are harmful.
Before/After Comparisons
One of the most powerful proof patterns — tangible transformation.
Trust is not one element — it is a system woven throughout the page.
Trust Signal Placement Map
Signal
Where to Place
Why There
Company logos
Below hero
Immediate credibility before reading
Security badges (SOC2, GDPR)
Near forms and pricing
Reduce anxiety at commitment points
Money-back guarantee
Below pricing CTA
Remove purchase risk at decision moment
Human faces
Testimonials, about section
Faces trigger trust response (amygdala)
"No credit card required"
Next to signup CTA
Eliminate the #1 signup barrier
Privacy policy link
Near email capture
Show respect for their data
Real-time user count
Hero or social bar
Demonstrate momentum and adoption
Press logos ("Featured in")
Below logo bar or footer
Third-party validation
Response time ("Reply in <1hr")
Near contact/support
Demonstrate commitment to service
The Guarantee Component
function GuaranteeBlock() {
return (
<div className="guarantee-block">
<ShieldCheckIcon className="guarantee-icon" />
<div>
<h4>30-day money-back guarantee</h4>
<p>
Try it risk-free. If it is not right for your team,
email us within 30 days for a full refund. No questions,
no hassle, no hard feelings.
</p>
</div>
</div>
);
}
Pre-filled with realistic defaults (don't start at zero — that shows zero savings)
Sliders over text inputs (lower friction, more playful)
Show the result updating in real-time as sliders move
Include the assumptions transparently (builds trust)
Always link the result to your CTA: "Save $X/year — Start free"
Anti-Patterns: Dark Patterns to Avoid
This skill exists to build sites that sell through genuine value, not manipulation. The following patterns are never acceptable. They may boost short-term metrics but they destroy trust, increase refund rates, generate negative word-of-mouth, and in many jurisdictions are now illegal.
1. Fake Urgency / Countdown Timers
What it looks like: "Offer expires in 23:14:07!" — but the timer resets on refresh.
Why it is wrong: Visitors notice. They open an incognito window, see the timer reset, and never trust your brand again. The EU Digital Services Act and similar regulations are actively penalizing this pattern. Booking.com was fined for it.
What to do instead: If you have a genuine deadline (product launch, cohort enrollment), display the real date. "Cohort starts March 15 — 12 spots remaining" is honest urgency.
2. Confirmshaming
What it looks like: "No thanks, I don't want to grow my business" as the dismiss option.
Why it is wrong: It is passive-aggressive. It makes visitors feel manipulated, which is the opposite of trust. MyMedic's "No, I'd rather bleed to death" is the canonical example of how not to do this.
What to do instead: "No thanks" or "Maybe later" — neutral, respectful language. Treat the visitor as an adult making a rational decision.
3. Hidden Costs
What it looks like: Pricing page shows $29/mo, checkout adds $5 "platform fee" + $3 "support fee."
Why it is wrong: 48% of shoppers abandon carts due to unexpected costs. The damage to trust is permanent.
What to do instead: Show the total price upfront. If there are usage-based components, show a calculator with realistic estimates. Stripe's transparent pricing is the gold standard.
4. Roach Motel (Easy In, Hard Out)
What it looks like: One-click signup, but cancellation requires a phone call or chat with a retention agent.
Why it is wrong: Customers trapped by friction become hostile ex-customers. They leave 1-star reviews and warn others. This pattern is now illegal under the FTC's "Click-to-Cancel" rule (2024).
What to do instead: Cancellation should be as easy as signup. Offer a pause option, a downgrade path, or an "are you sure?" with genuine reasons to stay — but never block the exit.
5. Misdirection / Visual Manipulation
What it looks like: The "Accept all cookies" button is large and blue. The "Manage preferences" link is gray 12px text.
Why it is wrong: GDPR enforcement is catching up to this pattern. More importantly, visitors notice the asymmetry and it erodes trust in everything else on the page.
What to do instead: Give both options equal visual weight. If your product is good, informed consent converts better long-term.
6. Fake Social Proof
What it looks like: Fabricated testimonials, stock photo "customers," inflated user counts, fake activity feeds.
Why it is wrong: It is fraud. The FTC actively investigates fake reviews and has levied multi-million dollar fines. Beyond legality, one exposed fake testimonial invalidates all your real ones.
What to do instead: Use real testimonials with real names and real photos (with permission). If you don't have enough social proof yet, use metrics ("500+ beta users") or early-access quotes. Authenticity at low scale beats fabrication at high scale.
7. Forced Continuity
What it looks like: "Free trial!" that auto-converts to a paid plan with no warning email.
Why it is wrong: Surprise charges generate chargebacks, refund requests, and trust destruction. Apple and Google app stores now require explicit confirmation before paid conversions.
What to do instead: Send a reminder email 3 days before trial ends. Make the conversion opt-in if possible. Transparency converts better because it creates goodwill.
The Ethical Test
Before shipping any persuasion pattern, ask:
Would I screenshot this and post it on Twitter? If the answer is "that would look bad," don't ship it.
Does this work if the visitor notices the technique? Good persuasion works when visible. Dark patterns only work when hidden.
Would this cause a customer to warn others? If yes, the lifetime cost exceeds any short-term conversion gain.
Is the visitor making an informed decision? Persuasion is helping people decide. Manipulation is deciding for them.
Responsive Conversion Design
Sales pages must convert on mobile — 60%+ of traffic is mobile in 2026.
Mobile adaptation — How each section responds on small screens
The best sales design respects the visitor enough to be honest and compelling enough to be unnecessary. If your product is genuinely good, your job is to remove the barriers between the visitor and the value — not to trick them past those barriers.
