Use this workflow when visual direction is the weak link: the user wants a polished frontend, a UI mockup, an app screen, a dashboard, a landing page, a visual redesign, or image generation to guide frontend implementation.
This skill composes three activities:
- Create or refine a UI direction with image generation.
- Translate the selected direction into real frontend code.
- Verify the rendered result in a browser and iterate visually.
Workflow
- Inspect product context before designing.
- audience and job-to-be-done
- screen type: dashboard, settings, editor, commerce, landing page, game, etc.
- existing framework, design system, component library, and constraints
- whether the surface is an operational tool, expressive site, or immersive/game UI
- Pick one clear visual direction before image generation.
- Prefer a concrete direction such as refined B2B operations, editorial analytics, industrial console, playful maker tool, scientific workspace, or focused commerce catalog.
- Decide the memorable design move: typography, information density, layout rhythm, product imagery, surface treatment, motion, or interaction model.
- Write an implementation-oriented prompt.
- Ask for a UI screenshot or screen mockup, not a marketing poster, unless explicitly requested.
- Include layout regions, expected content density, states, and constraints.
- Prohibit generic AI UI patterns: SaaS card walls, purple-blue gradient dominance, decorative blobs, fake glass, ungrounded icons, oversized hero sections for tools, and placeholder text that hides hierarchy.
- Use image generation when a new visual target or raster asset is needed.
- Use the available image generation tool or plugin for mockups and project-bound assets.
- Keep generated images in the project when they are production assets.
- Do not use a generated screenshot as the final UI. It is a reference unless the user asked for a bitmap asset.
- Critique the generated direction before coding.
- Check fit with product, audience, workflow, feasibility, responsive behavior, accessibility, and implementation cost.
- If it misses the intent, do one targeted revision instead of drifting through unrelated variants.
- Implement the chosen direction in code.
- Reuse existing components, tokens, routing, state, and data patterns.
- Encode the visual direction with real layout, typography, CSS variables/design tokens, states, and responsive constraints.
- Keep operational tools efficient and scannable.
- Verify visually in a browser after frontend changes.
- Start or reuse the dev server.
- Open the relevant route with Browser or Playwright when available.
- Check desktop and mobile widths.
- Look for text overflow, overlaps, unstable dimensions, broken assets, inaccessible contrast, blank canvases, and mismatch with the selected direction.
- Iterate in code until the rendered UI is coherent, not merely until tests pass.
Prompt Template
Create an implementation-oriented UI mockup for <product/screen>.
Audience and job: <who uses it and what they need to accomplish>
Screen type: <dashboard/settings/editor/landing page/etc.>
Visual direction: <one concrete aesthetic direction>
Memorable design move: <typography/layout/density/media/motion/etc.>
Required regions: <navigation/header/main content/actions/states>
Content density: <sparse/balanced/dense> with realistic labels and data hierarchy
Implementation constraints: design must translate into web components and responsive CSS
Avoid: generic SaaS card walls, purple-blue gradient dominance, decorative blobs, fake glass, unreadable tiny text, marketing hero layout unless requested
Output: high-quality UI screenshot-style mockup, clear hierarchy, realistic spacing, no watermark
When To Skip Image Generation
Skip generation and implement directly when the user requests a small deterministic CSS fix, the project has a strict design system, the work is primarily data correctness or accessibility remediation, or the asset is an existing SVG/vector/icon-system edit.
Final Report
Include chosen visual direction, generated asset or mockup paths if any, implementation files changed, browser/device checks performed, and remaining visual risks.