picasso

name	picasso
version	3.0.0
description	The ultimate frontend design and UI engineering skill. Use this whenever the user asks to build, design, style, or improve any web interface, component, page, application, dashboard, landing page, artifact, poster, or visual output. Covers typography, color systems, spatial design, motion/animation, interaction design, responsive layouts, sound design, haptic feedback, icon systems, generative art, theming, React best practices, and DESIGN.md system generation. Also use when the user asks to audit, critique, polish, simplify, animate, or normalize a frontend. Triggers on any mention of "make it look good," "fix the design," "UI," "UX," "frontend," "component," "landing page," "dashboard," "artifact," "poster," "design system," "theme," "animation," "responsive," or any request to improve visual quality. Use this skill even when the user does not explicitly ask for design help but the task involves producing a visual interface.
metadata	{"openclaw":{"always":false,"skillKey":"picasso","emoji":"🎨","homepage":"https://github.com/viperrcrypto/picasso"}}

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.

How the Skill and Agent Work Together

The Picasso skill (this file) and the Picasso agent (agents/picasso.md) are a unified system. They are NOT alternatives -- they are sequential phases of the same pipeline:

1. Discovery (Agent): When no .picasso.md exists, the Picasso agent MUST be spawned to run the full Visual Discovery Process -- crawl codebase, generate 6-10 HTML sample galleries, collect user reactions, narrow, confirm direction, generate .picasso.md. The skill BLOCKS until this completes.
2. Execution (Skill): Once .picasso.md exists with confirmed tokens, the skill's workflow takes over -- read references, anti-slop gate, design thinking, aesthetic execution, implementation, audit, polish.
3. Validation (Agent): After execution produces code, the agent can be re-spawned to screenshot, audit, and verify the output matches the confirmed direction.

The main Claude conversation MUST spawn the Picasso agent for discovery. It MUST NOT attempt to run discovery itself. The agent has a dedicated context window optimized for the multi-step gallery generation process. The skill provides the design knowledge base that informs both the agent's gallery generation and the subsequent code execution.

NO SHORTCUTS AT ANY PHASE. The discovery gallery is not optional. The anti-slop gate is not optional. The screenshot validation is not optional. Every step exists because skipping it produces generic output.

---

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.

---

MANDATORY FIRST STEP: Visual Discovery Gate (BLOCKING -- before EVERYTHING else)

This gate runs BEFORE any design work, BEFORE reading references, BEFORE the anti-slop gate, BEFORE design thinking, BEFORE any code. It is the absolute first thing that happens when Picasso is invoked for any design task.

When this gate fires:

• ANY design generation, build, redesign, overhaul, "make it look good", or new UI task
• ANY invocation where .picasso.md does NOT exist in the project root
• ANY time the user explicitly asks for design direction, styling, or visual work on a project that hasn't gone through discovery
• When the user runs /picasso

When this gate does NOT fire:

• Pure audit commands that generate NO code: /audit, /score, /quick-audit, /roast
• The user says "just fix [specific single thing]" (e.g., "fix the button color", "fix the spacing on line 42") -- targeted fixes to ONE element, not design-level work
• .picasso.md already exists AND the user is doing incremental work within the established direction

What happens:

You MUST spawn the Picasso agent (subagent_type: "picasso") to run the full Visual Discovery Process. Do NOT attempt to run discovery yourself in the main conversation. The agent has a dedicated context window for this multi-step process.

The agent will:

1. Crawl the codebase silently -- understand the app, tech stack, product type, competitors
2. Ask 2-3 quick context questions max -- only what can't be determined from code
3. Generate 6-10 fast HTML sample pages showing diverse design directions using the project's actual content/structure -- written to /tmp/picasso-gallery/
4. Screenshot and present the gallery -- the user reacts (like/hate/adjust), NOT specifies
5. Narrow and regenerate -- 3-5 refined samples based on reactions
6. Confirm direction -- extract tokens, present Design Brief with visual preview
7. Generate .picasso.md -- lock in the chosen direction

HARD RULES:

• The agent MUST generate the HTML sample gallery. It MUST NOT collapse this step into questions, text descriptions, or "let me describe what I'm thinking." The entire point is SHOWING, not TELLING.
• The agent MUST generate at least 6 distinct visual samples on the first round. Volume and diversity matter more than polish.
• The agent MUST screenshot the gallery and VIEW the screenshot before presenting to the user.
• The agent MUST wait for user reactions before narrowing. Do not assume preferences.
• The agent MUST NOT write any project code until the user has confirmed a direction and .picasso.md is generated.

NO SHORTCUTS. NO COLLAPSING STEPS. NO SKIPPING THE GALLERY.

The discovery process exists because users react to visuals, not specifications. Skipping it produces generic output. Every time. Without exception.

After Discovery Completes:

Once .picasso.md exists with confirmed tokens, proceed to Step 0 below. The skill steps (references, anti-slop gate, design thinking, execution) all operate WITHIN the direction established by discovery.

The Directory Technique (for landing pages and marketing pages)

When the task is a landing page, marketing page, or any page where multiple design directions could work: build a showcase directory with 3+ complete variations, not just one page.

1. Main screen: dark-themed grid listing all variations, each as a clickable card
2. Each card: navigates to a fully complete page — not a mockup, a real page
3. Each variation has a design thesis: e.g., "editorial serif", "brutalist minimal", "warm organic"
4. Preferences compound: as the user reacts across variations, future generations learn what they like
5. Save preferences: persist learned direction back to .picasso.md

This works because users discover what they want by reacting to complete options, not by specifying upfront. Build a single page only when explicitly requested.

---

Quick Start (30 seconds)

Already have a .picasso.md? Here's the minimum viable workflow for incremental work:

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 File	When to Read
references/typography.md	Any task involving text, fonts, headings, or type hierarchy
references/color-and-contrast.md	Color palettes, dark mode, accessibility, tinted neutrals
references/spatial-design.md	Layout, spacing, grids, visual hierarchy, whitespace
references/depth-and-elevation.md	Dual shadows, layering technique, shadow scale, z-index, hover patterns
references/motion-and-animation.md	Transitions, scroll effects, text morphing, micro-interactions
references/responsive-design.md	Mobile-first, fluid, container queries, touch targets
references/sensory-design.md	UI sound effects, haptic feedback, multi-sensory interfaces
references/react-patterns.md	React/Next.js component architecture, hooks, performance
references/anti-patterns.md	Explicit list of what NOT to do (the most important reference)
references/design-system.md	Generating DESIGN.md files, theming, systematic tokens
references/generative-art.md	Algorithmic art, p5.js, seeded randomness, flow fields
references/component-patterns.md	Standard component naming, taxonomy, and state patterns
references/navigation-patterns.md	Breadcrumbs, sidebar, tabs, bottom bar, mega menus, skip links
references/tables-and-forms.md	Sortable tables, inline editing, multi-step forms, validation
references/loading-and-states.md	Skeletons, spinners, empty states, error boundaries, offline
references/dark-mode.md	Preference hierarchy, surface elevation, transitions, testing
references/images-and-media.md	Format selection, responsive images, favicons, OG images
references/micro-interactions.md	Scroll animations, page transitions, gestures, magnetic effects
references/i18n-visual-patterns.md	RTL, logical properties, text expansion, CJK, number formatting
references/brand-and-identity.md	Logo sizing, brand color usage, consistency, lockup variants
references/code-typography.md	Monospace fonts, syntax highlighting, code blocks, diff views
references/accessibility-wcag.md	WCAG 2.2, ARIA patterns, keyboard nav, screen reader testing
references/conversion-design.md	Landing pages, CTAs, pricing tables, friction reduction
references/data-visualization.md	Chart selection matrix, dashboard patterns, accessible charts
references/modern-css-performance.md	CSS nesting, :has(), View Transitions, Tailwind v4, container queries
references/performance-optimization.md	Core Web Vitals, Lighthouse, image optimization, 45 Vercel rules
references/style-presets.md	22 curated design presets with exact OKLCH values and font pairings
references/tools-catalog.md	Tool recommendations: torph, soundcn, Lucide, Facehash, better-icons
references/ux-psychology.md	Gestalt principles, Fitts's Law, Hick's Law, cognitive load, heuristics
references/ux-writing.md	Error messages, microcopy, terminology, voice and tone, CTAs
references/ux-evaluation.md	Nielsen's 10 heuristics, Jobs to Be Done, state machines, prompt enhancement
references/visual-preview.md	HTML preview generation, side-by-side direction comparison, font URL mapping
references/figma-mcp.md	Figma MCP workflows, token extraction, design file analysis

---

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]
   • Border-radius strategy: [at least 3 distinct values — buttons, cards, modals, tags — never one radius for everything]
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. Use tangible descriptions, not abstract ones. Say 'Japanese tea house' not 'minimalist'. Say 'high-end stationery' not 'premium'. The more specific the reference, the better the output.

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.

Creative Direction. Step into the role of Creative Director, not just coder. Three strategies from Google Stitch:

• Start with Intent: Define exactly who the design is for and how you want them to feel
• Enhance your language: Swap abstract words for tangible aesthetic descriptions ("high-end stationery" not "sporty", "architectural limestone" not "premium")
• Master Color Hierarchy: Treat colors as visual weight—Neutral for canvas, Primary for ink, Tertiary for loudest accents

---

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.

: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

Available slash commands:

Command	Effect
/roast	Brutally honest design critique
/score	Quantified 0-100 design quality score with category breakdown
/quick-audit	5-minute fast design audit: 6 binary checks
/godmode	The ultimate design transformation pipeline
/figma	Analyze a Figma file and extract its design DNA
/steal	Extract design DNA from a URL or Figma file
/variants	Generate 2-3 distinct visual directions with side-by-side previews
/preview	Generate visual previews of design directions or current tokens
/evolve	Iterative multi-round design refinement
/mood	Generate a complete design system from a mood word
/preset	Browse and apply curated design presets with visual previews
/autorefine	Binary evaluation loop: define criteria, mutate, iterate to 95%+ pass
/backlog	Create and manage a persistent design debt backlog
/before-after	Visual transformation report
/compete	Head-to-head design comparison

---

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.
8. The Visual Discovery Gate must complete before any design-level execution. If .picasso.md does not exist, spawn the Picasso agent for full visual discovery. Do not attempt to run discovery in the main conversation. Do not skip the gallery. Do not substitute questions for visuals. The agent generates HTML samples, the user reacts, direction is confirmed, .picasso.md is created. Only then does execution begin.
9. Post-execution validation is mandatory. After implementing design changes, screenshot the result and compare against the .picasso.md direction. If the implementation drifts from the confirmed direction, fix it before delivering. Every major edit gets a screenshot. Not just at the end -- between each significant change.