Bold Designs

An AI coding skill for creating interfaces that don't look AI-generated.

---

What This Is

A skill file you can add to your AI coding assistant to make it generate distinctive, production-grade frontend code instead of generic templates.

Works with:

• Claude Code (Anthropic)
• Cursor
• Windsurf
• GitHub Copilot
• Codex / ChatGPT
• Aider
• Any LLM-based coding tool that accepts custom instructions

The Problem It Solves

AI coding tools are great at generating code fast. But the designs? They all look the same:

• Same blue buttons
• Same rounded corners everywhere
• Same hero → features → testimonials layout
• Same uniform spacing

This skill teaches your AI assistant what makes designs feel generic and how to avoid it — with concrete patterns and production-ready code.

---

Quick Start

Claude Code

# Create the skills directory if it doesn't exist
mkdir -p ~/.claude/skills

# Download the skill
curl -o ~/.claude/skills/bold-designs.md https://raw.githubusercontent.com/nielskaspers/bold-designs/main/SKILL.md

Or manually: copy SKILL.md to ~/.claude/skills/bold-designs.md

Cursor / Windsurf

1. Open Settings → Rules / Custom Instructions
2. Copy the contents of SKILL.md
3. Paste into your custom instructions

GitHub Copilot

Add to your .github/copilot-instructions.md:

<!-- Include Bold Designs skill for frontend work -->

Then paste the contents of SKILL.md

ChatGPT / Claude.ai

1. Start a new conversation
2. Paste the contents of SKILL.md as your first message
3. Then describe what you want to build

Aider

# Add to your .aider.conf.yml
read:
  - path/to/bold-designs/SKILL.md

---

What's Inside

The skill includes:

Section	What It Covers
Design Philosophy	5 core principles for bold design
Anti-Generic Rules	What to avoid (and why it screams "AI")
Typography	Hierarchy, font pairing, modern CSS
Color Strategy	Palette approaches, contrast requirements
Spacing System	Intentional rhythm, not uniform padding
Layout Patterns	Breaking the grid, visual hierarchy
Animation	Performance rules, timing, reduced motion
Component Patterns	Heroes, features, cards, navigation
Accessibility	Non-negotiable requirements
Code Examples	Production-ready Tailwind/React patterns

---

Example Output

Before (typical AI output):

<div className="p-8 rounded-xl bg-blue-500 text-white text-center">
  <h1 className="text-2xl font-bold">Welcome</h1>
  <p className="mt-4">Get started today</p>
  <button className="mt-4 px-4 py-2 bg-white text-blue-500 rounded">
    Sign Up
  </button>
</div>

After (with Bold Designs skill):

<section className="relative min-h-[90vh] overflow-hidden bg-slate-950">
  <div className="absolute -right-1/4 top-1/4 h-[600px] w-[600px] rounded-full bg-violet-500/30 blur-[128px]" />

  <div className="relative mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-16">
    <div className="max-w-2xl">
      <p className="text-sm font-semibold uppercase tracking-widest text-violet-400">
        New Feature
      </p>
      <h1 className="mt-4 text-5xl font-bold tracking-tight text-white sm:text-7xl" style={{ textWrap: 'balance' }}>
        Design that actually
        <span className="block text-violet-400">stands out</span>
      </h1>
      <div className="mt-10 flex flex-wrap gap-4">
        <a href="#" className="inline-flex items-center gap-2 rounded-full bg-violet-500 px-6 py-3 font-semibold text-white transition hover:bg-violet-400 hover:-translate-y-0.5 hover:shadow-lg">
          Start building
        </a>
      </div>
    </div>
  </div>
</section>

---

Key Principles

1. Bold Over Safe

Make visual choices with a point of view. Boring is worse than slightly unconventional.

2. Intentional Over Uniform

Stop applying the same spacing everywhere. Design decisions should serve hierarchy.

3. Personality Over Polish

One unexpected element per section. Users connect with brands that feel human.

4. Clarity Over Cleverness

Bold doesn't mean confusing. If users can't figure it out in 3 seconds, it failed.

5. Rhythm Over Repetition

Tight spacing here, generous there. Great designs feel like music.

---

Non-Technical Use

While this skill is optimized for AI coding assistants, the principles work anywhere:

• Figma/Sketch — Apply the philosophy when designing
• Design reviews — Use the checklist to evaluate work
• Team alignment — Shared language for "what makes it feel generic"
• Client presentations — Explain why certain choices matter

---

Files

File	Purpose
SKILL.md	The skill file — copy this to your AI tool
README.md	This documentation
LICENSE	MIT — use however you want
CONTRIBUTING.md	How to contribute
CODE_OF_CONDUCT.md	Community guidelines

---

Contributing

Found a pattern that works? Have improvements? PRs welcome.

See CONTRIBUTING.md for guidelines.

---

License

MIT — use it however you want, no attribution required.

---

Author

Created by Niels Kaspers