← Back to Blog

My best design skill isn't the one on the marketplace.

Copied!
My best design skill isn't the one on the marketplace.

I spent three months building a design skill I published to the OPVS marketplace. It ships with 150 named design systems, a 7-dimension critique gate, and a 100/100 security score. Real work. Real money on the line.

Then I spent a weekend building a scrappy internal skill for my own OPVS God View cockpit. Not for the marketplace. Not for anyone else. Just for me.

The scrappy one had a pattern the marketplace one didn't. Yesterday I stole it back.

Here's the breakdown.

What I was already shipping

@di-atomic/section-designer went live at v0.2.1. The bundle: 150 design systems (stripe, linear-app, apple, mercury, notion, plus 145 more), a critique script that runs 7 checks before hand-off, and a hard-earned lesson from Vercel's OSS-sponsored taste-skill: dial-based composition (VARIANCE / MOTION / DENSITY) plus an AI-slop blacklist and an em-dash ban.

That skill was already doing real work. Ask it "redesign the /pricing hero in stripe style for fintech CFOs" and it composed section markup, verified against WCAG AA contrast, caught filler-verbs before they shipped, checked for anti-default palettes per vertical, refused to hand off until the critique passed. 7 measurable dimensions. Zero silent-fails.

If you'd asked me two weeks ago, I'd have said section-designer was close to a wrap. Ship v0.2.1, move on.

Then I built a weekend project

Building agent skills has its own patterns. When I needed an interface for my OPVS God View, which is the operator cockpit for my Fleet-of-Agents platform, I built a project-scoped skill called opvs-ui-designer. Not for the marketplace. Not adapted from anyone else's OSS. Just me, one weekend, hardcoding my own aesthetic (absolute-black cockpit, IDE density 10/10, semantic status-color dictionary).

It has 8 files. Section-designer has 300+. My weekend project is a fraction the size.

But when I sat down to analyze it honestly, opvs-ui-designer had a pattern section-designer didn't have.

The pattern I was missing

In section-designer, when an agent needs to build a stripe-style pricing hero, it reads stripe's DESIGN.md, extracts tokens, composes HTML from scratch every time. New session, new composition. The agent has to re-derive the same section shape every request.

In opvs-ui-designer, when an agent needs a fullscreen operator drawer, it doesn't compose from scratch. It copies a physical HTML mold file (mold-operator-fullscreen-takeover.html) verbatim. Prepends a comment declaring which mold was used. That's it.

The mold ships with a frontmatter block:

<!-- MOLD: mold-operator-fullscreen-takeover.html
     canonical_specs:
       operator_drawer_height: 60vh
       operator_drawer_top_border: 2px solid var(--state-executing)
       ... -->

The critique script reads that canonical_specs block and verifies the composed output actually respects every value. If the agent copied the mold but tweaked the button padding, the script catches it.

That pattern (physical blueprints as first-class artifacts, script-verifiable against declared specs) was in my scrappy internal skill and not in my public one.

Diagram: two compose-flow chains side by side. Left chain is section-designer flow, three steps: read DESIGN.md, extract tokens, compose from scratch with an 'improvise' annotation. Right chain is opvs-ui-designer flow, two steps: grab mold.html, done. A gold arrow loops back from the right chain into a molds folder inside the section-designer territory, labeled v0.3.0.

The steal back

v0.3.0 shipped yesterday. I moved the old registry directory to source/legacy/ and made molds/ a first-class layer at bundle root. 3 seed molds now ship:

  • stripe-fintech-pricing-hero.html: reproduced from the 4.82/5 conversation example that shipped with v0.1.0

  • linear-app-b2b-cta-section.html: a real critique-passed pre-footer CTA

  • apple-premium-consumer-features-grid.html: demonstrates the vertical-anti-default rotation (apple tokens applied verbatim, palette rotated to Cold Luxury per the premium-consumer ban)

Two new rules landed in the critique script:

Rule 8: MOLD DECLARATION. Every composed output must start with <!-- MOLD: <slug>.html --> or <!-- MOLD: none (reason) -->. Skipping the declaration equals skipping Step 2 of the compose flow. First smoke test caught 1 real drift on its first invocation.

Rule 9: COMPONENT SPEC. If a mold is declared, the script reads its canonical_specs frontmatter and verifies every value against the composed output. 14 specs checked in the smoke test, zero violations.

The critique gate went from 7 to 9 measurable dimensions.

Diagram: a composed HTML section at the top with a MOLD declaration comment and h1 example. Two speech-bubble callouts point up at it. Left callout says Rule 8 MOLD DECLARATION with a gold PASS checkmark. Right callout says Rule 9 COMPONENT SPEC with a gold 14/14 verified badge. Below both, small handwritten label reads 7 dims to 9 dims.

I also pre-parsed tokens for all 150 systems into tokens.yaml files. extract-tokens.sh used to re-parse DESIGN.md at runtime (about 200ms). Now it does a lookup in the pre-parsed YAML (about 2ms). 100 times faster. And zero transcription drift when the agent iterates across turns.

Diagram: before-after split. Left side labeled before shows DESIGN.md into a runtime parse scribble into a clock reading ~200ms with drift-prone annotation. Right side labeled after shows tokens.yaml into a lookup table into a smaller clock reading ~2ms with deterministic annotation. Between them, a bold gold 100x badge and arrow. Bottom label reads x 150 systems.

Why this matters. Bidirectional learning between skills.

I built the marketplace skill by stealing from Hyperframes (script-driven enforcement, "move quality into tooling") and Vercel-sponsored taste-skill (dial vocabulary, AI-tells catalog, em-dash ban). Both are public. Both have hundreds of stars. That's the direction we normally think about: public repo teaches marketplace skill.

The weekend project I built for my own cockpit doesn't ship anywhere. It has no stars. It has no README. And it had a pattern that beat both public sources.

The lesson: your best design patterns don't have to come from big open-source projects. Sometimes they come from a scrappy internal build that solves one specific problem cleanly. If you're building agent skills, look at what you already have on your own disk before you look at anyone else's.

Marketplace skills learn from open source. Public open-source teaches. And your throwaway internal skill? It might be the smartest teacher of them all.

Try it

@di-atomic/section-designer@0.3.0 is live on the OPVS marketplace at 100/100 HEALTHY. Tier is beta, customer-visible now.

Install and browse molds/:

opvs-skills install @di-atomic/section-designer@0.3.0

Compose a section and see whether the mold pattern changes your flow. If it does, tell me. If it doesn't, tell me that too. Every ship is a hypothesis about how agents should build. Yesterday my hypothesis got sharper because of a weekend project I built for myself.

Marketplace: market.opvs.ai/v/di-atomic/section-designer

← BACK TO BLOG