Web & UI Design

Apply one of 10 ready-made color and font themes to slides, docs, reports or landing pages, or generate a new theme on the fly.

Guidance for building accessible, responsive interfaces with shadcn/ui and Tailwind CSS, including dark mode, theming and a canvas-based visual design approach.

Turns a theme into a short generative-art manifesto, then builds an interactive p5.js piece with seed navigation, parameter sliders and PNG export.

Inspect a running website for layout, responsive, accessibility and consistency problems, then fix them in the source code with minimal changes and re-check.

Make the agent design landing pages, portfolios and redesigns that do not look templated: read the brief, state a design read, set three dials, pick a real design system when one fits, and pass a strict pre-flight check.

Design web, mobile and desktop interfaces inside Penpot through its MCP server, with design-system checks, component and accessibility rules and platform sizes.

Find the real cause of layout bugs at specific screen widths: sideways scrolling, overflow, flex items that will not shrink, sticky that does not stick, 100vh on phones, and fixed bars under the browser UI.

List every state a screen or component needs: loading, empty, error, partial, disabled, offline, permission denied and extreme content, and decide what the user sees and can do in each.

Build a three-layer design token system (primitive, semantic, component), write component specs, and generate token-compliant HTML slide decks with Chart.js.

Build complex, self-contained React web artifacts with TypeScript, Tailwind CSS, and shadcn/ui.

Audit a page or component against WCAG 2.2 level AA: keyboard, focus, contrast, names and labels, structure, forms, dialogs, dynamic updates, zoom and target size, with each finding tied to a success criterion.

A searchable design knowledge base for interfaces: styles, color palettes, font pairings, UX guidelines, charts and stack-specific tips, used to pick a visual direction before you build.

Make an interface carry any language without redesign: message catalogs, locale-aware formatting, layouts that survive different text lengths, CJK and right-to-left support, and language switching with proper URLs.

Build light and dark mode that is correct in both: semantic color tokens, the system setting plus a manual toggle, no flash of the wrong theme on load, and contrast checked in both themes.

Build an animation from scratch in the right order: should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts and exits. It writes the code and refuses to animate what should not move.

Upgrade an existing website or app to premium quality without rewriting it: scan the stack, audit typography, color, layout, states and content for generic AI patterns, then apply targeted fixes in priority order.

Stress-test a component with the worst realistic data: long names, unbreakable emails, one-letter names, missing fields, 1,284 members, empty lists. It reports what broke, why, and the fix for each, and stops before changing anything.

Teach the agent to design like a premium agency: exact fonts, spacing, shadows, nested card structure and motion curves that make a site feel expensive, plus a ban list of the cheap AI defaults.

Describe a motion effect in your own words and get its exact name: "the bouncy thing when a popover opens" is Pop in, "the iOS rubber-band scroll" is Rubber-banding. Handy for briefing a designer or prompting an AI.

Review and build UI with Emil Kowalski's design-engineering craft: when not to animate, which easing and duration to use, springs, clip-path, gestures, performance and accessibility, with a required Before / After / Why review table.