skills.rest
LGJ-Jonathan
LGJ-JonathanOFFICIAL
Explore all skills by this author →
GitHub

anti-vibe-coded

Applies design system rules to generate consistent, polished UI components and layouts.

Updated Mar 26, 2026
Search Tags:#typography#front-end#design system#web design#ui design#responsive layout#component consistency
One-click install
npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill anti-vibe-coded-lgj-jonathan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: anti-vibe-coded
Source: https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills/tree/main/anti-vibe-coded
Command: npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill anti-vibe-coded-lgj-jonathan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look improvised: inconsistent spacing, clashing colors, generic fonts, broken interactions, and placeholder content. This Skill enforces senior-level design and front-end engineering principles so every generated UI component, page, or layout looks intentional and professionally shipped. ## Core Features & Use Cases - Design System Enforcement: Applies strict spacing scales (4pt/8pt), typography ramps, disciplined color palettes, and consistent component styling across buttons, cards, inputs, and modals. - Red Flags Checklist: Actively removes common AI-generated UI anti-patterns such as purple gradients, emoji-as-icons, fake testimonials, broken links, and missing loading states. - Technical Fundamentals: Ensures every output includes page titles, meta descriptions, OG images, favicons, responsive layouts, and functional interactive elements. - Use Case: Before generating a landing page or dashboard, activate this Skill so the output follows a coherent grid, subtle animations, real copy, and working tabs, accordions, and carousels instead of a vibe-coded draft. ## Quick Start Apply the anti-vibe-coded design principles and generate a responsive SaaS landing page with a hero, pricing section, and footer.

Frequently Asked Questions about anti-vibe-coded

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

FAQPage Schema
How do I make AI-generated UI look professional instead of vibe coded?▼

Apply a strict design system before generating UI: use a 4-point or 8-point spacing scale, one heading and one body font, a small disciplined color palette, and consistent border radiuses and shadows across all components. Remove red flags like purple gradients, emoji icons, and generic taglines.

What are the most common signs of vibe-coded websites?▼

Common signs include unjustified purple gradients, sparkle emojis used as UI elements, aggressive hover animations, fake testimonials with AI avatars, social icons linking to '#', inconsistent border radiuses, missing loading states, misaligned grids, and meaningless taglines like 'Build your dreams'.

When should I apply these design principles in my workflow?▼

Apply them before generating any UI component, page, or layout. Establishing the spacing rhythm, type ramp, and color palette upfront prevents inconsistency from appearing in the first place rather than requiring cleanup afterward.

Does this design guidance cover responsive and mobile layouts?▼

Yes. The technical fundamentals require layouts that work on both mobile and desktop, with no text overflow or awkwardly stacked cards. It also mandates page titles, meta descriptions, OG images, favicons, and functional social links.

What fonts should I avoid when generating UI?▼

Avoid generic fonts like Inter, Poppins, Montserrat, and Roboto when used without a defined rhythm. Select one heading font and one body font, then define a type ramp with consistent sizes and line heights applied without improvisation.

Related Skills

Explore More Design & Creative Skills→
aviskaaraviskaar
6

auto-website-builder

Generate a complete website and brand identity with Next.js and Tailwind CSS.

Official
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
idy-00idy-00

design-qa

Set up design QA gates covering token lint, accessibility, contrast, and visual regression testing.

Community
Advanced
pascallammerspascallammers
1

shadcn-ui-components

Generate and integrate accessible UI components with shadcn/ui and Tailwind CSS.

Community
Basic