---
name: zyx-visual-design
description: "Use when designing or revising Zyx posts, carousels, stories, posters, presentations, or A4 visual documents from an approved brief using the supplied brand assets and components."
---

# Design Zyx visual content

Resolve the plugin root two directories above this file. Read `../../references/design-rules.md`, `../../references/platforms.md`, the six rules and relevant recipes in `../../design-system/README.md`, and the applicable lessons in `../../design-system/lessons.md`. Historical quotes are context, not new permissions.

1. Locate the approved brief and actual assets. Inspect supplied images before building around them. Use `../../design-system/tools/image_info.py` for dimensions, ratio, transparency, and SVG cut detection when appropriate.
2. Read `../../design-system/components/index.d.ts` and the README for each component used. Inspect ExampleCovers, ExamplePosters, and ExampleTemplates for layout choices. Write the per-slide layout plan before creating artboards.
3. Use real Canvas, HeaderFooter, Logo, and QRClosing. Load shared tokens, fonts, and assets. For HTML start with `../../examples/carousel.html` and use `../../scripts/local-assets.js`; for a Design canvas follow its adapter.
4. Preserve exact brief text and document fixed brand-component copy. Use placeholders for missing inputs. Keep the per-post CTA in the caption. Apply the shared safe-area, decor, variety, typography, and sizing rules.
5. Render, run checks, inspect each PNG, and follow `../zyx-design-review/SKILL.md`. Fix the same kind of defect wherever it occurs. When a real image replaces a placeholder, remeasure the affected layout and recheck screenshot/copy agreement.
6. Deliver editable source and requested exports with the completed review report and caption when in scope.

If the requested editor cannot run React, use its native primitives and the exact shared assets; explicitly record that adaptation. Do not substitute website UI rules for this visual-content system.