What this prompt does
This prompt converts a UI screenshot or mockup into a real [framework] component using Gemini's vision. It asks for ten things at once: a layout that matches the image, styling via [styling], full responsiveness across your [breakpoints], semantic HTML with ARIA, every interactive state, extracted color tokens, icons from [icon_library], TypeScript prop types, [variant_count] variants where the design implies them, and a Storybook story.
The structure works because it front-loads the boilerplate that's tedious to write by hand. By demanding ARIA, focus and hover states, and CSS variables up front, you skip the accessibility and theming cleanup that usually comes later. The [framework] and [styling] variables decide the entire output shape, [breakpoints] controls the responsive behavior, and [icon_library] tells the model which icon set to map glyphs to instead of inventing SVGs.
When to use it
- You have a design mockup or screenshot and want a starting component, not pixel-by-pixel hand-coding
- You're building dashboards or web apps and want semantic, accessible markup generated up front
- You need consistent
[breakpoints]applied so the component is responsive from the start - You want color tokens and CSS variables extracted from a design automatically
- You need TypeScript prop types and a Storybook story scaffolded alongside the component
- You want
[variant_count]variants stubbed when the design clearly implies them
Example output
Expect a single [framework] component file styled with [styling], including semantic markup, ARIA attributes, hover/focus/active/disabled states, a token set of CSS variables for the extracted colors, mapped [icon_library] icons, typed props, the requested variants, and a Storybook story. If the design shows data, it includes a mock data structure, and it notes any ambiguities it had to interpret.
Pro tips
- Feed a clean, full-resolution screenshot — vision models approximate pixels, so cramped or low-res images produce sloppy spacing
- Match
[framework]and[styling]to your real stack exactly; mixing them forces a rewrite - Always tighten spacing and accessibility by hand afterward — generated ARIA and gaps are a strong draft, not final
- Set
[icon_library]to what you already use so it maps to real, importable icons instead of guessing - Use
[variant_count]conservatively; ask for variants only when the design genuinely shows them, or you'll get speculative props - Verify the extracted color tokens against your design system rather than trusting eyeballed hex values
