skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate and audit production-grade frontend interfaces with distinctive aesthetics that avoid generic AI design patterns.

Updated Aug 2, 2026
Search Tags:#typography#frontend#react#design system#css#ui design#anti-slop
One-click install
npx skills add https://github.com/leonardoacosta/skills --skill frontend-design-leonardoacosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/leonardoacosta/skills/tree/main/leo-design/skills/frontend-design
Command: npx skills add https://github.com/leonardoacosta/skills --skill frontend-design-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? AI-generated web interfaces tend to converge on the same generic look — purple gradient heroes, Inter fonts, glassmorphism cards, and three-column feature grids. This Skill guides the creation of distinctive, production-grade frontend code and audits existing UI against a catalog of known AI design anti-patterns. ## Core Features & Use Cases - Create, Audit, and Spot-fix modes: Build new components, pages, and apps; audit existing UI against a 34-pattern anti-slop canon with severity rankings (STRUCTURAL/SURFACE/COSMETIC); or diagnose and rewrite a single flagged element. - Design system awareness: Reads a project-level DESIGN.md as the normative token source of truth, exports consumable Tailwind/DTCG tokens, and validates contrast against it. - Deep reference library: Ships references for OKLCH color craft, typography mechanics, execution-craft checks, 10 pre-built themes, a 66-brand DESIGN.md catalogue, icon sourcing (Phosphor, svgl, thesvg), dithering/ASCII effects, Motion/GSAP animation components, and 91 Radiant shader effects. - Use Case: Ask for a landing page for a fintech product — the Skill commits to a bold aesthetic direction, picks a distinctive font pairing, writes working HTML/CSS/React to docs/diagrams/, and avoids every named slop pattern. ## Quick Start Ask the agent to build a distinctive landing page or audit your existing UI against the anti-slop canon, and it will produce polished frontend code in docs/diagrams/.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I avoid generic AI-generated design in my frontend?▼

Commit to one bold aesthetic direction, pick a distinctive display and body font pairing, and check your output against the anti-slop canon — patterns like purple gradient heroes, glassmorphism cards, and three-column feature grids. The Skill names each pattern and prescribes a specific replacement.

How do I audit existing UI for AI design slop?▼

Share the UI code or copy and request an audit. The Skill checks the project's DESIGN.md tokens first, then runs the anti-slop canon and microcopy references, naming each violation and ranking findings as STRUCTURAL, SURFACE, or COSMETIC severity.

Does the Skill support project design systems like DESIGN.md?▼

Yes. When a DESIGN.md exists at the project root, it is the normative source of truth. The Skill parses its YAML tokens, exports them via npx @google/design.md to Tailwind or DTCG formats, and validates output contrast with the lint command.

Where does the Skill write generated HTML and CSS files?▼

All generated HTML, CSS, and standalone frontend files are written to docs/diagrams/ in the current working directory. It never writes to /tmp, the project root, or other locations.

Can I make my UI match a specific brand like Linear or Stripe?▼

Yes. The brand-design-catalogue reference provides 66 DESIGN.md files extracted from real brands. Fetch the target brand's file, apply its color, typography, spacing, and motion tokens, and follow the one-brand-per-page rule.

What icon libraries does the Skill recommend for UI and logos?▼

Phosphor is the default for generic UI chrome, svgl.app for dev and SaaS brand logos, Boxicons bxl-* as a brand fallback, and thesvg for cloud architecture icons. Emojis are never used as icon placeholders.

Related Skills

Explore More Design & Creative Skills→
aymenhamoudiiaymenhamoudii

frontend-design

Create production-ready frontend interfaces with OKLCH color tokens and fluid typography.

Community
Advanced
handsomelong922handsomelong922

frontend-patterns

Provide reusable React and Next.js patterns for component composition, state management, and data fetching.

Community
Advanced
jokken79jokken79
1

react-ui-patterns

Implement React UI data-loading patterns for loading, error, and empty states.

Community
Advanced
theofernandezztheofernandezz

UI Engineering - Distinctive Design

Define design contracts and token-based systems for distinctive UI components.

Community
Advanced