Agent Skills
› cbrock84/headcount
› visual-reference-generation
visual-reference-generation
GitHub在开发前生成设计参考图，将口头需求转化为可视化的界面概念、布局方向和流程，用于明确目标、对比方案及指导开发实现。
Trigger Scenarios
需求描述模糊需可视化
对比不同布局方向
向开发人员提供视觉目标
Install
npx skills add cbrock84/headcount --skill visual-reference-generation -g -y
SKILL.md
Frontmatter
{
"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.
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.
Version History
- d58a7ee Current 2026-09-02 21:09
