Design Tools AI UX patterns
Design-tool patterns for gen UI, layout, variants, and prompt-to-interface flows inside creative and productivity products.
Start here
Core patterns for design tools UX.
13 patterns
In-painting
Modify specific areas
Variation Picker
4-grid selection
Image Upscaling
AI-powered resolution enhancement
Style Transfer
Applying visual styles
Background Removal
Automatic background removal/transparency
Object Removal
Remove unwanted objects from images
Text-to-Image with Advanced Controls
Advanced generation controls
Style Interpolation
Blend between multiple styles
Infinite Canvas
Spatial AI organization
Prompt to UI
Text to Component
Theme Generation
Color system creation
Color Palette Generator
Generate color schemes from images/text
Component Variants
Generate multiple UI variations
Frequently asked questions
Who are design-tool patterns for?
Product teams shipping AI inside Figma-like tools, site builders, slides, and canvas products—where output is visual structure and components, not only text.
How does gen UI differ from chat in the same app?
Gen UI patterns place structured output on the canvas with inspectable layers. Chat patterns handle intent and iteration in language—many products combine both with artifacts.
When should users pick from a variation grid?
When exploration is visual and comparisons are faster side-by-side—image gen, layout options, or component variants—rather than serial regenerate in a thread.
What should inpainting and object-removal patterns expose?
Clear selection affordances, before/after preview, and undo. Users need to trust regional edits won’t corrupt the rest of the canvas.
How do design patterns relate to design systems?
Style transfer, component variants, and theme generation should respect tokens your system already defines—patterns here describe UX for applying AI within DS constraints.
Are demos available for visual patterns?
Several design patterns include live demos where the interaction is the lesson; others lean on product screenshots—check each detail page.