Keep your brand consistent, even when the tools change.

What would you like to make?

SIGNAL / FIELD · a reusable visual rulebook

AI-generated design concept · not a runtime screenshot

The input

Original fictional newsletter brand, navy/cobalt palette and approved cover, banner and card copy.

The work

Codex creates a concept board; the independent local compiler renders bilingual editable compositions and derives tokens, briefs and handoff from one rule file.

From your material to the finished files

1. Extract and resolve

   The Agent inspects your material, records repeated traits and flags uncertain fonts or conflicting references. Approve material choices before treating them as brand rules.

2. Compile the same source

   Run the included Node tool on visual-rules.md to create editable samples, token files, image briefs and a Figma handoff. No external service is contacted.

3. Check the real destination

   Audit source and output hashes, then inspect browser/image results. Apply the Figma mapping separately and verify bound instances before reporting it synchronized.

Bring this task into your Agent

Prepare these materials

Provide approved visual assets, usage rights, the current brand guide if any, and the copy/formats for this job. Existing rules should be adapted to the supported structured block; arbitrary Markdown is not parsed automatically.

1. Sign in to acquire the package.
2. Extract the entire folder into your project: .agents/skills/visual-rules-studio/SKILL.md (Codex) or .claude/skills/visual-rules-studio/SKILL.md (Claude Code).
3. Open a new chat in that project, attach your materials and replace the bracketed fields in the brief below. Ask the Agent to check package instructions and dependencies first.

Use $visual-rules-studio on my attached authorized brand assets. Identify recurring color roles, type hierarchy, spacing and imagery. Separate observed traits from proposed decisions; do not guess exact fonts. Write visual-rules.md using the supported schema and compile a new local sample folder. Use my [approved copy]. Do not upload assets or edit Figma yet.

The first result can be revised

Change only the accent in the canonical file, bump the version and compare. Rebuild into a new directory and verify that tokens, prompts and Figma map agree.

What the package includes

• One maintainable visual-rules.md: semantic colors, type, layout, imagery and evidence for design decisions.
• A local compiler producing 11 files plus a manifest: editable three-format preview, CSS/JSON tokens, image prompts, Agent brief and Figma mapping.
• Source-change reports, readable-color checks and file-tamper detection; manual visual and integration review guidance.

What you provide separately

• Your Codex or Claude Code access; Node.js 22+ and a browser for the local compiler. No npm packages or online account required for that helper.
• An available image tool for new bitmaps; Figma access and an editor or connector to apply the handoff.

Before you start

AI concept is an illustration; the separate HTML screenshots are actual compiler output. Does not automatically extract exact fonts from pixels, generate images, edit Figma, import arbitrary Markdown, synchronize cloud tools or publish. Figma files require a separate editor step. Model/image/Figma costs are separate.

More to make

• Waitlist Landing Page — Create a responsive prelaunch page with a product story, FAQ and clearly labeled local demo form. Includes editable source and desktop/mobile previews.
• SaaS Landing Page — Create a full SaaS marketing prototype with positioning, features, workflow, billing-period controls, FAQ and an implementation handoff.
• Editorial SaaS Design — For writing and knowledge products. Upright editorial serif, generous paper margins, deep green actions, asymmetric manuscript composition. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project.
• Industrial Catalog Design — For hardware, furniture and industrial products. Ruled catalogue grid, square geometry, product-first imagery and compact model annotations. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project.