Picasso#

The ultimate design skill for producing distinctive, production-grade frontend interfaces, visual artifacts, and design systems. This skill consolidates best practices from Anthropic's frontend-design, canvas-design, algorithmic-art, and theme-factory skills, Impeccable's 7-domain reference system, VoltAgent's DESIGN.md format, Vercel's React and typography standards, and specialized libraries for sound, haptics, icons, and text animation.

Every output should look like it was built by a senior design engineer who spent days refining it, not generated by an AI in seconds.

---

Configurable Settings#

These three dials (1-10) control the overall character of the output. Adjust based on what is being built. The user can set these explicitly or they can be inferred from context.

• DESIGN_VARIANCE (default: 6) — How experimental the layout is. 1-3: clean, centered, conventional. 4-6: considered asymmetry, intentional breaks. 7-10: avant-garde, overlapping elements, unconventional grids.
• MOTION_INTENSITY (default: 5) — How much animation is present. 1-3: hover states and fades only. 4-6: staggered reveals, scroll-triggered, text morphing. 7-10: magnetic cursors, parallax, complex choreography.
• VISUAL_DENSITY (default: 5) — How much content fits on one screen. 1-3: spacious, luxury, breathing room. 4-6: balanced, structured whitespace. 7-10: dense dashboards, data-heavy, compact.

When the user says "make it premium" or "luxury feel," drop VISUAL_DENSITY to 2-3 and MOTION_INTENSITY to 4-5. When they say "dashboard" or "admin panel," raise VISUAL_DENSITY to 7-8. When they say "make it pop" or "wow factor," raise DESIGN_VARIANCE and MOTION_INTENSITY to 7-8.

---

Quick Start (30 seconds)#

New to Picasso? Here's the minimum viable workflow:

1. Pick a font that isn't Inter, Roboto, or Arial. Try: Satoshi, Cabinet Grotesk, Outfit, General Sans, Clash Display.
2. Pick a color in OKLCH. Not Tailwind's default indigo. Try: oklch(0.65 0.25 25) (warm red), oklch(0.55 0.20 160) (teal), oklch(0.60 0.22 300) (violet).
3. Tint your grays toward your accent hue. Never use pure #808080 or #000.
4. Break the center. Left-align content. Use asymmetric grids (2:1, 3:2). Only center heroes and CTAs.
5. Read references/anti-patterns.md before writing any code. It's the most important file.

Then follow the full workflow below. Skip nothing.

---

Step 0: Read the Right References#

Before writing any code, read the reference files relevant to the task. Each covers a domain in depth with rules, examples, and anti-patterns. Load only what you need.

Reference FileWhen to Readreferences/typography.mdAny task involving text, fonts, headings, or type hierarchyreferences/color-and-contrast.mdColor palettes, dark mode, accessibility, tinted neutralsreferences/spatial-design.mdLayout, spacing, grids, visual hierarchy, whitespacereferences/depth-and-elevation.mdDual shadows, layering technique, shadow scale, z-index, hover patternsreferences/motion-and-animation.mdTransitions, scroll effects, text morphing, micro-interactionsreferences/interaction-design.mdForms, focus states, loading, empty states, error handlingreferences/responsive-design.mdMobile-first, fluid, container queries, touch targetsreferences/sensory-design.mdUI sound effects, haptic feedback, multi-sensory interfacesreferences/react-patterns.mdReact/Next.js component architecture, hooks, performancereferences/anti-patterns.mdExplicit list of what NOT to do (the most important reference)references/design-system.mdGenerating DESIGN.md files, theming, systematic tokensreferences/generative-art.mdAlgorithmic art, p5.js, seeded randomness, flow fieldsreferences/component-patterns.mdStandard component naming, taxonomy, and state patternsreferences/navigation-patterns.mdBreadcrumbs, sidebar, tabs, bottom bar, mega menus, skip linksreferences/tables-and-forms.mdSortable tables, inline editing, multi-step forms, validationreferences/loading-and-states.mdSkeletons, spinners, empty states, error boundaries, offlinereferences/dark-mode.mdPreference hierarchy, surface elevation, transitions, testingreferences/images-and-media.mdFormat selection, responsive images, favicons, OG imagesreferences/micro-interactions.mdScroll animations, page transitions, gestures, magnetic effectsreferences/i18n-visual-patterns.mdRTL, logical properties, text expansion, CJK, number formattingreferences/brand-and-identity.mdLogo sizing, brand color usage, consistency, lockup variantsreferences/animation-performance.mdCompositor-only props, will-change, layout thrashing, containreferences/code-typography.mdMonospace fonts, syntax highlighting, code blocks, diff viewsreferences/accessibility-wcag.mdWCAG 2.2, ARIA patterns, keyboard nav, screen reader testingreferences/conversion-design.mdLanding pages, CTAs, pricing tables, friction reductionreferences/data-visualization.mdChart selection matrix, dashboard patterns, accessible chartsreferences/modern-css-performance.mdCSS nesting, :has(), View Transitions, Tailwind v4, container queriesreferences/performance-optimization.mdCore Web Vitals, Lighthouse, image optimization, 45 Vercel rulesreferences/style-presets.md22 curated design presets with exact OKLCH values and font pairingsreferences/tools-catalog.mdTool recommendations: torph, soundcn, Lucide, Facehash, better-iconsreferences/ux-psychology.mdGestalt principles, Fitts's Law, Hick's Law, cognitive load, heuristicsreferences/ux-writing.mdError messages, microcopy, terminology, voice and tone, CTAs

---

Step 0.5: Anti-Slop Gate (MANDATORY — before ANY code)#

This step is non-negotiable. It takes 30 seconds and prevents hours of rework.

1. Read references/anti-patterns.md — specifically the AI Slop Fingerprint section and Professional Alternatives table. Actually read it, don't skip.

2. Write out your commitments — before touching code, declare:

   • Font: [exact name, not a banned default]
   • Layout strategy: [specific — not "centered everything"]
   • Accent color: [exact value in OKLCH — not Tailwind default indigo]
   • What makes this unforgettable: [one specific, memorable design choice]
   • What you're explicitly rejecting: [the obvious/generic approach for this type of product]

3. Run the 3-Second Test — picture the finished design. Would a designer say "AI-generated" in 3 seconds? If yes, change your commitments.

4. Check for slop combinations — if 3+ of these are true, STOP and redesign:

   • Centered vertical layout
   • Default Tailwind accent color
   • Uniform card grid
   • Generic sans-serif font
   • Same spacing everywhere
   • Three equal-width items in a row

HALT CONDITION: If you cannot fill out the commitments above with specific, non-default values, you MUST NOT proceed to Step 1. Go back to the references. Read anti-patterns.md. Try again. There is no "just do it" bypass for this step. The gate exists because without it, every output converges to the same generic AI aesthetic. This is not optional. No code until commitments are written.

---

Step 1: Design Thinking#

Before writing a single line of code, answer these questions internally:

Purpose. What problem does this interface solve? Who uses it? What is the single most important action?

Tone. Commit to a specific aesthetic direction. Not "clean and modern" (that is meaningless). Pick something with teeth: brutalist, editorial, retro-terminal, luxury serif, toy-like, industrial, organic, Swiss grid, art deco, vaporwave, newspaper broadsheet, scientific journal, or something entirely original. The direction should be informed by the content, not applied generically.

Differentiation. What makes this unforgettable? What is the one thing someone will remember after closing the tab? If there is no answer, the design is not ready.

Constraints. Framework requirements, accessibility targets, performance budgets, existing design tokens.

---

Step 2: Aesthetic Execution#

Typography#

Choose fonts that are distinctive, not default. Never use Inter, Roboto, Arial, or system fonts as primary choices. Pair a display font with a body font. Use a modular type scale (1.25 or 1.333 ratio). Set line heights between 1.4 and 1.6 for body text. Use OpenType features (ligatures, tabular numbers, small caps) when the font supports them. See references/typography.md for the full system.

Color#

Build palettes with intention. Use OKLCH for perceptually uniform color manipulation. Always tint neutrals (never use pure gray or pure black). Dominant color with sharp accent outperforms evenly distributed palettes. Test contrast ratios: 4.5:1 minimum for body text, 3:1 for large text and UI elements. See references/color-and-contrast.md.

Spatial Composition#

Use a spacing scale (4px base: 4, 8, 12, 16, 24, 32, 48, 64, 96). Asymmetric layouts, overlapping elements, diagonal flow, and grid-breaking moments create visual interest. Generous negative space communicates confidence. Dense layouts need careful rhythm. See references/spatial-design.md.

Backgrounds and Visual Depth#

Never default to flat solid colors. Create atmosphere with gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays, or subtle backdrop filters. Depth comes from elevation systems: consistent shadow scales, surface hierarchy, and z-index discipline.

Motion#

One well-orchestrated page load with staggered reveals (using animation-delay) creates more impact than scattered micro-interactions. Use CSS transitions for simple state changes. Use framer-motion or the Motion library for React when choreography matters. Never use bounce or elastic easing (it looks dated). Respect prefers-reduced-motion. See references/motion-and-animation.md.

Text Animation#

For text morphing effects (counters, status changes, tab labels), use torph (dependency-free, works with React/Vue/Svelte). Import as import { TextMorph } from 'torph/react' and wrap any text that changes dynamically.

Sound#

For UI sound feedback (clicks, notifications, transitions), use the soundcn pattern: inline base64 audio data URIs with a useSound hook via Web Audio API. Zero dependencies. See references/sensory-design.md.

Haptics#

For mobile web, use the WebHaptics pattern via the Vibration API ( navigator.vibrate()) to provide tactile feedback on button presses, toggles, and destructive actions. Always gate behind feature detection and user preference. See references/sensory-design.md.

Icons#

Use Lucide React as the default icon library ( lucide-react). For broader searches across 200K+ icons from 150+ collections, use the better-icons CLI pattern: search by keyword, retrieve SVG, sync to project. Prefer outline style for UI, solid for emphasis.

Avatars and Identity#

For deterministic avatar generation from strings (usernames, emails, UUIDs), use the Facehash pattern: a React component that generates unique face avatars. Same input always produces the same face. Zero external assets.

---

Step 3: Implementation Standards#

Single-File Artifacts#

When building for claude.ai artifacts (HTML or React), everything goes in one file. No external CSS files, no separate JS. Inline everything. For HTML artifacts, import external scripts only from https://cdnjs.cloudflare.com. For React artifacts, use only available libraries (lucide-react, recharts, d3, Three.js r128, Tone, shadcn/ui, Tailwind core utilities, lodash, mathjs, papaparse, Chart.js).

React Best Practices#

Follow these rules (see references/react-patterns.md for details):

• Server Components by default, 'use client' only when needed
• Colocate state with the component that uses it
• Prefer composition over prop drilling
• Use Suspense boundaries with meaningful fallbacks
• Never store derived state, compute it during render
• Use semantic HTML elements, not div soup
• Memoize expensive computations, not everything
• Default export for page/route components, named exports for utilities

CSS Variables for Theming#

Always define a CSS variable system for colors, spacing, typography, and shadows. This makes themes swappable and dark mode trivial.

css

:root {
  --color-surface: #fafaf9;
  --color-text: #1c1917;
  --color-accent: #dc2626;
  --radius: 8px;
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
}

Accessibility Defaults#

Every interface must include: visible focus indicators (never outline: none without replacement), sufficient color contrast, keyboard navigability, ARIA labels on interactive elements without visible text, and alt text on meaningful images. Do not treat accessibility as optional.

---

Step 4: Audit and Polish#

Before delivering any interface, run this mental checklist:

1. Typography audit. Is there a clear type hierarchy? Are fonts loaded and rendering? Is body text readable at default zoom?
2. Color audit. Does the palette feel cohesive? Do accents draw the eye to the right places? Does it work in both light and dark contexts?
3. Spatial audit. Is spacing consistent? Are elements aligned to an invisible grid? Is there breathing room?
4. Interaction audit. Do all interactive elements have hover, focus, and active states? Are transitions smooth? Is there loading feedback?
5. Responsive audit. Does it work on 375px wide screens? Does it scale gracefully to ultrawide?
6. Motion audit. Does the page load feel choreographed? Are transitions purposeful? Does prefers-reduced-motion disable non-essential animation?
7. Accessibility audit. Can you tab through the entire interface? Are contrast ratios sufficient? Do screen readers make sense of the structure?

---

Step 5: Design System Generation#

When asked to create a design system or DESIGN.md, follow the VoltAgent/Stitch format. See references/design-system.md for the complete template covering: visual theme and atmosphere, color palette with semantic roles, typography hierarchy, component styling (buttons, cards, inputs, navigation with states), layout principles, depth and elevation system, explicit dos and don'ts, responsive behavior, and an agent prompt guide.

---

Step 6: Generative and Canvas Art#

When the task involves algorithmic art, generative visuals, or static poster/print design, see references/generative-art.md. The process: write an algorithmic philosophy (4-6 paragraphs), then express it through p5.js code with seeded randomness, parameter controls, and seed navigation.

---

Commands#

These optional directives can be used to steer design refinement:

CommandEffect/auditTechnical quality check: accessibility, performance, responsive/critiqueUX design review: hierarchy, clarity, emotional resonance/polishFinal pass: refine spacing, transitions, copy/simplifyStrip to essence, remove visual noise/animateAdd purposeful motion and transitions/bolderAmplify timid designs with stronger visual choices/quieterTone down overly aggressive designs/normalizeAlign with design system standards/themeGenerate or apply a color/font theme/soundAdd UI sound effects to interactions/hapticsAdd haptic feedback for mobile web/redesignAudit an existing project, identify design problems, fix them systematically/softApply premium soft aesthetic: generous whitespace, depth, smooth spring animations/minimalistApply editorial minimalism: monochrome, crisp borders, inspired by Linear/Notion/brutalistApply raw mechanical aesthetic: Swiss typography meets CRT terminal/stitchGenerate a Google Stitch-compatible DESIGN.md for the current project

---

What Makes Design Feel Designed#

The anti-slop gate catches what NOT to do. This section describes what good design feels like -- the positive traits to aim for.

• Intentional asymmetry. Not everything centered. A sidebar heavier than the main content. A grid where one card spans two rows. Deliberate imbalance creates visual interest.
• Typographic personality. The font choice says something about the product. A fintech app using Clash Display feels different from one using Instrument Serif. The choice is the message.
• Color restraint with one brave moment. A monochromatic palette with a single saturated accent on the primary CTA. The accent earns attention because everything else is quiet.
• Depth as information architecture. Shadows and elevation are not decoration. They tell the user what is interactive, what is background, and what demands attention right now.
• Motion that teaches. A staggered reveal shows the user where to look first, second, third. A hover lift says "this is clickable." Animation is communication.
• Whitespace as confidence. Generous spacing says the product is not desperate for attention. It trusts the content to speak for itself.

If you can describe these qualities in the output you are building, the design is probably good. If you cannot, revisit Step 1.

---

Gotchas (Real Failure Points)#

These are not best practices. These are things that actually break in production and that AI agents get wrong repeatedly. Each one has burned real time.

1. Font loading race condition. Google Fonts @import in CSS blocks rendering. The page flashes in the system font, then shifts when the custom font loads. Fix: use <link rel="preload" as="font"> in the <head>, add font-display: swap, and always declare a fallback stack with similar metrics. If you skip this, your type scale is wrong for the first 500ms.

2. Dark mode contrast passes WCAG but is unreadable. OKLCH 0.55 0.02 230 on 0.11 0.02 230 passes the 4.5:1 ratio check but looks washed out on cheap laptop screens. Always test with a screenshot on an actual dark background, not just the contrast calculator. Text below 0.60 lightness in OKLCH needs extra chroma or a bump to 0.65+.

3. transition: all causes invisible layout jank. It transitions width, height, padding -- properties that trigger reflow. The page looks fine at 60fps on your M-series Mac but stutters on a 2019 Chromebook. Always specify exact properties: transition: opacity 0.2s, transform 0.3s.

4. Staggered animations fire on every re-render. CSS animation-delay on child elements replays every time React re-renders the parent. Either use animation-fill-mode: both with a one-shot class that gets removed, or gate the animation behind a data-entered attribute set once on mount.

5. Responsive "works at breakpoints" but breaks between them. Testing at 375px and 768px looks fine, but at 520px the layout collapses because you used fixed grid-template-columns: repeat(2, 1fr) instead of repeat(auto-fill, minmax(280px, 1fr)). Always test at 480px and 600px too -- these are the kill zones.

6. Tailwind class strings over 200 characters. Once a class string hits 200+ characters the component is unmaintainable. Extract to a CSS class with @apply, or better yet, use a cn() utility with conditional objects. This isn't a style preference -- it's a readability threshold.

7. Icon SVGs without aria-hidden="true". Every inline SVG icon announces itself to screen readers as "image" with no label. Decorative icons need aria-hidden="true". Icons that ARE the only content (icon-only buttons) need aria-label on the button instead.

8. forced-colors mode breaks custom design. Windows High Contrast mode ( @media (forced-colors: active)) overrides custom focus rings, tinted neutrals, and subtle borders. Test with it. Custom focus indicators need forced-color-adjust: none or a Highlight system color fallback.

9. Missing width/ height on images causes CLS. Every <img> without explicit dimensions (or aspect-ratio) causes Cumulative Layout Shift when it loads. Always set dimensions or use aspect-ratio as a fallback. This is the #1 CLS offender in production.

10. Autofill styling overrides your inputs. Browsers apply their own background color to autofilled inputs, ignoring your dark mode or custom input styles. Fix with input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--surface-1) inset; }.

11. backdrop-filter: blur() fails with overflow: hidden parent. In some browsers (notably older Safari), backdrop-filter does not render if any ancestor has overflow: hidden. Move the blurred element outside the clipping context or restructure the DOM.

12. position: fixed breaks inside transform parents. A transform on any ancestor creates a new containing block, making position: fixed behave like position: absolute. Move fixed elements to a body-level portal or remove the ancestor transform.

13. content-visibility: auto breaks position: sticky. The content-visibility: auto optimization creates a new layout containment context that prevents position: sticky children from working. Either skip content-visibility on sticky containers or restructure the nesting.

14. scroll-behavior: smooth on html interferes with programmatic scrolling. Setting scroll-behavior: smooth globally makes scrollTo(), scrollIntoView(), and anchor navigation all animate, which breaks instant programmatic jumps. Apply scroll-behavior: smooth per-container instead of on <html>.

15. Preset style exceptions are not contradictions. Some presets (e.g., Swiss Modern using Archivo, or a retro terminal preset using monospace) intentionally use fonts that appear on the banned list. Presets are scoped exceptions with a clear aesthetic rationale. Do not flag them as anti-slop violations.

---

The Non-Negotiables#

1. No design should ever look like "AI made this." 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. Both require the same level of care.
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. These are not small decisions.
6. The Anti-Slop Gate (Step 0.5) must be completed before writing any design code. No exceptions. If you cannot articulate specific, non-default commitments for font, color, layout, and differentiation, you are not ready to design. Go back to the references.
7. Transformation means transformation. When asked to redesign or improve a site, the result must be visually unrecognizable from the original. Changing CSS variables and swapping fonts is engineering, not design. A redesign changes the spatial logic, the visual hierarchy, the emotional register, and the layout structure. If someone could confuse the before and after, the redesign failed.