- Name
-
@di-atomic/section-designer
- Tagline
-
Your AI doesn't need design advice. It needs design examples.
- Hero subhead
-
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.
- Who it's for
-
For founders, marketers and agencies whose AI writes great copy — and then wraps it in a section that looks like every other AI site.
- Version
-
0.3.0
- Tier
-
beta
- Path type
-
guidance-only
- Install command
-
opvs-skills install @di-atomic/section-designer
- Trigger phrase
-
redesign this hero in Stripe style
- Marketplace URL
-
https://market.opvs.ai/v/di-atomic/section-designer
- Blog URL
-
https://di-atomic.com/blog/shipping-di-atomic-section-designer-v0-3-0
- Stat 1 value
-
150
- Stat 1 label
-
systems shipped as real HTML + tokens
- Stat 2 value
-
9
- Stat 2 label
-
checks a script runs — not the LLM
- Stat 3 value
-
100/100
- Stat 3 label
-
marketplace security score
- Stat 4 value
-
Free
- Stat 4 label
-
while it's in beta
- What headline
-
What you actually get
- Cap 1 icon
-
🏛️
- Cap 1 title
-
It looks like a real company designed it
- Cap 1 desc
-
Name a system — Stripe, Linear, Apple. Your agent builds from its real components and tokens, so the section looks designed, not defaulted.
- Cap 2 icon
-
🛡️
- Cap 2 title
-
The slop never reaches your page
- Cap 2 desc
-
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.
- Cap 3 icon
-
⚡
- Cap 3 title
-
A finished section in one message
- Cap 3 desc
-
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.
- Showcase headline
-
Same words. One looks generated. One looks designed.
- Showcase before caption
-
What your agent ships by default — system fonts, a flat link, no hierarchy.
- Showcase after caption
-
What section-designer hands back — Stripe's real type, spacing and violet CTA. Same copy, night-and-day credibility.
- Diagram caption
-
section-designer composes and critiques; your publishing tool deploys.
- Worked title
-
A script checks the work — and catches its own mistake
- Worked example
-
> 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.
- Worked framing
-
Deterministic checks, not an LLM grading its own prose. That's why it holds up.
- Rel 1 icon
-
✍️
- Rel 1 name
-
@di-atomic/copy-engine
- Rel 1 desc
-
Writes the words that go inside the section.
- Rel 1 url
-
https://di-atomic.com/skills/copy-engine
- Rel 2 icon
-
🗣️
- Rel 2 name
-
@di-atomic/voice-builder
- Rel 2 desc
-
Captures the brand voice the copy is written in.
- Rel 2 url
-
https://di-atomic.com/skills/voice-builder
- Rel 3 icon
-
🖼️
- Rel 3 name
-
@di-atomic/media-generator
- Rel 3 desc
-
Renders and hosts the hero images it points at.
- Rel 3 url
-
https://di-atomic.com/skills/media-generator
- CTA headline
-
Ship sections that look like you hired a designer.
- CTA description
-
One install. 150 design systems in your agent's hands as real code, and a script between you and one more generic-looking page. Free while it's in beta.
- Security score
-
100
- Upstream license
-
Apache-2.0 (nexu-io/open-design)
