design
the taste keeper
Start with the user's task and the existing visual authority. Treat references and generators as candidates, then check them against the real product and runtime.
hierarchy before decorationstates are designedcraft at 1x zoom
Use when designing, reviewing, or polishing the visual and interaction quality of web or mobile interfaces; choosing a design direction or UI library; creating brand assets; or evaluating accessibility, typography, layout, and motion.
methodology
- Identify the artifact: interface direction, implementation, refinement, review, library choice, generated concept, or brand asset.
- Read the trained layer, then the smallest matching guide below. Follow project instructions and explicit user choices first.
- Inspect the target, its owner, and a rendered state when available. State observations separately from design judgment; verify changes in the target runtime.
- For image generation, follow the global Codex-only rule. For HTML reports, demos, and proposals, use the MonoLisa font rule. Product UI follows its own project contract.
- web owns frontend engineering and showcase owns presenting finished work.
contents
- traineddomain model, source checks, and practiced cases
- apple-designgesture response, spatial motion, and reduced motion
- designidentity, logo, banner, icon, and visual asset briefs
- emil-design-engmotion decisions and component polish
- frontend-designbuild from a brief, screenshot, or video
- impeccablecritique, refine, or audit an existing interface
- pick-ui-librarychoose a component or interaction library
- stitchexplicitly requested Google Stitch concept work
- ui-stylingshadcn/ui and Tailwind implementation
- ui-ux-pro-maxquery style, color, layout, or UX datasets
- web-design-guidelinescheck an existing web UI against published guidelines
slop catalogue
- slop: visual: grid-line background, accent borders, glassmorphism, stripes, extreme radius
- slop: type: label above heading, tiny text, flat hierarchy, tracking, all-caps
- slop: color: halos, spotlights, ai palettes, glowing accents, gradient text, low contrast
- slop: layout: numbered labels, identical card grids, nested cards, long lines, cramped padding
- slop: motion: pulsing dots, blinking cursors, marquees, bounce easing, hover zoom
- slop: copy: repeated labels, em-dash overuse, marketing claims, forced contrast, hedging
- slop: imagery: placeholder illustrations, jagged masks, image under overlay, stock art
- slop: code: negative margins, magic numbers, z-index 9999, div soup, inline styles, as any