Design direction is the step that happens before a builder skill writes anything. It reads what your site already looks like, its palette, its type scale, its spacing, and settles on a direction so what gets built belongs to this site rather than to a generic template.
Pages generated without it have a particular look: technically correct, visually anonymous. Every heading the same weight, spacing that came from nowhere, colors that are close to the brand without being it. The cause is not the builder, it is that nobody decided anything before building started.
Run nibwp/design-direction before a build. It derives the palette, type scale and spacing from the live site and hands the builder skill a direction instead of a blank page.
Decide first, build second
Making the decision explicit, and making it from real site data, changes the output:
- Derived, not invented — Colors and type come from what the site already uses, so output matches.
- One decision, many pages — The direction holds across a build, so pages look related rather than merely similar.
- Palette slugs, not hex — Where a theme palette exists, output references it and follows later brand changes.
- A real type scale — Sizes land on a scale instead of being transcribed from whatever a screenshot measured.
- Spacing rhythm — Section padding follows a system, so the page has a beat.
- Feeds the builders — EtchWP, Bricks, Elementor, Kadence and Voxel Pro all start from the same direction.
From hours to one prompt
It runs first, and the builder skill picks up what it decided:
Build a pricing section
nibwp/design-direction (run)
✓ palette: 8 slots from the theme · type scale: 6 steps · spacing: 8px base
nibwp/kadence-pro-html-to-blocks (dry_run)
✓ uses palette slugs · sizes on scaleThe builder no longer has to guess what gray you meant. It was told, once, from your own site.
What you can build
A few of the things it prevents:
Near-miss colors
A gray that is almost your gray, on every page, forever.
Flat hierarchy
Headings that are all the same weight because nothing decided otherwise.
Random spacing
Padding transcribed from pixel noise instead of snapped to a scale.
Template look
Output that could belong to any site, which is the tell people notice first.
How it stays safe
- It reads, then decides — Deriving the direction changes nothing on the site.
- You can override it — It is a starting point. Say what you want instead and it takes the instruction.
- Recorded with the build — What it decided is reported, so a surprising result is explainable.
Getting started
- Run it before building — Call
nibwp/design-directionas the first step of any visual job. - Read what it derived — Check the palette and scale it reports against the site you know.
- Correct it if it is wrong — If the derived palette is off, say so. It is a proposal, not a verdict.
- Then build — Hand the direction to whichever builder skill is doing the work.