Frontend & UI What it does gpt-taste Builds award-style landing pages with GSAP scroll motion and gapless bento grids. Curated collection
The design plugins that make Codex ship real UI
OpenAI Codex writes working code. Left alone it defaults to safe fonts, average spacing, and centered Helvetica. These are the plugins that give it taste: aesthetic skills and design-system rules. Install one, or run all of them inside Open Design.
Frontend & UI What it does gpt-taste Builds award-style landing pages with GSAP scroll motion and gapless bento grids.
Design Systems What it does Stitch Design Taste Writes a DESIGN.md that steers Google Stitch toward non-generic screens.
Frontend & UI What it does image-to-code Generates design images first, analyzes them, then builds matching frontend code.
Frontend & UI What it does imagegen-frontend-mobile Generates premium mobile app screen flows as images, not code.
Frontend & UI What it does imagegen-frontend-web Generates one horizontal reference image per landing page section.
Frontend & UI What it does minimalist-ui Builds warm monochrome editorial interfaces with flat bento grids.
Frontend & UI What it does design-taste-frontend Reads the brief, picks a direction, ships non-templated interfaces.
Design Systems What it does industrial-brutalist-ui Builds rigid Swiss print or CRT terminal interfaces with analog grain.
Frontend & UI What it does redesign-existing-projects Audits an existing site and upgrades it without breaking functionality.
Design Systems What it does brandkit Generates brand guideline boards, logo systems, and identity decks as images.
Frontend & UI What it does high-end-visual-design Blocks generic AI defaults and enforces agency-grade layout and motion.
Frontend & UI What it does pick-ui-library Matches a frontend task to one curated, opinionated library pick.
Frontend & UI What it does apple-design Apple’s fluid interface principles translated into web springs and gestures.
Frontend & UI What it does animation-vocabulary Turns a vague motion description into its exact technical term.
Frontend & UI What it does emil-design-eng Emil Kowalski’s rules for animation timing, easing and component polish.
Design Systems What it does UI-UX Pro Max · Design One entry point routing logo, identity, slides, banner and icon work.
Frontend & UI What it does UI-UX Pro Max · Banner Design Designs sized banners in HTML, then exports them as PNGs.
Frontend & UI What it does UI-UX Pro Max · UI Styling Builds accessible interfaces with shadcn components and Tailwind utilities.
Design Systems What it does UI-UX Pro Max · Brand Keeps brand guidelines, design tokens and assets in sync.
Frontend & UI What it does UI-UX Pro Max · Slides Builds HTML presentation decks with Chart.js and layout patterns.
Design Systems What it does UI-UX Pro Max · Design System Three-layer design tokens, component specs, and token-compliant slide generation.
Frontend & UI What it does design-skills · Editorial Magazine layout in Gelasio serif on a strict 8pt grid.
Frontend & UI What it does design-skills · Terracotta Clay accent on cream, DM Serif Display headlines, long-form reading.
Frontend & UI What it does design-skills · Dithered Dot-pattern shading and a limited palette for retro, high-contrast screens.
Frontend & UI What it does design-skills · Neumorphism Soft extruded surfaces in stone gray with Space Mono type.
Frontend & UI What it does design-skills · Bento Grid of varied blocks on cream, Inter type, compact scale.
Frontend & UI What it does design-skills · Claymorphism Puffy rounded 3D shapes, Poppins headlines, blue on white.
Frontend & UI What it does design-skills · Brutalism Raw concrete-inspired layouts, Darker Grotesque display, red and ochre.
Frontend & UI What it does Hallmark Anti-slop design flow with 58 gates and forced structural variety.
Frontend & UI What it does Impeccable Two dozen commands to build, critique, and refine frontend interfaces.
Design Systems What it does Design DNA Extract a reference design into structured JSON, then generate from it.
Design Systems What it does Material 3 Implement Google’s Material Design 3 across Compose, Flutter, and web.
Frontend & UI What it does Details that make interfaces feel better Sixteen concrete UI polish rules with a review checklist.
Frontend & UI What it does Agent-Native Plans Turn text plans into reviewable documents with wireframes and prototypes.
Design Systems What it does Kami Typeset resumes, white papers, decks, and landing pages on one design language.
Frontend & UI What it does Border Gradients Add a refined gradient edge to cards, modals, and hero surfaces.
Frontend & UI What it does Masked Reveal Reveal headlines word by word through an overflow mask on scroll.
Frontend & UI What it does Framed Grid Layout Build precise editorial layouts with thin frames and corner brackets.
Frontend & UI What it does Container Lines Draw quiet vertical guide lines at your content container edges.
Frontend & UI What it does Skeuomorphic UI Give buttons and panels tactile depth with layered gradients and shadows.
Design Systems What it does Beautiful Shadows Three ready-made Tailwind shadow utilities for neutral layered elevation.
Frontend & UI What it does Dither Background Canvas background with visible 4x4 Bayer dithering and square pixels.
Frontend & UI What it does WebGL Laser Full-screen shader beam with white-hot core and brand-tinted fog.
Design Systems What it does Mesh Gradient Dark Blue Clean Near-black navy system with a mesh field inside a hero shell.
Frontend & UI What it does Cinematic Scroll Storytelling Lenis plus GSAP ScrollTrigger recipes for scroll-driven landing pages.
Design Systems What it does Agency Grid Layout Minimal Editorial multi-column grid with oversized headlines and tiny uppercase labels.
Design Systems What it does Glass Dark Mode Clock Dark frosted surfaces built around a circular calibration dial.
Frontend & UI What it does WebGL 3D Object A lit Three.js hero mesh with PBR material and real shadows.
Frontend & UI What it does GSAP Skills Official GSAP animation set, from core tweens to ScrollTrigger and React.
Frontend & UI What it does Animation Review Find, improve and review motion against a senior craft bar. Next step
Skip the setup. Design with Codex inside Open Design
Open Design is the open-source, agent-native design workspace that runs around Codex. It keeps your systems, skills and templates consistent, so the agent ships work you own.