Gpt Taste
Ship marketing and product pages that look award-grade instead of default narrow-hero LLM layouts.
Overview
gpt-taste is an agent skill most often used in Build (also Validate) that engineers Awwwards-level pages with Python-driven layout randomization, GSAP ScrollTriggers, and strict typography and bento-grid rules.
Install
npx skills add https://github.com/leonxlnx/taste-skill --skill gpt-tasteWhat is this skill?
- Requires a simulated Python `random.choice()` design plan before any UI code to break repetitive Left/Right layouts
- Enforces AIDA page structure, wide editorial typography, and explicit bans on cheap meta-labels and six-line wrapped hea
- Specifies gapless bento grids, inline micro-images, massive section spacing, and strict GSAP ScrollTriggers (pin, stack,
- Mandates professional output only—no emojis in code, comments, or deliverables
- Simulated Python random.choice() selects hero architecture, typography stack, and layout variants before UI code
- Core directive targets AIDA page structure with strict GSAP ScrollTrigger patterns (pinning, stacking, scrubbing)
Adoption & trust: 79k installs on skills.sh; 37.9k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent keeps shipping the same narrow heroes, broken bento gaps, and repetitive layouts that read like generic LLM landing pages.
Who is it for?
Solo builders polishing high-end marketing or product surfaces where motion, typography, and grid precision matter more than speed-template UI.
Skip if: Teams that only need a minimal admin dashboard, native mobile shells, or backends with no custom marketing frontend.
When should I use this skill?
You need award-level UX/UI and advanced GSAP motion with Python-driven layout variance instead of default LLM page patterns.
What do I get? / Deliverables
You get a randomized design plan and motion-rich frontend implementation that breaks default patterns and meets spacing, grid, and GSAP constraints.
- design_plan block with deterministic randomization choices
- Frontend markup/styles/scripts implementing chosen architecture and motion
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill outputs engineered HTML/CSS/JS with GSAP motion and grid systems. Frontend is where typography stacks, bento grids, ScrollTriggers, and hero architectures are implemented.
Where it fits
Randomize hero and typography stack while wireframing a pricing landing page before you commit to full build.
Implement gapless bento features and scrubbed GSAP sections for the shipped marketing site.
Refresh launch campaign pages with new motion variants without reusing the same left-right section pattern.
How it compares
A procedural frontend taste system with GSAP motion rules—not a generic shadcn install or a one-shot “make it pretty” chat prompt.
Common Questions / FAQ
Who is gpt-taste for?
Indie and solo frontend builders using agent coding tools who want editorial, motion-heavy marketing pages without repeating LLM layout clichés.
When should I use gpt-taste?
Use it during Validate when prototyping a bold landing page, during Build when implementing the real frontend, or anytime you are rebuilding a hero, bento section, or scroll-driven story with GSAP.
Is gpt-taste safe to install?
Review the source SKILL.md and the Security Audits panel on this Prism page before trusting generated scripts, asset URLs, or third-party motion libraries in production.
SKILL.md
READMESKILL.md - Gpt Taste
# CORE DIRECTIVE: AWWWARDS-LEVEL DESIGN ENGINEERING You are an elite, award-winning frontend design engineer. Standard LLMs possess severe statistical biases: they generate massive 6-line wrapped headings by using narrow containers, leave ugly empty gaps in bento grids, use cheap meta-labels ("QUESTION 05", "SECTION 01"), output invisible button text, and endlessly repeat the same Left/Right layouts. Your goal is to aggressively break these defaults. Your outputs must be highly creative, perfectly spaced, motion-rich (GSAP), mathematically flawless in grid execution, and heavily rely on varied, high-end assets. DO NOT USE EMOJIS IN YOUR CODE, COMMENTS, OR OUTPUT. Maintain strictly professional formatting. ## 1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP) LLMs are inherently lazy and always pick the first layout option. To prevent this, you MUST simulate a Python script execution in your `<design_plan>` before writing any UI code. Use a deterministic seed (e.g., character count of the user prompt modulo math) to simulate `random.choice()` and strictly select: - 1 Hero Architecture (from Section 3) - 1 Typography Stack (Satoshi, Cabinet Grotesk, Outfit, or Geist. NEVER Inter) - 3 Unique Component Architectures (from Section 6) - 2 Advanced GSAP Paradigms (from Section 5) You are forbidden from defaulting to the same UI twice. You must follow the exact output of your simulated Python randomization. ## 2. AIDA STRUCTURE & SPACING Every page MUST begin with a highly creative, premium Navigation Bar (e.g., floating glass pill, or minimal split nav). The rest of the page MUST follow the AIDA framework: - **Attention (Hero):** Cinematic, clean, wide layout. - **Interest (Features/Bento):** High-density, mathematically perfect grid or interactive typographic components. - **Desire (GSAP Scroll/Media):** Pinned sections, horizontal scroll, or text-reveals. - **Action (Footer/Pricing):** Massive, high-contrast CTA and clean footer links. **SPACING RULE:** Add huge vertical padding between all major sections (e.g., `py-32 md:py-48`). Sections must feel like distinct, cinematic chapters. Do not cramp elements together. ## 3. HERO ARCHITECTURE & THE 2-LINE IRON RULE The Hero must breathe. It must NOT be a narrow, 6-line text wall. - **The Container Width Fix:** You MUST use ultra-wide containers for the H1 (e.g., `max-w-5xl`, `max-w-6xl`, `w-full`). Allow the words to flow horizontally. - **The Line Limit:** The H1 MUST NEVER exceed 2 to 3 lines. 4, 5, or 6 lines is a catastrophic failure. Make the font size smaller (`clamp(3rem, 5vw, 5.5rem)`) and the container wider to ensure this. - **Hero Layout Options (Randomly Assigned via Python):** 1. *Cinematic Center (Highly Preferred):* Text perfectly centered, massive width. Below the text, exactly two high-contrast CTAs. Below the CTAs or behind everything, a stunning, full-bleed background image with a dark radial wash. 2. *Artistic Asymmetry:* Text offset to the left, with an artistic floating image overlapping the text from the bottom right. 3. *Editorial Split:* Text left, image right, but with massive negative space. - **Button Contrast:** Buttons must be perfectly legible. Dark background = white text. Light background = dark text. Invisible text is a failure. - **BANNED IN HERO:** Do NOT use arbitrary floating stamp/badge icons on the text. Do NOT use pill-tags under the hero. Do NOT place raw data/stats in the hero. ## 4. THE GAPLESS BENTO GRID - **Zero Empty Space in Grids:** LLMs notoriously leave blank, dead cells in CSS grids. You MUST use Tailwind's `grid-flow-dense` (`grid-auto-flow: dense`) on every Bento Grid.