I built a skill to make AI stop generating boring designs

Every landing page looks the same now. Blue buttons, rounded corners, hero-features-testimonials-CTA. The same layout repeated across the internet, generated by the same AI tools, following the same patterns.

I got tired of fixing it manually. So I built a skill to fix it at the source.

The Problem I Kept Running Into

At Picsart, I've shipped hundreds of landing pages, marketing sites, and product interfaces. Over the past year, AI coding tools became part of my workflow—Cursor, Claude Code, ChatGPT with code generation.

The speed was incredible. The designs? Not so much.

Every AI-generated interface had the same tells:

• Uniform 8px padding everywhere
• Default blue buttons (the "I didn't think about this" color)
• Blue-to-purple gradients (the new clip art)
• Perfect symmetry that felt lifeless
• That predictable hero → three features → testimonials → CTA layout

I'd prompt for a landing page, get something that looked "professional," and then spend an hour making it not look like everything else.

How I Started Collecting Patterns

This wasn't a deliberate project at first. I just started noting what I was fixing.

Every time I edited AI-generated code, I asked: What made this feel generic? What did I change to fix it?

The patterns emerged:

Problem: Uniform spacing Fix: Vary spacing intentionally—tight headlines, generous section breaks

Problem: Identical cards repeated Fix: Mix card styles—one with an accent border, one dark, one image-forward

Problem: Everything centered and symmetrical Fix: Use asymmetry where it serves hierarchy—60/40 splits, offset elements

Problem: Animations on everything Fix: Only animate transform and opacity, max 200ms for feedback

I kept adding to the list. After a few months, I had pages of notes.

Sources I Drew From

The skill isn't just my opinions. It's a synthesis of:

Production experience. Shipping landing pages at scale teaches you what actually converts vs. what just looks good in Figma.

Accessibility standards. APCA contrast requirements, WCAG guidelines, keyboard navigation patterns. Non-negotiable stuff that AI tools often skip.

Performance research. Vercel's engineering posts on what kills Core Web Vitals. Google's guidance on layout shift and interaction timing.

Design systems. Studying how Tailwind, Radix, and Shadcn approach component design. What they standardize, what they leave flexible.

Failure analysis. Looking at designs that tested poorly. The patterns that drove users away.

Trial and Error

The first version of the skill was too long. I'd paste 2,000 lines of instructions into Claude and it would ignore half of them.

Version two was too vague. "Make it bold" doesn't mean anything to an LLM without examples.

Version three had too many code examples. The AI would copy them literally instead of adapting to context.

What worked: Principles backed by specific anti-patterns and production-ready code.

The structure that stuck:

1. Philosophy (why this matters)
2. Anti-patterns (what to never do, with reasons)
3. Systems (typography, color, spacing, animation)
4. Component patterns (actual code that demonstrates the principles)
5. Checklists (quick validation before shipping)

What Made It Actually Work

A few things I learned:

Negative examples are as important as positive ones. "Never use uniform spacing everywhere" is more actionable than "use varied spacing."

Respect existing design systems. The skill explicitly tells AI to check for existing Tailwind configs and CSS variables before applying its own styles. Otherwise it creates chaos in established codebases.

Accessibility can't be optional. Every component pattern includes ARIA labels, focus states, and keyboard navigation. The skill makes these non-negotiable.

Code examples need context. Not just "here's a button" but "here's why the hover lift and shadow make it feel tangible."

The Unexpected Benefit

I thought this would just save me time fixing AI output. What I didn't expect: it changed how I think about design feedback.

Now when reviewing designs—AI-generated or not—I have a shared vocabulary. Instead of "this feels generic," I can say "there's no spacing rhythm" or "the cards don't have varied treatments."

The skill became a communication tool, not just an AI prompt.

Why I'm Sharing It

Most design resources fall into two camps:

1. Tool aggregators. "Here are 500 links to color pickers." Useful, but doesn't teach you anything.

2. Checklists. "Did you add alt text? Yes/No." Necessary, but doesn't explain why.

Neither helps you understand what makes designs feel generic or how to fix it.

I wanted something in between: principles you can internalize, patterns you can apply, and code you can ship.

Get the Skill

The skill works with any AI coding tool that accepts custom instructions:

• Claude Code: Drop it in ~/.claude/skills/
• Cursor/Windsurf: Paste into custom instructions
• GitHub Copilot: Add to .github/copilot-instructions.md
• ChatGPT: Paste as your first message

The full skill and installation instructions are on GitHub:

github.com/nielskaspers/bold-designs

What I Hope This Does

I want fewer generic interfaces on the internet. Not because I have strong aesthetic opinions (okay, maybe a little), but because generic designs don't serve users.

When everything looks the same, nothing stands out. Users can't tell products apart. Brands lose their voice. The web becomes wallpaper.

AI tools are going to generate most of our interfaces soon. If we teach them to be distinctive—while staying accessible and performant—we get a better internet.

That's the goal anyway.

---

Using the skill? I'd love to see what you build. Find me on LinkedIn or open an issue on the repo.