Frontend & UI
gpt-taste
Builds award-style landing pages with GSAP scroll motion and gapless bento grids.
What it is
A frontend directive that forces layout variance via simulated random selection of hero, typography, components, and GSAP paradigms. It also enforces AIDA page structure and large section spacing.
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP Scro
Why it matters for design
- Hero headlines stay two or three lines because containers widen instead of wrapping into walls.
- Bento grids use grid-flow-dense, so no cell is left empty or broken.
- Cheap meta-labels are banned and button text contrast is verified before output.
What it covers
- Python-driven true randomization
- AIDA structure and spacing
- Hero architecture and the 2-line iron rule
- The gapless bento grid
- Advanced GSAP motion and hover physics
- Content, assets and strict bans
How to install
gpt-taste
-
Clone the repo.
git clone https://github.com/Leonxlnx/taste-skill -
Point Codex at the skill file.
skills/gpt-tasteskill/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Ask for a page; the skill emits a design_plan block before any UI code.
-
Review its randomization picks: hero layout, font stack, components, GSAP paradigms.
-
Check the pre-flight items: hero width math, grid density, label sweep, contrast.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗More Codex design plugins
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. Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.