picasso

PICASSO
The most comprehensive AI design skill ever built.

20 reference domains • 35+ commands • 4,700+ lines of actionable design intelligence
Every interface looks like a senior design engineer spent days on it.

Install • Why Picasso • Interview • Creative Commands • Benchmarks • All Commands • References • Sources

The Problem

Every AI coding tool produces the same output: Inter font, purple gradients on white, centered layouts, uniform card grids, glassmorphism everywhere. It's instantly recognizable as "AI made this." Users can feel it. Clients can see it. It looks generic because it is generic.

Existing design skills are shallow. They tell you to "use good typography" without specifying what that means. They say "be accessible" without giving you the ARIA patterns. They cover 3-4 design domains and call it done.

Picasso is different. It is the largest, most detailed, and most opinionated design skill available for any AI coding agent. It doesn't just tell you what to do -- it tells you exactly how, with specific values, code examples, and anti-patterns for every decision.

What Makes Picasso Different

Depth That No Other Skill Matches

Picasso covers 20 specialized reference domains, each with concrete rules, specific values, and ready-to-use code. This isn't a collection of vague principles -- it's an engineering specification for beautiful interfaces.

The AI-Slop Firewall

Picasso's anti-pattern system is the most aggressive in any design skill. It doesn't just suggest good practices -- it explicitly bans the fingerprints of AI-generated interfaces:

Banned typography: Inter, Roboto, Arial, Open Sans, Space Grotesk, monospace-as-lazy-technical-vibe, large icons with rounded corners above every heading.

Banned color: Pure black (#000), pure white (#fff), pure gray, gray text on colored backgrounds, cyan-on-dark, purple-to-blue gradients, neon accents on dark, gradient text for "impact."

Banned layout: Cards nested in cards, identical card grids (icon + heading + text repeated), hero metric layout template, centered everything, same spacing everywhere, glassmorphism everywhere.

Banned motion: bounce/elastic easing, transition: all, animating width/height/padding/margin, no reduced-motion support.

Banned interaction: Placeholder-only labels, outline: none without replacement, hover-only interactions, every button styled as primary.

Integrated Tool Ecosystem

Picasso doesn't just describe tools -- it specifies exactly how to use them with installation commands, import paths, and API examples:

The Design Interview

When you first use Picasso on a project, it doesn't just start generating. It asks.

Picasso: What are we building? New project, redesign, polish, or fixing specific issues?
You:     New SaaS dashboard for a fintech startup

Picasso: Who is this for?
You:     Financial analysts, 30-50 age range, use Bloomberg terminals all day

Picasso: What's the vibe? Any sites you love the look of?
You:     Dark, dense, like Linear meets Bloomberg. Here's a reference: linear.app

Picasso: Rate these 1-5:
         Animations? Mobile? Accessibility? Dark mode? Performance?
You:     Animations 3, Mobile 2, A11y 5, Dark mode YES, Perf 5

Picasso: Got it. Here's what I'm building:
         → Dark-tech aesthetic inspired by Linear
         → Dense layout (VISUAL_DENSITY: 8), subtle motion (MOTION_INTENSITY: 3)
         → WCAG AAA accessibility, dark-first, performance-critical
         → Generating .picasso.md and DESIGN.md now...
         Sound good?

The interview generates a .picasso.md config that persists your preferences across every future session. Run /picasso anytime to redo it.

Creative Commands

These are the features that make Picasso unlike any other design tool.

/roast -- The Brutally Honest Critique

Forget polite feedback. /roast tears your design apart with designer-Twitter energy.

🔥🔥🔥🔥 ROAST SCORE: 4/5

This hero section looks like every v0 output from 2024. The purple gradient
physically hurts my eyes. The three identical cards are a cry for help. And
the "Build the future of work" headline? It's 2026 -- we've moved on.

The Inter font is doing NOTHING for you. It's the design equivalent of
wearing khakis to a nightclub. And transition: all 0.3s? That's animating
your box-shadow, your border-color, and your will to live.

Here's how to fix it:
1. Kill the gradient. Use oklch(0.15 0.02 250) as your background.
2. Replace Inter with Satoshi for display, DM Sans for body.
3. Break the three-card grid. Make the first card 2x width.
...

What IS working: Your spacing scale is consistent (4px base) and the
semantic HTML structure is solid. Build on that.

/score -- Quantified Design Quality

A single 0-100 score, broken down by category. Track it over time.

## Picasso Design Score: 73/100

Typography:    ████████████░░░  12/15
Color:         ████████████░░░  11/15
Spacing:       ████████░░       8/10
Accessibility: ████████████████ 16/20
Motion:        ██████░░░░       6/10
Responsive:    ████████░░       8/10
Performance:   ██████░░░░       6/10
Anti-Slop:     ██████░░░░       6/10

Top fixes for +15 points:
1. Add prefers-reduced-motion support (+4)
2. Replace #000 with tinted near-black (+3)
3. Add staggered entrance animation (+3)
4. Set max-width on body text (+3)
5. Replace outline:none with focus-visible (+2)

/steal <url> -- Extract Any Site's Design DNA

Point at a live website and Picasso extracts its entire design language into a .picasso.md config.

/steal https://linear.app

Extracts: fonts, color palette, spacing rhythm, border-radius system, shadow style, animation patterns, layout structure. Generates a config that makes your project match that aesthetic.

/mood <word> -- Instant Design System from a Word

/mood cyberpunk

Generates a complete design system -- palette, fonts, spacing, motion, component styling -- from a single evocative word. Works with: cyberpunk, cottage, brutalist, luxury, editorial, playful, corporate, dark-tech, warm-saas, minimal, and any combination.

/evolve -- Iterative Multi-Round Refinement

Instead of generating once and hoping, Picasso proposes 3 distinct directions, lets you pick, then refines through multiple rounds:

Round 1: Here are 3 directions:
  A) Minimal monochrome -- Geist font, black/white, sharp corners
  B) Warm editorial -- Instrument Serif headers, terracotta accent, soft radius
  C) Dark technical -- JetBrains Mono accent, neon green, dense layout

You: B, but darker

Round 2: [implements B with darker surfaces, screenshots]
         What do you love? What's not right?

You: Love the typography. Cards need more breathing room.

Round 3: [adjusts spacing, screenshots]
         Are we there?

You: Ship it.

/compete <url> -- Head-to-Head Design Battle

/compete https://competitor.com

Screenshots both sites, scores both, produces a head-to-head comparison:

                    You        Competitor
Typography:         72         88          ← They win (modular scale)
Color:              85         71          ← You win (better contrast)
Responsive:         90         65          ← You win (mobile-first)
Performance:        45         92          ← They win (image optimization)
Accessibility:      88         42          ← You win (focus states)
Overall:            76         72          ← You win, barely

Key gap: Their typography is stronger because they use a consistent
1.25 ratio scale. Yours has 7 different sizes with no clear ratio.
Fix this and you pull ahead significantly.

/before-after -- Visual Transformation Report

After any /polish or /redesign, auto-generates side-by-side screenshots showing exactly what changed and why. Shareable HTML report.

/mood-board -- Visual Inspiration Generator

Not sure what you want? Give Picasso 3-5 adjectives and it generates an interactive HTML mood board with color swatches, font samples, and example components in that style.

/design-system-sync -- Keep Code and DESIGN.md in Sync

Detects when your code has drifted from your design system. Finds every hardcoded color that should be a token, every wrong font weight, every spacing violation. Offers one-click fix.

/preset <name> -- One-Command Aesthetic

/preset linear     # Linear-inspired dark minimal
/preset stripe     # Stripe-inspired gradient editorial
/preset vercel     # Vercel-inspired black/white sharp
/preset notion     # Notion-inspired warm readable
/preset brutalist  # Raw, intentional, monospace

Generates .picasso.md + DESIGN.md + updates your CSS variables in one command.

Benchmark

Picasso vs. Every Other Design Skill

We compared Picasso against every publicly available AI design skill as of April 2026.

What This Means in Practice

Without Picasso, your AI will:

• Default to Inter or Roboto every time
• Use purple gradients because that's what the training data looks like
• Center everything because it's the safe choice
• Ignore accessibility until someone files a complaint
• Use transition: all 0.3s ease and call it animated
• Produce interfaces that look like every other AI-generated UI

With Picasso, your AI will:

• Choose distinctive typography (Instrument Sans, Fraunces, Outfit) with proper OpenType features
• Build OKLCH palettes with tinted neutrals and the 60-30-10 rule
• Create asymmetric layouts with intentional spatial hierarchy
• Include all 8 interactive states on every element
• Hit WCAG 2.2 AA compliance by default
• Optimize for Core Web Vitals (LCP < 2.5s, CLS < 0.1, INP < 200ms)
• Add text morphing, UI sounds, and haptic feedback where appropriate
• Generate DESIGN.md files that any AI agent can read
• Never produce the same design twice

Install

Option 1: npx (Recommended)

# Install skill + agent to current project
npx picasso-skill

# Install globally (all Claude Code projects)
npx picasso-skill --global

# Skill only (no agent)
npx picasso-skill --skill-only

# Install for Cursor
npx picasso-skill --cursor

# Install for Codex
npx picasso-skill --codex

# Custom path
npx picasso-skill --path ./my-skills

Option 2: One-Liner

# Project-specific (skill + agent)
git clone https://github.com/viperrcrypto/picasso.git /tmp/picasso && \
  mkdir -p .claude/skills .claude/agents && \
  cp -r /tmp/picasso/skills/picasso .claude/skills/picasso && \
  cp /tmp/picasso/agents/picasso.md .claude/agents/picasso.md && \
  rm -rf /tmp/picasso

# Global (all projects)
git clone https://github.com/viperrcrypto/picasso.git /tmp/picasso && \
  mkdir -p ~/.claude/skills ~/.claude/agents && \
  cp -r /tmp/picasso/skills/picasso ~/.claude/skills/picasso && \
  cp /tmp/picasso/agents/picasso.md ~/.claude/agents/picasso.md && \
  rm -rf /tmp/picasso

Option 3: Manual

git clone https://github.com/viperrcrypto/picasso.git
cp -r picasso/skills/picasso ~/.claude/skills/picasso
cp picasso/agents/picasso.md ~/.claude/agents/picasso.md

Option 4: Claude.ai (Consumer)

Upload SKILL.md as a Custom Skill in Claude.ai settings. Upload reference files alongside it for full coverage.

Skill + Agent

Picasso ships as both a skill (knowledge base) and an agent (autonomous design engineer).

Commands

Quality Assessment

Refinement

Amplification

Aesthetic Presets

System

Production

/godmode -- The Nuclear Option

One command. Full transformation. Interview, audit, score, roast, fix everything, verify, before/after report.

/godmode

Phase 1: Understanding your project...
Phase 2: Scoring... 42/100. Roasting... 🔥🔥🔥🔥
Phase 3: Found 23 issues. Fixing all = score ~85. Proceed? [y]
Phase 4: Fixing... typography ✓ color ✓ spacing ✓ a11y ✓ motion ✓ responsive ✓ perf ✓
Phase 5: Re-scoring... 87/100 (+45 points)
Phase 6: Before/after report generated.

GODMODE Complete: 42 → 87 (+45 points), 47 files modified, 23 issues fixed

Creative

Advanced

Automation (Agent-Only)

References

references/
  typography.md                   # Type systems, font pairing, scales, OpenType, vertical rhythm
  color-and-contrast.md           # OKLCH, tinted neutrals, dark mode, 60-30-10, dangerous combos
  spatial-design.md               # 4px spacing scale, grids, hierarchy, Squint Test, optical adjustments
  motion-and-animation.md         # Duration rule, easing curves, staggering, text morphing, reduced motion
  interaction-design.md           # 8 states, forms, focus, loading, Popover API, dropdown positioning
  responsive-design.md            # Input method detection, safe areas, container queries, real device testing
  sensory-design.md               # soundcn, web-haptics, multi-sensory integration patterns
  react-patterns.md               # Server Components, composition, state management, data fetching, styling
  anti-patterns.md                # 50+ banned patterns across all domains (the most important file)
  design-system.md                # 9-section DESIGN.md format, theme generation, token structure, 4 themes
  generative-art.md               # Philosophy-first process, p5.js, seeded randomness, parameter controls
  component-patterns.md           # 40+ components, state matrix, compound patterns, sizing conventions
  ux-psychology.md                # Gestalt, Fitts's/Hick's/Miller's/Jakob's Law, F/Z-pattern, Peak-End
  data-visualization.md           # Chart selection matrix, dashboard layouts, data palettes, Tufte, sparklines
  modern-css-performance.md       # Nesting, :has(), @layer, anchor positioning, View Transitions, Tailwind v4
  conversion-design.md            # Landing pages, CTAs, pricing, onboarding, navigation/IA, notifications
  accessibility-wcag.md           # 12 ARIA patterns, WCAG 2.2, SPA focus, accessible tables, drag-and-drop
  ux-writing.md                   # Error formula, button labels, empty states, i18n, terminology
  style-presets.md                # 22 visual presets with colors, fonts, signature elements, mood mapping
  performance-optimization.md     # 45 Vercel rules across 7 priority tiers with code examples

Configurable Settings

Three dials (1-10) control the design character:

Shortcuts:

• "Make it premium" / "luxury" -> VISUAL_DENSITY 2-3, MOTION_INTENSITY 4-5
• "Dashboard" / "admin panel" -> VISUAL_DENSITY 7-8
• "Make it pop" / "wow factor" -> DESIGN_VARIANCE 7-8, MOTION_INTENSITY 7-8

Sources

Picasso consolidates and builds upon 15+ open-source projects and research sources:

The Non-Negotiables

1. No design should ever look like AI made it. No purple gradients on white. No Inter font. No centered everything. No cards nested in cards. No gray text on colored backgrounds.
2. Every design must have a clear aesthetic point of view. If it could belong to any product, it belongs to none.
3. Match implementation complexity to vision. Maximalist designs need elaborate code. Minimalist designs need surgical precision.
4. Text is always a design element, never an afterthought.
5. Every detail matters. The shadow radius, the letter spacing, the hover transition duration, the border color in dark mode.
6. Every interactive element needs all 8 states: default, hover, focus, active, disabled, loading, error, success.
7. Accessibility is not optional. WCAG 2.2 AA compliance is the baseline, not the goal.
8. Performance is a feature. LCP < 2.5s, CLS < 0.1, INP < 200ms.
9. UX writing is design. Buttons say what they do. Errors explain how to fix. Empty states guide the next action.
10. Vary between generations. Never converge on the same fonts, colors, or layouts across projects.

License

MIT

_{Built by viperrcrypto. Every interface deserves intention.}