Claude Skill

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 h

LLM Mart · 0 points · 10 0 0

Virus-scanned Reviewed automatically before listing.

Full trust report

Download cbrock84-headcount-plugins_product_skills_visual-reference-generation-98d1c17.zip · 2 KB

cbrock84/headcount 1633 245 forks MIT Updated 7d ago

Part of cbrock84/headcount — 160 skills

Install

skills CLI npx skills add https://github.com/cbrock84/headcount/tree/main/plugins/product/skills/visual-reference-generation

Claude Code claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install cbrock84-headcount@llmmart

Git git clone https://github.com/cbrock84/headcount.git

The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole cbrock84/headcount collection as a plugin from our marketplace. Git is the plain clone.

Skill manifest

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.

Sources

references/sources.md in this skill lists the outside authorities that settle the questions here — what each one is authoritative for, and what you may do with it. Check them before answering on anything they cover, and cite what you used. Most are free to read and not free to reproduce; the use note on each is binding.

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.

Files (headcount)

references

sources.md 867 B

# Sources — `product:visual-reference-generation`

<!-- Generated by scripts/build-sources.py from sources/*.toml. Do not edit. -->

Check these before answering on anything they cover, and cite what you used. The use note on each one is binding: most of what a professional cites is free to read and not free to reproduce.

## Compendium of U.S. Copyright Office Practices

US Copyright Office · US · public domain (US government) — quote freely

<https://www.copyright.gov/comp3/>

**Authoritative for:** What is protectable and registrable, including the Office's position on human authorship for machine-generated material and how much of a layout or typeface is protectable at all.

---

Sources are maintained in `sources/` upstream, not here. If one is wrong, out of date, or missing, fix it there — this file is regenerated and an edit to it is lost.

SKILL.md 2.8 KB

---
name: visual-reference-generation
description: 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 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.

## Sources

`references/sources.md` in this skill lists the outside authorities that settle the questions
here — what each one is authoritative for, and what you may do with it. Check them before
answering on anything they cover, and cite what you used. Most are free to read and not free
to reproduce; the use note on each is binding.

## 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.