How do I install the Visual Reference Generation skill?

Run npx skillmds@latest add cbrock84/visual-reference-generation in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Visual Reference Generation safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Visual Reference Generation?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Visual Reference Generation free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Visual Reference Generation?

cbrock84 (@cbrock84) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Visual Reference Generation by cbrock84

Name: Visual Reference Generation
Author: cbrock84

Visual Reference Generation

Produces design reference imagery before implementation — screen concepts, layout directions, and flows for web or mobile that make a verbal brief concrete enough to argue with. Use this when a brief needs visualizing before anyone builds, when comparing layout directions, when handing a developer a target, or when stakeholders are describing different things with the same words.

cbrock84 8893f2b 2.5 KB Updated Sep 17, 2026

File contents

Visual reference generation

Arguing about an image costs an hour. Arguing about a build costs a sprint. Generate the picture first.

Before generating

Settle these, or the output is decoration:

Surface and platform — web page, native mobile screen, dashboard. These are not the same problem at different aspect ratios: touch targets, native chrome, and scroll behavior change what a good layout is.
What it optimizes for — one conversion, one task completion, one first impression. Stated, so the image can be judged against something.
Content reality — real headline lengths, real data volumes, real edge cases. A concept built on three-word labels collapses on contact with actual copy.

Generating

One concept per image. Tiling several ideas onto one canvas makes them impossible to compare or iterate separately.
Generate genuinely different directions, not variations of one. Three near-identical options is one option presented three times.
Include the states that will exist: a populated view and an empty one, at minimum.

Web versus mobile

Web — the fold is a real constraint but not a hard one; horizontal space allows genuine layout choices; hover exists. Design for a range of widths, and decide what the narrow case does.

Mobile — thumb reach dictates where primary actions sit; native navigation patterns are expectations, not suggestions; there is no hover, so affordance must be visible. Design the scroll, not the screenshot.

After generating

Say explicitly what in the reference is direction and what is placeholder. A developer handed a concept will otherwise implement the lorem ipsum faithfully.

Never

Generate before the content, states, and constraints are settled. A reference built on placeholder copy hides every real problem.
Present a generated image as a working design. Say what it is.
Generate with filler text where real string lengths decide the layout.
Hand off an image as the spec. Hand off the tokens, spacing, and states behind it.

---name: visual-reference-generationdescription: Produces design reference imagery before implementation — screen concepts, layout directions, and flows for web or mobile that make a verbal brief concrete enough to argue with. Use this when a brief needs visualizing before anyone builds, when comparing layout directions, when handing a developer a target, or when stakeholders are describing different things with the same words.---# Visual reference generationArguing about an image costs an hour. Arguing about a build costs a sprint. Generate the picturefirst.## Before generatingSettle these, or the output is decoration:- **Surface and platform** — web page, native mobile screen, dashboard. These are not the same problem at different aspect ratios: touch targets, native chrome, and scroll behavior change what a good layout is.- **What it optimizes for** — one conversion, one task completion, one first impression. Stated, so the image can be judged against something.- **Content reality** — real headline lengths, real data volumes, real edge cases. A concept built on three-word labels collapses on contact with actual copy.## Generating- **One concept per image.** Tiling several ideas onto one canvas makes them impossible to compare or iterate separately.- **Generate genuinely different directions**, not variations of one. Three near-identical options is one option presented three times.- Include the states that will exist: a populated view and an empty one, at minimum.## Web versus mobile**Web** — the fold is a real constraint but not a hard one; horizontal space allows genuine layoutchoices; hover exists. Design for a range of widths, and decide what the narrow case does.**Mobile** — thumb reach dictates where primary actions sit; native navigation patterns areexpectations, not suggestions; there is no hover, so affordance must be visible. Design the scroll,not the screenshot.## After generatingSay explicitly what in the reference is **direction** and what is **placeholder**. A developerhanded a concept will otherwise implement the lorem ipsum faithfully.## Never- Generate before the content, states, and constraints are settled. A reference built on placeholder copy hides every real problem.- Present a generated image as a working design. Say what it is.- Generate with filler text where real string lengths decide the layout.- Hand off an image as the spec. Hand off the tokens, spacing, and states behind it.

Frequently asked questions