skills.rest
dylinmat
dylinmatCOMMUNITY
Explore all skills by this author →
GitHub

gpt-taste

Generates award-level frontend pages with GSAP animations, bento grids, and AIDA structure.

Updated Jun 11, 2026
Search Tags:#landing page#react#tailwind#frontend design#gsap#ui generation#bento grid
One-click install
npx skills add https://github.com/dylinmat/design-skills-plugin --skill gpt-taste-dylinmat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gpt-taste
Source: https://github.com/dylinmat/design-skills-plugin/tree/main/plugins/design/skills/gpt-taste
Command: npx skills add https://github.com/dylinmat/design-skills-plugin --skill gpt-taste-dylinmat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated landing pages suffer from repetitive layouts, narrow containers causing 6-line wrapped headings, empty gaps in bento grids, cheap meta-labels, and invisible button text. This Skill enforces strict design rules to produce varied, motion-rich, editorial-quality frontend code. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates Python-based seeded randomization to select hero architectures, typography stacks, components, and GSAP paradigms so no two pages repeat. - Strict Layout Rules: Enforces wide H1 containers (2-3 line limit), gapless bento grids via grid-flow-dense, massive section spacing, and AIDA page structure. - Advanced GSAP Motion: Implements scroll pinning, scrubbing text reveals, card stacking, and image scale/fade effects with @gsap/react and ScrollTrigger. - Use Case: Ask for a landing page for a SaaS product and receive a complete React/Tailwind page with a cinematic hero, dense bento feature grid, pinned scroll sections, and a pre-flight design plan verifying all constraints. ## Quick Start Ask the AI to build a landing page for your product using the gpt-taste skill and it will output a verified design plan followed by the full UI code.

Frequently Asked Questions about gpt-taste

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an award-level landing page with AI?▼

Invoke this Skill with a page request and it outputs a design plan followed by complete React and Tailwind code. It enforces wide hero containers, gapless bento grids, AIDA structure, and GSAP scroll animations automatically.

How to prevent LLM-generated headings from wrapping into 6 lines?▼

The Skill mandates ultra-wide H1 containers such as max-w-5xl or max-w-6xl with clamp-based font sizing. This guarantees headings flow horizontally in 2 to 3 lines instead of stacking vertically.

Does this Skill work with GSAP ScrollTrigger in React?▼

Yes, it writes real GSAP code using @gsap/react and ScrollTrigger. Supported patterns include section pinning, scrubbing text reveals, card stacking, and image scale-and-fade scroll effects.

Why do AI-generated bento grids have empty gaps?▼

LLMs often mismatch col-span and row-span values, leaving dead cells. This Skill requires grid-flow-dense and mathematical verification that all spans interlock with zero empty space.

What fonts and images does this frontend Skill use?▼

It selects from Satoshi, Cabinet Grotesk, Outfit, or Geist, explicitly banning Inter. Images come from picsum.photos with seeded keywords and CSS filters like grayscale and mix-blend-luminosity.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
zm2231zm2231

analytics-optimization

Track content performance and integrate GA4, social, and email analytics into unified dashboards.

Community
Advanced
ils15ils15
10

web-ui-analysis

Analyze web interfaces for WCAG 2.1 compliance and Core Web Vitals.

Community
Advanced
toanalientoanalien

frontend-design

Generate frontend interfaces from screenshots and videos.

Community
Advanced