Portable Design Systems — Consistency as a File You Carry

Design consistency is usually enforced by humans staring at pages until they match. Three skills in the directory treat it as an artifact instead: extract the style, carry the file, re-apply it, and compress the images that result. visual-style at 9.3 is the anchor.

The failure mode of AI-generated design is not uglarity — the model produces competent-looking individual screens. The failure is drift: page three's buttons don't match page one's, the shadow depth quietly doubles, a fourth shade of near-identical blue enters the palette. Each artifact is fine; the system is incoherent.

Human teams fight drift with a design system — tokens, components, rules, written down. visual-style — 9.3, one of the top-scoring skills in our directory — is that idea, implemented as a skill, with one additional move that makes it genuinely interesting: portability.

Extract, then re-apply

visual-style runs in two directions, and the second is the point. The extraction pass takes an existing visual identity — a live site, a reference design — and reduces it to a structured system: the actual palette values, the type scale, spacing rhythm, border radii, shadow conventions, the component patterns they compose into. Not "a description of the vibe" — a token table you could diff.

The application pass then re-applies that extracted system to new surfaces. Same tokens, different canvas. This is what earns the 9.3: the skill closes the loop from "design exists somewhere" to "design enforced everywhere," and the artifact in between is concrete enough to be checked. Consistency enforced by a file is consistency that survives the departure of whoever had the taste.

The asset pipeline that finishes the job

Design consistency doesn't stop at layout tokens — it extends into the assets the design consumes, and two companion skills from the baoyu family cover exactly that:

• baoyu-article-illustrator — 9.1: generate article illustrations that hold to a consistent style — same visual language across an entire article instead of a different aesthetic per image.
• baoyu-compress-image — 9.1: compress the results without wrecking them — format choice and quality thresholds, the unglamorous step that determines whether the consistent design also loads consistently.

Notice the shape of the three together: system extraction (9.3), consistent asset generation (9.1), asset hygiene (9.1). It's a pipeline with the same anatomy as the code-side families we've covered — one skill per phase, scores that reflect narrow, completed jobs rather than one sprawling "make it beautiful" skill. The baoyu family pattern, discussed in our earlier deep dive, scales to visual work unchanged.

Why portability is the decisive property

The traditional design system has a portability problem: it lives in Figma, in a component library, in a team's shared head — and crossing any of those boundaries costs a manual re-derivation. The classic trigger for needing this: "make our new landing page match our existing app." Conventionally that's a screenshot-and-squint exercise; with visual-style it's an extraction pass and an application pass, with the token table as the interface between them.

That interface is also what makes the skill verifiable in our scoring — the difference between a 9.3 and a pleasant-sounding 8.0 is almost always whether the output can be checked. A extracted style can be checked: colors match the tokens or they don't, spacing hits the scale or it doesn't. "Make it feel cohesive" cannot be checked, and skills built on uncheckable outcomes score accordingly.

Design drift is a systems problem, and it was always going to get a systems answer. The answer isn't better taste from the model — it's taste, extracted once, carried in a file, and re-applied without ceremony. Three skills, 9.3 / 9.1 / 9.1, and a complete pipeline from "this is what we look like" to "this is what we ship."