{"slug":"visual-reference-generation","title":"visual-reference-generation","summary":"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","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-08-30T09:48:07.870888Z","repo":{"url":"https://github.com/cbrock84/headcount","stars":1697,"forks":256,"license":"MIT","updatedAt":"2026-09-17T19:13:19Z"},"bodyHtml":"<hr>\n<h2>name: visual-reference-generation\ndescription: 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.</h2>\n<h1>Visual reference generation</h1>\n<p>Arguing about an image costs an hour. Arguing about a build costs a sprint. Generate the picture\nfirst.</p>\n<h2>Before generating</h2>\n<p>Settle these, or the output is decoration:</p>\n<ul>\n<li><strong>Surface and platform</strong> — web page, native mobile screen, dashboard. These are not the same\nproblem at different aspect ratios: touch targets, native chrome, and scroll behavior change what\na good layout is.</li>\n<li><strong>What it optimizes for</strong> — one conversion, one task completion, one first impression. Stated, so\nthe image can be judged against something.</li>\n<li><strong>Content reality</strong> — real headline lengths, real data volumes, real edge cases. A concept built\non three-word labels collapses on contact with actual copy.</li>\n</ul>\n<h2>Generating</h2>\n<ul>\n<li><strong>One concept per image.</strong> Tiling several ideas onto one canvas makes them impossible to compare\nor iterate separately.</li>\n<li><strong>Generate genuinely different directions</strong>, not variations of one. Three near-identical options\nis one option presented three times.</li>\n<li>Include the states that will exist: a populated view and an empty one, at minimum.</li>\n</ul>\n<h2>Web versus mobile</h2>\n<p><strong>Web</strong> — the fold is a real constraint but not a hard one; horizontal space allows genuine layout\nchoices; hover exists. Design for a range of widths, and decide what the narrow case does.</p>\n<p><strong>Mobile</strong> — thumb reach dictates where primary actions sit; native navigation patterns are\nexpectations, not suggestions; there is no hover, so affordance must be visible. Design the scroll,\nnot the screenshot.</p>\n<h2>After generating</h2>\n<p>Say explicitly what in the reference is <strong>direction</strong> and what is <strong>placeholder</strong>. A developer\nhanded a concept will otherwise implement the lorem ipsum faithfully.</p>\n","files":[{"path":"references/sources.md","sizeBytes":867,"isText":true},{"path":"SKILL.md","sizeBytes":2855,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-20T13:52:57.093609Z","sha256":"5EF4BA2C3BE056A626A6FFD8F1AA847B1FBD38D5485BF2DB65EC6132C46E4EFC","sizeBytes":2143},"review":null,"source":{"repositoryUrl":"https://github.com/cbrock84/headcount","path":"plugins/product/skills/visual-reference-generation","license":"MIT","commit":"98d1c17d480f606060102a781f9a8601690685f7","subtreeSha":"6E3F32EB2BC431332DC5BEFAB12B9ED6FD5C0502D16DD3E0E8B4F9770602D939","lastSyncedAt":"2026-09-28T20:55:36.604139Z"},"reviewedAt":"2026-09-20T13:54:30.099457Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/cbrock84/headcount/tree/main/plugins/product/skills/visual-reference-generation"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install cbrock84-headcount@llmmart"},{"target":"git","command":"git clone https://github.com/cbrock84/headcount.git"}]}