Create a new reusable skill called: "anti-vibe-coded-ui" P...

Prompt

Create a new reusable skill called: "anti-vibe-coded-ui" Purpose: This skill should prevent the AI from generating generic, obviously AI/vibe-coded websites and instead produce interfaces that feel intentionally designed by a strong senior product designer + frontend engineer. The skill must be reusable across web projects and should activate whenever I ask you to design, redesign, improve, polish, refactor, or build a frontend/UI. CORE PRINCIPLE: Do not optimize for "more visual effects." Optimize for hierarchy, clarity, restraint, consistency, authenticity, and strong product design. Use these 30 anti-patterns as things to actively detect and avoid: 1. Harsh gradients 2. Lucide/icons used everywhere without considering whether an icon is actually needed 3. Pure white backgrounds when a more intentional surface/background would improve hierarchy 4. Rainbow/multi-color UI palettes 5. Excessive or generic drop shadows 6. Automatically placing exactly 3 feature cards in a row 7. Unnecessary emojis in professional/product interfaces 8. Liquid glass / excessive glassmorphism 9. Excessive em dashes / AI-style punctuation in UI copy 10. Defaulting to Inter / Geist / Space Grotesk without considering typography context 11. Decorative colored left-border/stripe everywhere 12. Fake or generic testimonials 13. Arbitrary bento grids used just because they are trendy 14. Fake terminal/code windows used as decorative UI 15. Generic copy patterns like "It's not X, it's Y" 16. Checkmark bullet lists used as a visual crutch 17. Automatically creating 3 pricing tiers 18. Hero sections with no real product/demo/content 19. Excessive soft rounded corners 20. Purple + black "AI startup" aesthetic by default 21. Refusing to use skeleton loaders when loading states are genuinely needed 22. Decorative radial gradient blobs/orbs 23. Decorative dot grids 24. Overusing sparkle icons 25. Decorative animated arrows 26. Missing Terms of Service where the product genuinely requires it 27. Missing Privacy Policy where the product genuinely requires it 28. Hover animations that exist only for visual flair 29. Neon/cyberpunk colors used without a strong product reason 30. Generic pastel colors used simply because they are "safe" IMPORTANT: These are anti-patterns, NOT absolute prohibitions. The skill must use judgment. For example: - Gradients can be used when they have a clear design purpose. - Rounded corners are allowed, but should be proportional to the component. - Animation is allowed when it communicates state, hierarchy, or interaction. - Glass effects are allowed when they genuinely improve the interface. - Purple, pastel, neon, etc. are allowed when appropriate to the product brand. - Icons are allowed when they improve comprehension. - Three cards are allowed when three cards are actually the correct information architecture. The goal is NOT "make everything boring." The goal is: intentional > trendy hierarchy > decoration authenticity > templates product substance > marketing fluff DESIGN RULES: 1. Establish a visual hierarchy before adding decoration. 2. Prefer strong spacing systems over excessive cards and borders. 3. Use color intentionally and keep the palette restrained. 4. Use typography as a primary design tool. 5. Avoid making every section look like a collection of floating cards. 6. Avoid excessive rounded containers. 7. Use shadows sparingly and with purpose. 8. Use real product content whenever possible. 9. Never invent testimonials, statistics, logos, customers, reviews, or credibility signals. 10. Do not add visual elements merely to make a page look "more designed." 11. Avoid default SaaS landing-page patterns unless they fit the actual product. 12. Build layouts around the information/content, not around fashionable component patterns. 13. Prefer asymmetry when it improves composition. 14. Use whitespace intentionally. 15. Make buttons, navigation, forms, tables, dashboards, and other functional UI feel like real software rather than marketing mockups. 16. Avoid unnecessary decorative gradients, blobs, sparkles, arrows, dot patterns, and glow effects. 17. Do not use fake UI screenshots that don't represent actual product functionality. 18. When possible, expose real product functionality in the interface. 19. Avoid generic AI-generated marketing copy. 20. Prefer concise, specific, believable copy. TYPOGRAPHY: Do not automatically select Inter, Geist, or Space Grotesk. Choose typography based on: - product category - tone - readability - hierarchy - brand character Use a coherent type scale and avoid excessively large headings unless justified. COLOR: Start from a restrained palette: - primary/background - surface - text - muted text - border - accent - semantic success/warning/error Do not introduce colors just because a component needs "something interesting." COMPONENT DESIGN: Components should have clear purpose. Before creating a component, ask: - Why does this component exist? - What information does it communicate? - Does it improve usability? - Is it necessary? - Is there already a simpler component that solves the same problem? Avoid: - card spam - badge spam - icon spam - pills everywhere - unnecessary borders - unnecessary shadows - decorative containers ANIMATION: Animation should communicate: - transition - hierarchy - state - feedback - progress Avoid animation that exists purely to impress. Prefer subtle: - opacity - transform - scale - layout transitions Do not animate every element on page load. CONTENT: Never generate: - fake testimonials - fake customer logos - fake metrics - fake reviews - fake social proof - fake activity Use placeholders clearly labeled as placeholders if real data isn't available. RESPONSIVENESS: The skill must ensure layouts are designed for: - desktop - tablet - mobile Do not simply shrink the desktop layout. Reconsider hierarchy and component arrangement for smaller screens. ACCESSIBILITY: Always consider: - semantic HTML - keyboard navigation - focus states - contrast - readable text sizes - reduced-motion preferences - accessible labels PRODUCT REALISM: A polished interface should feel like something that could actually ship. Favor: - real states - empty states - loading states - error states - validation states - realistic data - realistic interactions - useful feedback Avoid: - fake dashboards - meaningless charts - decorative statistics - fake terminal windows - fake "AI magic" UI IMPLEMENTATION BEHAVIOR: When generating UI, follow this process: STEP 1 — Understand the product Identify: - what the product does - who uses it - primary user action - secondary actions - important information hierarchy STEP 2 — Establish design direction Define: - typography - palette - spacing system - radius system - component style - interaction style STEP 3 — Build the simplest strong layout Do not add decorative elements yet. STEP 4 — Add functional states Implement: - loading - empty - error - success - hover - focus - disabled where appropriate. STEP 5 — Add visual refinement Only add: - subtle shadows - borders - animation - accent colors - illustrations - gradients when they serve a clear purpose. STEP 6 — Perform an anti-vibe audit Before finishing, inspect the generated UI and explicitly check for: - excessive cards - generic SaaS layout - excessive rounded corners - excessive icons - fake testimonials - fake metrics - decorative gradients - decorative blobs - unnecessary animations - purple/black AI aesthetic - pastel-everything - glassmorphism - sparkle icons - decorative arrows - dot grids - fake terminal windows - generic copy - meaningless visual decoration Then remove or redesign anything that feels template-generated. QUALITY BAR: The final UI should feel: - intentional - restrained - premium - contemporary - usable - believable - product-focused - visually distinctive without being flashy It should NOT feel: - AI-generated - Dribbble-template-like - generic SaaS - overdecorated - overly rounded - neon - excessively pastel - full of gradients - full of floating cards - full of icons - full of fake social proof IMPORTANT AGENT BEHAVIOR: Do not blindly follow the checklist. Use design judgment. Whenever a choice is made, prioritize: 1. usability 2. information hierarchy 3. consistency 4. authenticity 5. brand fit 6. visual polish Write the skill as a proper reusable skill for the agent's skill system, with: - clear metadata/name - activation/use criteria - detailed instructions - workflow - anti-pattern checklist - final review checklist Also include a short "When NOT to apply this skill" section so the agent knows that intentionally expressive visual styles are acceptable when explicitly requested by the user or when appropriate for the product.