anti-slop-design

What This Skill Does

The anti-slop-design skill acts as an aggressive design curator for your AI-generated frontend projects. Its primary function is to intercept standard LLM output patterns—the notorious 'generic AI aesthetic'—and force the interface toward high-fidelity, bespoke design languages. By enforcing specific constraints on typography, color theory, motion, and spatial composition, the skill prevents the production of uninspired web components. It systematically eliminates 'Inter-font syndrome,' repetitive rounded corners, and predictable gradient usage, ensuring that every interface generated by OpenClaw feels like a deliberate, handcrafted product rather than a generic template.

Installation

To integrate this skill into your environment, run the following command in your terminal: clawhub install openclaw/skills/skills/kjaylee/anti-slop-design

Use Cases

• Landing Pages: Create high-conversion pages that move away from the standard 3-column feature layout toward editorial or brutalist design.
• Game UIs: Develop immersive HUDs or inventory screens that respect the narrative world-building of your specific game.
• Dashboards: Build data-rich interfaces that prioritize information hierarchy over generic card-based shadows.
• Web Components: Generate unique buttons, cards, and navigation bars that stand out in a sea of modern, copy-paste component libraries.

Example Prompts

1. "Create a hero section for a retro-futuristic crypto wallet. Use the anti-slop-design skill to ensure the typography is aggressive and the layout breaks the standard grid."
2. "Build a landing page for a new indie game. Apply the anti-slop guidelines to create an immersive, dark-themed UI that incorporates non-standard borders and custom motion effects."
3. "Design a high-end dashboard interface for a luxury fashion brand. Avoid all standard web design tropes, focusing on an editorial aesthetic with high contrast and intentional white space."

Tips & Limitations

• Typography: Always allow the skill to suggest specific Google Fonts. The goal is to avoid standard web-safe fonts like Arial or Roboto at all costs.
• Consistency: While the skill prevents slop, it encourages brand identity. Define your chosen 'Tone' early in the prompt to ensure the output is cohesive.
• Limitations: This skill is focused on design output. It does not replace functional frontend logic, so you should pair it with your preferred framework (React, Vue, etc.) for best results. Always verify the accessibility of unique design choices, as 'non-standard' layouts can sometimes interfere with screen readers.