| name | asset |
| description | Token-driven visual-asset producer (icons/banners/logos/data-viz/slides) on DESIGN.md tokens + the aesthetic gate. Use to generate a visual asset when a design system exists. Not for non-visual. |
asset
The visual-asset producer over the theme system. v6 had five separate gateway-* asset skills
(icon/banner/brand-assets/dataviz/presentation); v7 collapses them into one token-driven producer
that routes by asset type — the same systems-not-skills move that made autopilot thin. Every asset it
emits references the design tokens (no raw hex/px) and conforms to the project's DESIGN.md, so it
passes the aesthetic gate by construction rather than being audited into compliance after the fact.
What this does / does not do
Does: produce a typed visual asset (icon / banner / brand / dataviz / presentation) from the design
contract — token-referencing, on-style, spec-declared (sizes, safe-zones, formats); write a receipt.
Does not: invent the design system (that's design-brief → DESIGN.md + DTCG tokens), run the
visual verdict (that's the aesthetic gate — asset conforms to it), produce audio/non-visual media
(separate), or emit raw values (the token policy is the whole point).
When NOT to use
- The target has no visual surface / no design system — there is nothing to produce against. Run
design-brief first to establish DESIGN.md + tokens.
- The user wants the design contract (palette/type/voice) — that's
design-brief, not asset.
- The user wants the audit verdict on an asset — that's the
aesthetic gate.
- Audio assets — out of scope (the v6
gateway-audio is a separate media-domain capability, deferred).
Reference Routing
| Situation | Reference |
|---|
| Per-asset-type specs (icon styles/sizes, banner safe-zones/dims, brand/logo, chart selection, slide layout) | references/asset-specs.md |
| Design KB lookup (style/palette) · token emit · the audit it must pass | ../kb-seed/ · ../dtcg-emit.py · ../../../gateways/aesthetic.md |
Inputs
- The asset request: type (icon|banner|brand|dataviz|presentation) + its parameters.
- The design contract:
DESIGN.md + the validated DTCG token file (from design-brief/dtcg-emit).
- The design KB (
kb-system query --room ui-style/ui-palette) for style grounding.
How to do it
- Load the contract. Read
DESIGN.md + the DTCG tokens. No contract → run design-brief first (do
not invent a palette here).
- Route by type and apply its spec (
references/asset-specs.md):
- icon — SVG, one of the declared styles, token-driven stroke/fill (
currentColor or
var(--token)), consistent stroke width + sizing scale, batch + multi-size export.
- banner — declared format + dimensions; critical content in the central safe zone; one CTA;
≤ 2 font families from the type system.
- brand — logo/wordmark in the declared style; clear-space + min-size rules; mono + color variants.
- dataviz — chart type selected by the data shape (not by default); token palette; accessible
(not color-alone; labeled).
- presentation — slides on the token system; one idea per slide; chart-integrated.
- Token policy (hard). Every visual value references a token (
var(--token)), never a raw
#hex/px. This is what makes the output pass the aesthetic gate's token-compliance BLOCK.
- Self-check against the aesthetic gate (
../../../gateways/aesthetic.md): contrast, named-style
adherence, no anti-default patterns without rationale. Fix before emit.
- Emit + receipt. Write the asset file(s); record the type, the tokens used, and the gate self-check.
Output
- The asset file(s) (SVG / PNG / HTML deck) at the declared product path — persistence: Spec-Anchored
(versions with the product). Token-referencing; on-contract.
- receipt (
<workspace>/receipts/asset-receipt.json): base schema + asset_type, tokens_referenced
(bool — no raw values), style_source (DESIGN.md / KB drawer), aesthetic_self_check, outputs.
persistence: Spec-Anchored.
Proactive Triggers
- No
DESIGN.md/tokens present: stop and run design-brief — an asset without a contract is a guess
that will fail the aesthetic gate.
- A raw hex/px about to be emitted: convert it to a token (or add the token) — raw values are the
aesthetic gate's token-policy BLOCK.
- A chart type chosen by default (always bar): pick by the data shape (distribution/relationship/
trend/part-to-whole), not habit.
Completion Criteria
Done when: the requested asset exists at the product path, every visual value references a token, it
adheres to DESIGN.md's named style, and the aesthetic self-check passes; an asset receipt records the
type + token compliance.
Not done if: any raw #hex/px was emitted; the asset ignores the design contract; a chart type was
chosen by default; it was produced with no DESIGN.md to conform to.
Next step: the aesthetic gate audits the asset in context; executor integrates it into the build.
Related Skills
- design-brief: writes the contract (
DESIGN.md + tokens) asset produces against. Run it first.
- aesthetic gate: audits the produced asset.
asset conforms by construction; the gate enforces.
- theme system (
kb-system, dtcg-emit): the design KB + token emitter asset reads.