skills.rest
TylerSimons1127
TylerSimons1127COMMUNITY
Explore all skills by this author →
GitHub

ai-frontend-mastery

Guides AI agents to produce non-generic frontend designs using surface archetypes, token plans, and verification loops.

Updated Aug 21, 2026
Search Tags:#landing page#Playwright#design tokens#Framer Motion#frontend design#gsap#anti-slop
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill ai-frontend-mastery-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-frontend-mastery
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/creative/ai-frontend-mastery
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill ai-frontend-mastery-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated websites regress to generic layouts (centered hero, three feature cards, purple gradients, default Inter font) because vague prompts produce statistically average output. This Skill provides a structured design playbook that fixes the problem through process: surface-first composition, specific prompting, token planning, and screenshot-based verification. ## Core Features & Use Cases - Surface-first composition framework: Classify the page into one of 7 archetypes (Monitor, Operate, Compare, Configure, Decide/Learn, Explore, Command) before choosing colors or fonts, avoiding the wrong-surface hero layout. - 4-part prompt framework and token plan: Define aesthetic family, reference URLs, intent, and guardrails, then draft named color tokens, type pairings, layout concept, and a signature element before writing code. - Verification loop with live tools: Render pages via Playwright screenshots, score them with the MDVP design linter, extract design systems from reference sites, and run an 11-point slop diagnostic. - Use Case: When asked to build a SaaS landing page, state the Decide/Learn surface, write a section-by-section prompt with a named aesthetic and guardrails, build with Framer Motion or GSAP, then screenshot desktop and mobile viewports and re-score until the slop diagnostic passes. ## Quick Start Ask the agent to design a landing page using the ai-frontend-mastery playbook, stating the surface archetype and a 4-part prompt with aesthetic, reference, intent, and guardrails.

Frequently Asked Questions about ai-frontend-mastery

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

FAQPage Schema
How do I stop AI-generated websites from looking generic?▼

Generic output comes from vague prompts regressing to the statistical mean. Fix it with process: state the surface archetype first, pass a 4-part prompt (aesthetic family, reference URLs, intent, guardrails), draft a token plan, then verify with screenshots and a design linter instead of one-shotting.

What is the surface-first method in frontend design?▼

Surface-first means committing to one of 7 composition archetypes (Monitor, Operate, Compare, Configure, Decide/Learn, Explore, Command) before picking colors or fonts. The hero-plus-three-cards layout is only correct for Decide/Learn pages; using it elsewhere is the top generic-design tell.

Framer Motion vs GSAP for React animations, which should I use?▼

Use Framer Motion for component-level spring micro-interactions under 200ms, staggered mounts, and page transitions under 400ms in React apps. Choose GSAP with ScrollTrigger for scroll-driven timelines, pinned sections, text-split reveals, and cinematic sequenced moments, optionally paired with Lenis smooth scroll.

How can I verify an AI-built page design visually?▼

Render the page in a real browser with Playwright, take desktop and mobile screenshots, and judge them visually. Then run the MDVP design linter for a 0-100 score with ranked fixes, and apply the 11-point slop diagnostic, re-scoring after repairs until compositional tells are gone.

Should I put exact pixel values in design prompts for AI agents?▼

Give direction, constraints, and references rather than pixel dictatorship. Specify taste-encoding choices (aesthetic family, type pairing, accent role, layout concept, motion posture) and lock exact values in a DESIGN.md or design.json file, letting the model decide spacing details within those bounds.

What is a DESIGN.md file and how do agents use it?▼

DESIGN.md is a plain markdown file at repo root defining color tokens, typography scale, spacing, radii, shadows, motion posture, and component rules that any AI agent reads before building. After generating it, run a compliance pass against it so revisions point back to one shared source and prevent style drift.

Related Skills

Explore More Design & Creative Skills→
createdbysaltcreatedbysalt

design-brief-creation

Convert moodboards into design briefs with typography, color, spacing, and component specifications.

Community
Basic
anaghkanungo7anaghkanungo7
1

seo-optimization-guide

Guide technical SEO, on-page optimization, and Core Web Vitals for web applications.

Community
Intermediate
Hack23Hack23
235

playwright-ui-testing

Automate cross-browser UI tests with Playwright for the CIA platform.

Official
Intermediate
fusenginefusengine
22

generating-components

Generate and modify UI components with Gemini Design MCP and 21st.dev.

Community
Advanced