shipped@di-atomic · v0.3.0 · beta
@di-atomic/section-designer
Compose brand-grade sections from 150 real design systems.
150real design systems in the bundle
9critique dimensions before hand-off
100/100marketplace security score
v0.3.0beta · live on OPVS marketplace
Install
opvs-skills install @di-atomic/section-designerThen say: “redesign this hero in Stripe style”
What it does
🧩
150 systems, read verbatim
It reads the chosen system’s tokens — Stripe, Linear, Apple — and applies them exactly. No improvising.
✅
A 9-dimension gate
Every section passes contrast, tap-target, AI-slop and token-verbatim checks before it hands off.
⚡
3 molds, instant start
Copy a real HTML mold verbatim — Stripe pricing, Linear CTA, Apple features — instead of composing from zero.
In one call
> redesign this pricing hero in Stripe style section-designer picks the stripe tokens (sohne-var, deep-violet #533afd, low chrome), composes the hero, then runs critique-score.sh: contrast 4 pairs 0 fails tap-target 2 buttons 0 fails ai-slop 0 hits token-verbatim 0 improvised colors composite 4.67 / 5 0 measurable fails Hands back HTML + tokens + a critique receipt. WCAG bumped the button padding to 12/24px, and the receipt says so.
A real trace — copy, tokens, and a critique receipt. Not a screenshot.
Compose a section, watch the gate.
One install, 150 systems in your bundle, 9 critique dimensions between your agent and a slop-ship. Free while beta.
Install @di-atomic/section-designer