Your AI doesn’t need design advice. It needs design examples.
Every other design skill hands your model a paragraph — “make it look premium” — so it guesses, and you get AI-slop. section-designer hands it the real thing: 150 design systems as actual HTML and parsed tokens, plus a script that checks the output. Prediction from real examples is what an LLM is actually good at.
For founders, marketers and agencies whose AI writes great copy — and then wraps it in a section that looks like every other AI site.
opvs-skills install @di-atomic/section-designerThen say: “redesign this hero in Stripe style”
Why it works when “make it look like Stripe” doesn’t
# design-guidance.md Use a clean, modern, premium layout. Good contrast, nice spacing. Make it look like Stripe.
The model has to imagine Stripe from memory. It guesses — and guesses generic.
stripe/tokens.yaml #533afd, sohne 300 stripe/components.html real markup molds/stripe-hero.html copy verbatim critique-score.sh runs 9 checks
The model predicts from real examples — then a script verifies the output. No imagining, no self-grading.
Instructions make an LLM guess. Examples make it predict. That’s the whole difference.
What you actually get
It looks like a real company designed it
Name a system — Stripe, Linear, Apple. Your agent builds from its real components and tokens, so the section looks designed, not defaulted.
The slop never reaches your page
A script — not the model — grades the output on 9 measurable checks and won’t hand off until it passes. You stop being the QA.
A finished section in one message
It copies a proven mold verbatim instead of composing from a blank canvas — so you get a designer-grade hero, pricing block or CTA in the time it takes to ask.
Same words. One looks generated. One looks designed.
Plans that scale with your finance team.
Predictable. Auditable. Production-ready from day one.
See pricingTalk to our teamPlans that scale with your finance team.
Predictable. Auditable. Production-ready from day one.
See pricingTalk to our team →Left is what your agent ships by default — system fonts, a flat blue link, no hierarchy. Right is what section-designer hands back: Stripe’s real display type, spacing and violet CTA. Same copy, night-and-day credibility.
Not sure where your own site lands?
Six quick questions and I’ll score your site — designed, patchy, or AI-slop — then send you the exact fixes. No list, no spam.
Take the 60-second audit →A script checks the work — and catches its own mistake
> redesign this pricing hero in Stripe style It copies stripe/molds + pulls stripe/tokens.yaml — sohne display type, the #533afd violet, low chrome — composes the hero, then runs critique-score.sh: contrast, tap-targets, spacing, AI-slop + 5 more .... all pass BUT: Stripe’s button padding (8/16px) fails the 44px tap-target rule. → it bumps the padding to 12/24px and tells you it did. A script caught that, not the model second-guessing itself. You get the section, the exact tokens, and a receipt of every call it made.
Deterministic checks, not an LLM grading its own prose. That’s why it holds up.
I built this by dogfooding the same stack I run for clients.
section-designer is one skill in the system behind Di-Atomic — the marketing & compliance agency that runs cognitoAI, SpiderIQ and OPVS. If you want marketing that looks designed and actually converts — in any of our seven languages — that’s the day job. Let’s talk.
Book a 30-min call with Di-AtomicJust want the skill? Install @di-atomic/section-designer free.