Gives your AI coding agent UX judgment for interface work, such as choosing a drawer over a modal, picking palettes that pass contrast, and designing button states and app navigation. It helps the agent avoid common design mistakes before you have to fix them.
@dembrandtDerive a full UI palette from one or two brand colours — state variants, brand-tinted greys, semantic colours. Use when building…
@dembrandtTop bar, sidebar rail, app launcher, tenant and environment cue, status bar. Use when designing the persistent shell, a…
@dembrandtProduct visuals must show the real product with real data. Use when building landing pages, hero sections, screenshots or demo…
@dembrandtShape language across type, radius and icons carries brand personality. Use when starting a design system, picking icons or…
@dembrandtRest, hover, active, focus, disabled and loading states, derived from the base colour. Use when designing buttons, links, inputs…
@dembrandtRebuild a live web page 1:1 from measurement into Figma, Penpot or code, then verify it. Use when reproducing a page or checking…
@dembrandtLight, dark or both, and when a theme selector is worth it. Use when defining a base palette or deciding on dark mode support.
@dembrandtButtons, inputs, badges and pills share radius, colour logic, shadow, border and spacing. Use when building, changing or…
@dembrandtShow a table and its map, diagram, timeline or chart together, with selection synced both ways. Use when data appears in two…
@dembrandtView modes, row selection, mass actions, sorting, filters, search and table patterns. Use when designing data tables, listings,…
@dembrandtOrchestrator that routes a UI/UX task through brand, tokens, layout, components, polish and accessibility. Use for multi-concern…
@dembrandtSettings for experts who are not developers — domain language, sane defaults, grouping by professional concept. Use when…
@dembrandtIs this you? Claim your profilePut a plugin at the top of Plugins, from $9
