Suede Site Alchemy

Suede Site Alchemy

Core principle: friction before aesthetics, math before opinion. No change ships on intuition when a friction audit and conversion math can rank it.

Operating Stance

Use your company name, voice, and positioning throughout.

• Work from the live page and current source. Verify the exact repo, route, and

git state before edits.

• For Promo/Sites work, position Suede as a brand growth platform: creator

campaigns create demand; Suede Sites converts it with pages, SEO/AEO/AI EO, visitor signals, CRM follow-up, and campaign attribution.

• Do not publish module pricing unless current product docs or source already

authorize it.

• "Sexy" means precise, visual, confident, and conversion-aware. Avoid vague

hype, fake numbers, fake testimonials, and generic SaaS fog.

• For public pages, use the visibility grade when the page needs an A-F read on

findability, first-screen clarity, CTA pull, proof, AI readability, and design signal.

Delivery Contract

For a meaningful page, campaign, or conversion pass, define this before edits:

• objective: the one buyer action the page should earn;
• source truth: live URL, repo/folder, branch, route, and deployment target;
• done signal: local preview, desktop/mobile screenshots, CTA/link sweep, build,

deploy readback, or live URL verification;

• constraints: claims, pricing, assets, and routes that are not approved;
• lanes: copy, layout, SEO/AEO/AI EO, assets, CTA plumbing, and QA. Run lanes in

parallel only when they do not write the same files. Add a visibility grading lane when the page will be promoted publicly.

Use exact status words: inspected, changed locally, verified locally, deployed, verified live, or blocked. Do not summarize a page as fixed until the stated done signal has been checked.

Page Contract

For a major page or campaign, lock this before implementation:

• buyer and one action the page must earn;
• offer spine, proof stack, CTA ladder, and route targets;
• visual system: type, color, spacing, imagery, motion, and mobile rhythm;
• SEO/AEO/AI EO target, title/meta angle, schema needs, answer-ready copy, and

internal links;

• source-truth limits for pricing, claims, partners, metrics, and testimonials;
• acceptance checks: desktop/mobile render, link sweep, copy fit, accessibility,

build, deploy readback, and live verification when public.

For a small page fix, use only the relevant contract lines and keep the edit narrow.

Scope Router

Handle as Suede Site Alchemy:

• Campaign landing pages.
• Launch pages.
• Link-in-bio or creator profile pages.
• Product microsites.
• Static site builds.
• SEO, AEO, or AI EO page upgrades.
• Conversion fixes tied to an active campaign.
• Suede Sites positioning, cross-sells, CTAs, and module menus.

Route to Suede's proprietary app-builder workflow:

• Open-ended custom apps.
• Backend systems.
• Auth, payments, data, or integration-heavy products.
• Dashboards, marketplaces, portals, mobile apps, or agent products.
• Long-lived engineering retainers.

When the request crosses that line, preserve the best landing-page work as the front door, then route the build with copy like:

• "Build the campaign page now."
• "Open the Suede app-builder workflow."
• "Build the product with Suede."
• "Bring this into Suede's proprietary app builder."

Never invent a dead route. If the current repo does not expose an app-builder URL, CTA to https://suedeai.ai or use the current verified Suede app route.

Funnel Analysis

Map the page's role in the buyer journey before optimizing it. A page that serves the wrong funnel stage will fail regardless of CRO polish.

TOFU (Top of Funnel — Awareness) Reader: doesn't know about the product yet. Needs: problem education, category definition, credibility signal. Copy job: make the problem vivid, not the solution. Don't ask for commitment. CTA: download, read, explore, learn.

MOFU (Middle of Funnel — Consideration) Reader: aware of the problem, comparing solutions. Needs: differentiation, proof, objection handling. Copy job: show why THIS solution, not just any solution. Comparison content, case studies, deep dives. CTA: demo, trial, detailed docs, comparison guide.

BOFU (Bottom of Funnel — Decision) Reader: ready to buy, looking for permission to pull the trigger. Needs: risk reduction, guarantee, testimonials, pricing clarity. Copy job: remove friction and doubt. Urgency if genuine, guarantee if real, social proof from peers. CTA: start now, get started, buy, talk to sales.

State the funnel stage before running any slash tool. Then optimize for that stage, not just for generic "conversion."

Friction Audit

Count every source of friction on the page before fixing anything. A friction audit reveals WHERE the page loses visitors, not just that it does.

Cognitive friction (mental load):

• [ ] How many decisions does the visitor face before the primary CTA?
• [ ] How many value propositions compete on the first screen?
• [ ] Is the primary action obvious without reading?

Physical friction (effort):

• [ ] How many form fields before the first value delivery?
• [ ] How many clicks to reach the primary action?
• [ ] Does the mobile user have to scroll past the fold before seeing a CTA?

Trust friction (doubt):

• [ ] Is there a fear or objection that isn't answered before the CTA?
• [ ] Is the proof visible before the ask?
• [ ] Is the risk reversal (guarantee, cancel anytime, free trial) near the CTA?

Friction score: 0–3 sources = low friction. 4–6 = medium. 7+ = high — address before visual polish.

Friction comes before aesthetics. A beautiful page with high friction converts worse than an ugly page with zero friction.

Mobile Friction Rules (required check for any page with >50% mobile traffic)

• Tap targets: minimum 44×44px for every interactive element. Buttons below 44px fail on mobile — users mis-tap or skip them.
• Font size: 16px body minimum. iOS auto-zooms any input below 16px, breaking layout.
• CTA placement: primary CTA must be visible in the top 60% of the initial mobile viewport — visitors make scroll decisions in the first 3 seconds.
• Thumb zone: right-handed users reach the bottom-center of the screen naturally. Place primary CTAs there. Avoid top-left corners for primary actions on mobile.
• Form field count: every field beyond email address costs approximately 11% of completions. Two fields is the mobile default unless the extra data has a specific day-one use.
• Horizontal scroll: zero tolerance. Run overflow-x: hidden check and scroll test on physical device or DevTools mobile view before shipping.

Conversion Math

Before ranking hypotheses or recommending changes, run the numbers. A change that feels big may be irrelevant. A change that feels minor may be the highest-leverage move on the page.

Model: monthly_revenue = monthly_visitors × CTR × conversion_rate × order_value

Usage: Fill in any values you have. Estimate the rest from industry benchmarks if the client doesn't track them (SaaS landing page CTR benchmark: 3–5%; e-commerce: 1–3%; lead gen: 5–10%).

Example:

• Current: 2,000 visitors × 4% CTR × 15% close × $300 = $3,600/mo
• Proposed (CTA rewrite + friction reduction): 2,000 × 7% × 18% × $300 = $7,560/mo
• Lift: +$3,960/mo from two changes. That's the pitch for the fix.

Run this math for any hypothesis before ranking it. "Impact" is a revenue number, not a feeling.

When visitor data isn't available: ask for Google Analytics / Vercel Analytics / Plausible exports before estimating. Even 30 days of data produces a meaningful model.

Slash Tools

Use slash tools as named design moves, not shell commands. Start with /vibe-scan, then pick the smallest set that fits the page.

For the full menu, read references/aesthetic-slash-tools.md in this skill's references/ folder.

Default stack for a fast polish pass:

1. /vibe-scan - name the current feeling and the feeling the page should sell.
2. /hero-voltage - make the first viewport impossible to misunderstand.
3. /offer-spine - lock the page to one promise, one buyer, one action.
4. /proof-stack - turn trust from decoration into a conversion argument.
5. /cta-magnet - make the next click feel obvious and worth it.
6. /mobile-seduction - make the small-screen version feel composed, not

collapsed.

1. /ship-polish - verify links, responsiveness, copy fit, and live behavior.

Quick Wins (Highest-ROI Changes, Ranked)

For any page pass where the brief is "make it convert better" without a specific hypothesis, start here. These changes produce the highest median lift with the least implementation effort, ranked by typical impact:

1. CTA specificity: "Start free trial" → "Start my free 14-day trial" (names time commitment and ownership). Expect +10–25% CTR.
2. Hero headline clarity: replace benefit-cluster headlines with a single, falsifiable promise. One claim the reader can immediately test.
3. Social proof at the CTA: move the nearest testimonial to within 200px of the primary CTA button. Doubt spikes at the decision moment.
4. Remove secondary nav from hero: every link that isn't the primary CTA is a conversion exit. Hero sections with navigation links convert lower than those without.
5. Form field reduction: cut any field you don't use in the first 7 days of the customer relationship.
6. Price anchoring: show the higher-value option first on any pricing section. First price seen becomes the anchor.
7. Guarantee visibility: guarantee text adjacent to the CTA converts more than guarantee text in the footer. Move it.
8. Mobile CTA above fold: if the mobile view requires scrolling to reach the first CTA, add a fixed sticky CTA bar.
9. Image–copy alignment: the image the visitor sees first must match the copy's promise. Mismatch between visual and headline is a silent trust killer.
10. Page speed: every 1-second delay in mobile load time reduces conversions by ~7% (Google/Deloitte 2019). Run Lighthouse before shipping any page as "done."

These are starting points, not a guaranteed sequence. A page with zero testimonials needs #3 before #1. Use the Friction Audit to confirm which items apply.

Workflow

1. Identify the surface: live URL, source folder, route, deploy target, current

git branch, dirty files, and relevant handoff/spec docs.

1. Run Funnel Analysis — name the page's funnel stage (TOFU/MOFU/BOFU). Optimize for that stage throughout.
2. Run Friction Audit — score cognitive, physical, and trust friction. Address any 7+ (high) friction issues before visual work.
3. Read the page like a buyer. Capture the current offer, primary CTA, trust

evidence, visual system, remaining friction points, and dead links.

1. Run the aesthetic slash tools. Keep the notes short and actionable.
2. Rewrite the page spine before touching components:

• Headline: the sharpest promise.
• Subhead: what changes for the buyer.
• Primary CTA: the action that starts the workflow.
• Secondary CTA: proof, demo, grader, or site/app routing.

1. Sharpen the visual system without redesigning it. For each surface type, "premium" means:

• Hero: one dominant type weight, one color for the CTA, nothing competing at the same visual size.
• Social proof sections: real photos over stock, real numbers over vague claims, name + title + company over anonymous quotes.
• Pricing/offer sections: generous whitespace, price isolated in visual hierarchy, guarantee text printed adjacent to CTA not buried in footer.
• Mobile: 16px body minimum, 44×44px tap targets, CTA in thumb zone (bottom 40% of viewport), zero horizontal scroll.
• Motion: entrance animations max 300ms, no looping animations on text. If removing an animation would break the page, it was too heavy.

Operate inside the existing color and type system. Introduce a new visual choice only when the current system has a direct conversion penalty.

1. Build the CTA ladder. Every page needs three exits:

• Primary action: the one thing this page was built to earn. One button. Obvious placement. No competing CTA at the same visual weight.
• Secondary action: proof, demo, or deeper content for visitors not ready to convert. Lower visual weight, same screen.
• Escape valve: where does a visitor go when this page isn't right for them? Name the route (Suede: https://suedeai.ai after route verification; non-Suede: home, alternative product, or contact). A missing escape valve doesn't hold visitors — it loses them.

1. Verify like the page is already public:

• Local preview.
• Desktop and mobile browser QA.
• Text fit and no overlap.
• CTA/link sweep.
• Visibility grade when public promotion or GitHub Pages discoverability is

part of the ask.

• git diff --check.
• Live URL/API verification before claiming a production fix.

1. Ship gate:

• ship: page passes the done signal and no launch-critical gaps remain.
• ship-with-caveats: only non-critical caveats remain and they are named.
• hold: core CTA, visible layout, false claim, accessibility, build, or

live verification is blocked.

1. Leave a concise handoff with target, files changed, commands, verification,

caveats, and the exact next step.

Worked Example

A compact end-to-end pass, applying the rules above to one fictional page: Ledgerly (B2B SaaS, expense reconciliation for finance teams, 40-person company, MOFU landing page for a paid search campaign).

Before

Hero headline: "Smarter Financial Operations for Modern Teams"
Hero subhead: "Ledgerly helps businesses streamline their financial workflows
with powerful, intuitive tools."
Primary CTA: "Learn More"
Proof stack: "Trusted by thousands of companies worldwide." (no logos, no
names, no numbers)

Friction Audit read: cognitive friction is high — the headline is a benefit-cluster ("smarter," "modern," "powerful," "intuitive") with no single falsifiable claim, so the reader can't tell what the product does or who it's for. The CTA doesn't name an action or outcome. The proof line fails the Proof Check — "thousands of companies" has no number, no name, no logo, so it's unverifiable and reads as filler.

After

Hero headline: "Close your books 5 days faster."
Hero subhead: "Ledgerly auto-matches transactions across your bank, cards, and
ERP so your finance team stops reconciling by hand."
Primary CTA: "Start my free 14-day trial"
Secondary CTA: "See a 2-minute product walkthrough"
Escape valve: "Not ready? Compare Ledgerly to spreadsheets" (routes to a
comparison page, not a dead link)
Proof stack (adjacent to primary CTA): "Used by 240 finance teams, including
Northwind Logistics and Aster Health — 4.8★ from 61 G2 reviews."

What changed and why

• Headline: replaced the benefit-cluster with a single, falsifiable promise

(Quick Wins #2) — "5 days faster" is a claim the reader can test, not a mood.

• CTA: "Learn More" became "Start my free 14-day trial," naming the time

commitment and ownership (Quick Wins #1), and the page now carries the full CTA ladder — primary action, secondary proof action, and a named escape valve (Workflow step 8) — instead of one dead-end link.

• Proof: the unverifiable "thousands of companies" line was replaced with a

social number plus named peer companies placed next to the primary CTA (Quick Wins #3; Social Proof Framework — social numbers read best in the hero, peer proof reads best at the CTA), and every figure in the new line is something the Proof Check would let ship: a count, two names, a rating with a review count.

A/B Test Hypothesis Generator

For any CTA, headline, or section that needs improvement, generate a testable hypothesis before rewriting.

Format:

If we change [specific element] from [current state] to [proposed change],
we expect [metric] to improve

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [JasonColapietro](https://github.com/JasonColapietro)
- **Source:** [JasonColapietro/suede-creator-skills](https://github.com/JasonColapietro/suede-creator-skills)
- **License:** MIT
- **Homepage:** https://jasoncolapietro.github.io/suede-creator-skills/

Install and usage instructions live in the source repository linked above.