{"id":48220359,"url":"https://github.com/viperrcrypto/picasso","last_synced_at":"2026-04-07T22:01:04.206Z","repository":{"id":348584609,"uuid":"1198795065","full_name":"viperrcrypto/picasso","owner":"viperrcrypto","description":"The ultimate AI design skill for producing distinctive, production-grade frontend interfaces","archived":false,"fork":false,"pushed_at":"2026-04-03T17:55:13.000Z","size":475,"stargazers_count":15,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-06T21:03:26.039Z","etag":null,"topics":["ai-skill","claude-code","codex","cursor","design","design-system","frontend","react","tailwind","ui-ux"],"latest_commit_sha":null,"homepage":null,"language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/viperrcrypto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-01T19:08:26.000Z","updated_at":"2026-04-06T04:00:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"3a4d74ac-ddef-4bae-b659-80d280b69929","html_url":"https://github.com/viperrcrypto/picasso","commit_stats":null,"previous_names":["viperrcrypto/picasso"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/viperrcrypto/picasso","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viperrcrypto%2Fpicasso","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viperrcrypto%2Fpicasso/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viperrcrypto%2Fpicasso/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viperrcrypto%2Fpicasso/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/viperrcrypto","download_url":"https://codeload.github.com/viperrcrypto/picasso/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viperrcrypto%2Fpicasso/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31530647,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-skill","claude-code","codex","cursor","design","design-system","frontend","react","tailwind","ui-ux"],"created_at":"2026-04-04T19:09:33.404Z","updated_at":"2026-04-07T22:01:04.150Z","avatar_url":"https://github.com/viperrcrypto.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"logo.png\" alt=\"Picasso\" width=\"200\" /\u003e\u003cbr/\u003e\u003cbr/\u003e\n  \u003cstrong\u003ePICASSO\u003c/strong\u003e\u003cbr/\u003e\n  The most comprehensive AI design skill ever built.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  33 reference domains \u0026bull; 15 slash commands \u0026bull; 19,000 lines of design intelligence\u003cbr/\u003e\n  Every interface looks like a senior design engineer spent days on it.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#install\"\u003eInstall\u003c/a\u003e \u0026bull;\n  \u003ca href=\"#what-makes-picasso-different\"\u003eWhy Picasso\u003c/a\u003e \u0026bull;\n  \u003ca href=\"#visual-discovery-not-a-questionnaire\"\u003eVisual Discovery\u003c/a\u003e \u0026bull;\n  \u003ca href=\"#creative-commands\"\u003eCreative Commands\u003c/a\u003e \u0026bull;\n  \u003ca href=\"#benchmark\"\u003eBenchmarks\u003c/a\u003e \u0026bull;\n  \u003ca href=\"#commands\"\u003eAll Commands\u003c/a\u003e \u0026bull;\n  \u003ca href=\"#references\"\u003eReferences\u003c/a\u003e \u0026bull;\n  \u003ca href=\"#sources\"\u003eSources\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## The Problem\n\nEvery 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.\n\nExisting 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.\n\n**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.\n\n---\n\n## What Makes Picasso Different\n\n### Depth That No Other Skill Matches\n\nPicasso covers **33 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.\n\n| Domain | What You Get |\n|---|---|\n| **Typography** | Modular type scales, 15+ font alternatives to Inter/Roboto, OpenType feature activation, vertical rhythm system, `max-width: 65ch`, font loading strategies |\n| **Color \u0026 Contrast** | OKLCH-based palette construction, tinted neutrals (never pure gray), 60-30-10 rule, dark mode inversion rules, \"alpha is a design smell\" |\n| **Spatial Design** | 4px base spacing scale, Gestalt proximity ratios (2:1 minimum), Squint Test, asymmetric grid patterns, \"cards are not required\" |\n| **Motion \u0026 Animation** | Duration rule (100/200/300/500ms), only animate transform+opacity, exit = 75% of entrance, grid-template-rows for height, stagger caps |\n| **UX Evaluation** | Nielsen's 10 heuristics as actionable checklist, Jobs to Be Done extraction from code, component state machines (8 states), prompt enhancement for vague requests |\n| **Responsive Design** | Input method detection (`@media pointer/hover`), safe areas, container queries, content-driven breakpoints, real device testing |\n| **Sensory Design** | soundcn (700+ CC0 sounds), web-haptics (4 presets + custom), multi-sensory integration patterns |\n| **React/Next.js** | Server Components by default, barrel import avoidance, RSC serialization minimization, React.cache() deduplication |\n| **Anti-Patterns** | 50+ explicit \"never do this\" rules across typography, color, layout, motion, interaction, code, and content |\n| **Design Systems** | VoltAgent/Google Stitch 9-section DESIGN.md format, 4 pre-built themes, two-layer token architecture |\n| **Generative Art** | Philosophy-first creative process, seeded randomness, p5.js patterns, parameter-driven exploration |\n| **Component Patterns** | 40+ standard component names from 90+ real design systems, state matrix, compound component patterns, sizing conventions |\n| **UX Psychology** | Gestalt principles with CSS examples, Fitts's/Hick's/Miller's/Jakob's Law with specific numbers, F/Z-pattern scanning, Peak-End Rule |\n| **Data Visualization** | Chart selection decision matrix (13 types), dashboard layout patterns, Okabe-Ito colorblind-safe palettes, Tufte data-ink ratio, React library comparison |\n| **Modern CSS** | CSS nesting, :has(), @layer, anchor positioning, @scope, @property, color-mix(), subgrid, Popover API, scroll-driven animations, View Transitions |\n| **Web Performance** | Core Web Vitals targets (LCP \u003c 2.5s, CLS \u003c 0.1, INP \u003c 200ms), image format matrix (AVIF/WebP), font-display strategies, critical CSS, Tailwind v4 |\n| **Conversion Design** | Hero section variations, CTA design with conversion data, pricing page structure, friction reduction metrics, onboarding frameworks, notification hierarchy |\n| **Accessibility** | 12 WAI-ARIA widget patterns with exact roles/states/keyboard, WCAG 2.2 new criteria, focus management for SPAs, accessible data tables, drag-and-drop alternatives |\n| **UX Writing** | Error message formula (what + why + fix), button label rules (verb + object), translation expansion percentages, terminology consistency |\n| **Style Presets** | 22 curated visual presets with hex values, font pairings, border-radius, and signature UI elements, mapped to moods |\n| **Performance Optimization** | Vercel's 45 React/Next.js rules across 7 priority tiers with BAD/GOOD code examples |\n| **Navigation Patterns** | Breadcrumbs with ARIA, sidebar collapse, tabs vs button groups, mobile bottom bar vs hamburger, sticky headers, mega menus, skip links |\n| **Tables \u0026 Forms** | Sortable tables with `aria-sort`, responsive strategies, inline editing, multi-select, form validation (blur/submit/real-time), multi-step forms |\n| **Loading \u0026 States** | Duration rules (\u003c1s/1-3s/3s+/10s+), skeleton shimmer CSS, 5 empty state types, error boundaries, retry with backoff, offline detection |\n| **Dark Mode** | Preference hierarchy, surface elevation (lighter = higher), mode transitions, accent adjustment, image dimming, forced-colors, autofill fix |\n| **Images \u0026 Media** | AVIF/WebP/SVG decision tree, srcset/sizes, CLS prevention, favicon multi-format, OG images (1200x630), video backgrounds |\n| **Micro-Interactions** | IntersectionObserver scroll animations, View Transitions API, magnetic cursors, gesture detection (swipe/pinch), animation budget (max 3 concurrent) |\n| **i18n Visual Patterns** | Logical properties for RTL, text expansion by language (+35% German), CJK rendering, Noto font stacks, icon mirroring rules |\n| **Brand \u0026 Identity** | Logo sizing (min 24px), clear space rules, lockup variants, 60-30-10 brand color usage, when to bend brand rules |\n| **Visual Preview** | Self-contained HTML preview generation, side-by-side direction comparison, preset browser grid, font URL mapping, screenshot protocol |\n| **Code Typography** | JetBrains Mono/Fira Code selection, syntax highlighting contrast (3:1 min), code block design, copy button UX, diff views, terminal styling |\n\n### The AI-Slop Firewall\n\nPicasso'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:\n\n**Banned typography:** Inter, Roboto, Arial, Open Sans, Space Grotesk, monospace-as-lazy-technical-vibe, large icons with rounded corners above every heading.\n\n**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.\"\n\n**Banned layout:** Cards nested in cards, identical card grids (icon + heading + text repeated), hero metric layout template, centered everything, same spacing everywhere, glassmorphism everywhere.\n\n**Banned motion:** bounce/elastic easing, `transition: all`, animating width/height/padding/margin, no reduced-motion support.\n\n**Banned interaction:** Placeholder-only labels, `outline: none` without replacement, hover-only interactions, every button styled as primary.\n\n### Integrated Tool Ecosystem\n\nPicasso doesn't just describe tools -- it specifies exactly how to use them with installation commands, import paths, and API examples:\n\n| Tool | What It Does | Integration |\n|---|---|---|\n| **torph** | Text morphing animation | `import { TextMorph } from 'torph/react'` with spring easing |\n| **soundcn** | 700+ UI sounds | `npx shadcn add @soundcn/click-soft`, base64 inline, zero deps |\n| **web-haptics** | Mobile haptic feedback | 4 presets (success/nudge/error/buzz), desktop debug mode |\n| **facehash** | Deterministic avatar faces | ~3KB, SVG, 3D depth, Avatar/AvatarFallback pattern |\n| **better-icons** | 200K+ icons from 150+ sets | MCP server for AI agents, CLI search, project sync |\n| **Geist Pixel** | 5 pixel font variants | Square/Grid/Circle/Triangle/Line, Next.js native |\n| **Lucide React** | Default icon library | Direct imports (avoid barrel files) |\n\n---\n\n## Visual Discovery (Not a Questionnaire)\n\nMost users can't articulate what they want but can instantly react to what they see. So Picasso shows, not asks. The gallery generation is **non-negotiable** -- it cannot be collapsed into questions, text descriptions, or verbal mood boards.\n\n```\n1. CRAWL    Picasso agent silently reads your codebase, identifies the\n            product type, studies 2-3 real competitors in your space.\n\n2. ASK      2-3 quick questions max: \"What's the primary user action?\"\n            \"Any brand colors to keep?\" \"Site you love the look of?\"\n\n3. SHOW     Generates 6-10 fast HTML sample pages, each a different\n            design direction applied to YOUR app's actual structure.\n            Screenshots each one. Opens a gallery for you to browse.\n\n4. REACT    You: \"Like 3 and 7. Hate the dark ones. 7 is close but\n            the font is too playful.\"\n\n5. NARROW   Generates 3-5 refined samples based on your reactions.\n            Each one more polished than round 1.\n\n6. CONFIRM  You pick a direction. Agent generates .picasso.md and\n            hands off to the skill for implementation.\n```\n\nThis process runs automatically when there's no `.picasso.md` in your project. Once you've confirmed a direction, `.picasso.md` stores your tokens and future invocations skip straight to execution. Run `/picasso` to redo discovery at any time.\n\nYou never have to go look at design sites for inspiration. Picasso brings it to you. Your reactions reveal more preferences than any questionnaire.\n\n---\n\n## Creative Commands\n\nThese are the features that make Picasso unlike any other design tool.\n\n### `/roast` -- The Brutally Honest Critique\n\nForget polite feedback. `/roast` tears your design apart with designer-Twitter energy.\n\n```\n🔥🔥🔥🔥 ROAST SCORE: 4/5\n\nThis hero section looks like every v0 output from 2024. The purple gradient\nphysically hurts my eyes. The three identical cards are a cry for help. And\nthe \"Build the future of work\" headline? It's 2026 -- we've moved on.\n\nThe Inter font is doing NOTHING for you. It's the design equivalent of\nwearing khakis to a nightclub. And transition: all 0.3s? That's animating\nyour box-shadow, your border-color, and your will to live.\n\nHere's how to fix it:\n1. Kill the gradient. Use oklch(0.15 0.02 250) as your background.\n2. Replace Inter with Satoshi for display, DM Sans for body.\n3. Break the three-card grid. Make the first card 2x width.\n...\n\nWhat IS working: Your spacing scale is consistent (4px base) and the\nsemantic HTML structure is solid. Build on that.\n```\n\n### `/score` -- Quantified Design Quality\n\nA single 0-100 score, broken down by category. Track it over time.\n\n```\n## Picasso Design Score: 73/100\n\nTypography:    ████████████░░░  12/15\nColor:         ████████████░░░  11/15\nSpacing:       ████████░░        8/10\nUX Heuristics: ████████████████ 16/20\nMotion:        ██████░░░░        6/10\nResponsive:    ████████░░        8/10\nPerformance:   ██████░░░░        6/10\nAnti-Slop:     ██████░░░░        6/10\n\nTop fixes for +15 points:\n1. Replace default primary color with industry-appropriate choice (+4)\n2. Set max-width on body text and increase to 16px (+3)\n3. Add prefers-reduced-motion support (+3)\n4. Replace outline:none with focus-visible (+3)\n5. Replace #000 with tinted near-black (+2)\n```\n\n### `/steal \u003curl\u003e` -- Extract Any Site's Design DNA\n\nPoint at a live website and Picasso extracts its entire design language into a `.picasso.md` config.\n\n```bash\n/steal https://linear.app\n```\n\nExtracts: fonts, color palette, spacing rhythm, border-radius system, shadow style, animation patterns, layout structure. Generates a config that makes your project match that aesthetic.\n\n### `/mood \u003cword\u003e` -- Instant Design System from a Word\n\n```bash\n/mood cyberpunk\n```\n\nGenerates 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.\n\n### `/evolve` -- Iterative Multi-Round Refinement\n\nProposes 3 directions as visual HTML previews, lets you pick, then implements and refines through multiple rounds with screenshots between each:\n\n```\nRound 1: [generates 3 visual preview cards, screenshots them]\n         A) Counsel -- sage/teal, serif headers, 8px radius\n         B) Chambers -- dark, amber accent, monospace, 3px sharp\n         C) Parchment -- warm cream, terracotta, italic serif\n\nYou: B, but less extreme\n\nRound 2: [implements B with adjustments, screenshots running app]\n         What do you love? What's not right?\n\nYou: Love the typography. Cards need more breathing room.\n\nRound 3: [adjusts spacing, screenshots again]\n         Are we there?\n\nYou: Ship it.\n```\n\n### `/compete \u003curl\u003e` -- Head-to-Head Design Battle\n\n```bash\n/compete https://competitor.com\n```\n\nScreenshots both sites, scores both, produces a head-to-head comparison:\n\n```\n                    You        Competitor\nTypography:         72         88          ← They win (modular scale)\nColor:              85         71          ← You win (better contrast)\nResponsive:         90         65          ← You win (mobile-first)\nPerformance:        45         92          ← They win (image optimization)\nAccessibility:      88         42          ← You win (focus states)\nOverall:            76         72          ← You win, barely\n\nKey gap: Their typography is stronger because they use a consistent\n1.25 ratio scale. Yours has 7 different sizes with no clear ratio.\nFix this and you pull ahead significantly.\n```\n\n### `/before-after` -- Visual Transformation Report\n\nAfter any design changes, auto-generates side-by-side screenshots showing exactly what changed and why. Shareable HTML report.\n\n### `/preset \u003cname\u003e` -- One-Command Aesthetic\n\n```bash\n/preset            # Visual browser grid of all 22 presets -- pick one\n/preset bold-signal  # Preview Bold Signal, then apply it\n```\n\nWithout args: generates a visual grid showing all 22 presets with swatches, fonts, and sample buttons. Pick visually. With a name: shows a full-page preview before applying. Generates `.picasso.md` + `DESIGN.md` + updates CSS variables.\n\n---\n\n## Benchmark\n\n### Picasso vs. Every Other Design Skill\n\nWe compared Picasso against every publicly available AI design skill as of April 2026.\n\n| Metric | Picasso | Anthropic frontend-design | Impeccable | Taste Skill | Generic skills |\n|---|---|---|---|---|---|\n| **Reference domains** | **33** | 1 | 7 | 1 | 1-3 |\n| **Total lines of guidance** | **19,000** | ~120 | ~2,500 | ~200 | 50-300 |\n| **Anti-pattern rules** | **50+** | ~10 | ~30 | ~5 | 0-5 |\n| **Slash commands** | **15** | 0 | 20 | 0 | 0-3 |\n| **ARIA patterns documented** | **12 widgets** | 0 | 0 | 0 | 0 |\n| **React performance rules** | **45 (Vercel)** | 0 | 0 | 0 | 0 |\n| **Chart/data viz guidance** | **Full matrix** | None | None | None | None |\n| **WCAG 2.2 coverage** | **Full** | None | Partial | None | None |\n| **Conversion/landing page** | **CTA data + pricing** | None | None | None | None |\n| **Modern CSS (2024-2025)** | **12 features** | None | Partial | None | None |\n| **Core Web Vitals** | **LCP/CLS/INP** | None | None | None | None |\n| **Pre-built presets** | **22 + 4 OKLCH** | 0 | 0 | 0 | 0-3 |\n| **UX psychology** | **6 laws + patterns** | None | None | None | None |\n| **Design system generation** | **9-section (Stitch)** | None | None | None | None |\n| **Sound/haptics** | **soundcn + web-haptics** | None | None | None | None |\n| **Scoring system** | **0-100 quantified** | None | /20 + /40 | None | None |\n| **Visual discovery** | **6-10 HTML gallery + reaction loop** | None | None | None | None |\n| **Creative commands** | **15 (/roast, /score, /godmode, /steal, /evolve, /mood, /compete, /variants, /preset, /before-after, /figma, /preview, /backlog, /quick-audit, /autorefine)** | None | None | None | None |\n| **Tool integrations** | **7 libraries** | 0 | 0 | 0 | 0 |\n| **Sources consolidated** | **15+ repos** | 1 | 1 | 1 | 0-1 |\n\n### What This Means in Practice\n\n**Without Picasso**, your AI will:\n- Default to Inter or Roboto every time\n- Use purple gradients because that's what the training data looks like\n- Center everything because it's the safe choice\n- Ignore accessibility until someone files a complaint\n- Use `transition: all 0.3s ease` and call it animated\n- Produce interfaces that look like every other AI-generated UI\n\n**With Picasso**, your AI will:\n- Choose distinctive typography (Instrument Sans, Fraunces, Outfit) with proper OpenType features\n- Build OKLCH palettes with tinted neutrals and the 60-30-10 rule\n- Create asymmetric layouts with intentional spatial hierarchy\n- Include all 8 interactive states on every element\n- Hit WCAG 2.2 AA compliance by default\n- Optimize for Core Web Vitals (LCP \u003c 2.5s, CLS \u003c 0.1, INP \u003c 200ms)\n- Add text morphing, UI sounds, and haptic feedback where appropriate\n- Generate DESIGN.md files that any AI agent can read\n- Never produce the same design twice\n\n---\n\n## Install\n\n### Option 1: npx (Recommended)\n\n```bash\n# Install skill + agent to current project\nnpx picasso-skill\n\n# Install globally (all Claude Code projects)\nnpx picasso-skill --global\n\n# Skill only (no agent)\nnpx picasso-skill --skill-only\n\n# Install for Cursor\nnpx picasso-skill --cursor\n\n# Install for Codex\nnpx picasso-skill --codex\n\n# Install for OpenClaw\nnpx picasso-skill --openclaw\n\n# Or via ClawHub marketplace\nclawhub install picasso\n\n# Custom path\nnpx picasso-skill --path ./my-skills\n```\n\n### Option 2: One-Liner\n\n```bash\n# Project-specific (skill + agent)\ngit clone https://github.com/viperrcrypto/picasso.git /tmp/picasso \u0026\u0026 \\\n  mkdir -p .claude/skills .claude/agents \u0026\u0026 \\\n  cp -r /tmp/picasso/skills/picasso .claude/skills/picasso \u0026\u0026 \\\n  cp /tmp/picasso/agents/picasso.md .claude/agents/picasso.md \u0026\u0026 \\\n  rm -rf /tmp/picasso\n\n# Global (all projects)\ngit clone https://github.com/viperrcrypto/picasso.git /tmp/picasso \u0026\u0026 \\\n  mkdir -p ~/.claude/skills ~/.claude/agents \u0026\u0026 \\\n  cp -r /tmp/picasso/skills/picasso ~/.claude/skills/picasso \u0026\u0026 \\\n  cp /tmp/picasso/agents/picasso.md ~/.claude/agents/picasso.md \u0026\u0026 \\\n  rm -rf /tmp/picasso\n```\n\n### Option 3: Manual\n\n```bash\ngit clone https://github.com/viperrcrypto/picasso.git\ncp -r picasso/skills/picasso ~/.claude/skills/picasso\ncp picasso/agents/picasso.md ~/.claude/agents/picasso.md\n```\n\n### Option 4: Claude.ai (Consumer)\n\nUpload `SKILL.md` as a Custom Skill in Claude.ai settings. Upload reference files alongside it for full coverage.\n\n---\n\n## Skill + Agent: A Unified Pipeline\n\nPicasso ships as both a **skill** (design knowledge + execution framework) and an **agent** (autonomous discovery + validation). They are NOT alternatives -- they are sequential phases of the same pipeline.\n\n```\nUser asks for design work\n  -\u003e Skill loads, checks for .picasso.md\n  -\u003e No .picasso.md? BLOCK. Spawn Picasso agent.\n  -\u003e Agent crawls codebase silently\n  -\u003e Agent asks 2-3 questions max\n  -\u003e Agent generates 6-10 HTML sample pages to /tmp/picasso-gallery/\n  -\u003e Agent screenshots gallery, presents to user\n  -\u003e User reacts (like/hate/adjust)\n  -\u003e Agent narrows to 3-5 refined samples\n  -\u003e User picks direction\n  -\u003e Agent generates .picasso.md\n  -\u003e Control returns to skill for execution\n  -\u003e Skill runs anti-slop gate, references, design thinking, code\n  -\u003e Agent re-spawned for post-execution screenshot validation\n```\n\n| | Skill (Execution) | Agent (Discovery + Validation) |\n|---|---|---|\n| **What it is** | 33 reference files + anti-slop gate + implementation standards | Autonomous design engineer with visual discovery |\n| **How it works** | Loaded into context for design execution | Runs as a sub-process with its own dedicated context |\n| **When it runs** | After `.picasso.md` exists, for all design code work | First invocation (no `.picasso.md`), slash commands, validation |\n| **Owns** | References, anti-slop gate, design thinking, code standards | Visual discovery gallery, screenshots, direction confirmation |\n| **Can screenshot** | No | Yes (via `npx playwright screenshot`) |\n| **Can generate gallery** | No | Yes (6-10 HTML sample pages) |\n| **Can auto-fix issues** | No | Yes (with pre-flight git/test checks) |\n| **Enforces anti-slop gate** | Yes, before any code | Yes, mandatory before any generation |\n\n**Neither works alone on design-level tasks.** Discovery (agent) then execution (skill) then validation (agent).\n\n---\n\n## Commands\n\nPicasso has two types of commands: **slash commands** you invoke directly, and **agent behaviors** the Picasso agent handles internally when running pipelines like `/godmode`.\n\n### Slash Commands (User-Invocable)\n\nThese have dedicated command files and can be invoked directly.\n\n| Command | What It Does |\n|---|---|\n| `/roast` | Brutally honest design critique with sharp, specific, funny feedback and screenshot verification |\n| `/score` | Quantified 0-100 design quality score with category breakdown |\n| `/godmode` | The ultimate command: interview + audit + score + roast + fix everything + before/after report |\n| `/quick-audit` | 5-minute fast audit: 6 binary pass/fail checks (font, color, layout, spacing, a11y, anti-slop) |\n| `/autorefine` | Binary evaluation loop: 6 criteria, mutate one thing at a time, iterate to 95%+ pass rate |\n| `/evolve` | Multi-round iterative design refinement with screenshots between rounds |\n| `/steal \u003curl\u003e` | Extract design DNA from any live website into `.picasso.md` |\n| `/mood \u003cword\u003e` | Generate complete design system from a single evocative word |\n| `/compete \u003curl\u003e` | Head-to-head design comparison against a competitor site |\n| `/before-after` | Visual side-by-side comparison after changes with HTML report |\n| `/preset \u003cname\u003e` | Apply a curated community design preset (linear, stripe, vercel, notion, etc.) |\n| `/variants` | Generate 2-3 distinct visual directions with side-by-side visual HTML previews |\n| `/preview` | Visual preview of design tokens, presets, or side-by-side direction comparison |\n| `/figma` | Figma MCP integration: extract design tokens, audit, compare Figma vs live |\n| `/backlog` | Create persistent design debt backlog with impact-priority scoring in `.picasso-backlog.md` |\n\n### `/godmode` -- The Nuclear Option\n\nOne command. Full transformation. Interview, audit, score, roast, fix everything, verify, before/after report.\n\n```\n/godmode\n\nPhase 1: Understanding your project...\nPhase 2: Scoring... 42/100. Roasting... 🔥🔥🔥🔥\nPhase 3: Found 23 issues. Fixing all = score ~85. Proceed? [y]\nPhase 4: Fixing... typography ✓ color ✓ spacing ✓ a11y ✓ motion ✓ responsive ✓ perf ✓\nPhase 5: Re-scoring... 87/100 (+45 points)\nPhase 6: Before/after report generated.\n\nGODMODE Complete: 42 → 87 (+45 points), 47 files modified, 23 issues fixed\n```\n\n---\n\n### Agent Behaviors (Internal)\n\nThese are capabilities defined in the Picasso agent that run as part of pipelines (e.g., `/godmode` calls several internally). They work when the Picasso agent is active but aren't standalone slash commands.\n\n| Behavior | What It Does |\n|---|---|\n| Visual Discovery | Crawl codebase, generate HTML gallery, collect reactions, confirm direction, write `.picasso.md` |\n| Design Audit | Full technical audit across typography, color, spacing, UX heuristics, motion, responsive |\n| Auto-Fix | Fix audit findings with smallest safe changes, re-audit to verify |\n| Screenshot Validation | Take and view screenshots between every major edit to verify output |\n| Anti-Slop Gate | Mandatory pre-code checklist: font, color, layout, differentiation commitments |\n| Competitor Research | Study 2-3 real competitors in the same domain before any redesign |\n\n---\n\n## References\n\n```\nreferences/                          # 33 files, 7,000 lines\n  anti-patterns.md                   # 50+ banned patterns (THE MOST IMPORTANT FILE)\n  typography.md                      # Type systems, font pairing, scales, vertical rhythm\n  color-and-contrast.md              # OKLCH, tinted neutrals, dark mode, 60-30-10\n  spatial-design.md                  # 4px spacing scale, grids, hierarchy, Squint Test\n  depth-and-elevation.md             # Shadows, layering, z-index, hover patterns\n  motion-and-animation.md            # Duration, easing, staggering, performance (merged)\n  micro-interactions.md              # Scroll animations, View Transitions, gestures, cursors\n  navigation-patterns.md             # Breadcrumbs, sidebar, tabs, bottom bar, mega menus\n  tables-and-forms.md                # Sortable tables, inline editing, validation\n  loading-and-states.md              # Skeletons, error boundaries, empty states, offline\n  responsive-design.md               # Input method detection, container queries\n  dark-mode.md                       # Preference hierarchy, elevation, transitions\n  images-and-media.md                # Format selection, srcset, favicons, OG images\n  brand-and-identity.md              # Logo sizing, brand color, lockup variants\n  i18n-visual-patterns.md            # RTL, logical properties, text expansion, CJK\n  code-typography.md                 # Monospace fonts, syntax highlighting, code blocks\n  sensory-design.md                  # useSound hook, haptic patterns, multi-sensory\n  react-patterns.md                  # Server Components, composition, Tailwind v4\n  design-system.md                   # DESIGN.md format, theme generation, tokens\n  generative-art.md                  # Philosophy-first process, p5.js, seeded randomness\n  component-patterns.md              # 40+ components, state matrix, compound patterns\n  ux-psychology.md                   # Gestalt, Fitts's/Hick's/Miller's/Jakob's Law\n  ux-writing.md                      # Error formula, button labels, terminology\n  ux-evaluation.md                   # Nielsen's 10 heuristics, JTBD, state machines\n  data-visualization.md              # Chart selection matrix, dashboard layouts, Tufte\n  conversion-design.md               # Landing pages, CTAs, pricing, onboarding\n  accessibility-wcag.md              # ARIA patterns, WCAG 2.2, focus management\n  modern-css-performance.md          # Nesting, :has(), @layer, View Transitions, Tailwind v4\n  performance-optimization.md        # Core Web Vitals, priority tiers\n  style-presets.md                   # 22 visual presets with values and font pairings\n  visual-preview.md                  # HTML preview generation, templates, font mapping\n  figma-mcp.md                       # Figma MCP workflows, token extraction\n  tools-catalog.md                   # torph, soundcn, Lucide, Facehash, better-icons\n```\n\n---\n\n## Configurable Settings\n\nThree dials (1-10) control the design character:\n\n| Setting | Low (1-3) | Mid (4-6) | High (7-10) |\n|---|---|---|---|\n| **DESIGN_VARIANCE** | Clean, centered, conventional | Considered asymmetry, intentional breaks | Avant-garde, overlapping, unconventional grids |\n| **MOTION_INTENSITY** | Hover states and fades only | Staggered reveals, scroll-triggered, text morphing | Magnetic cursors, parallax, complex choreography |\n| **VISUAL_DENSITY** | Spacious, luxury, breathing room | Balanced, structured whitespace | Dense dashboards, data-heavy, compact |\n\n**Shortcuts:**\n- \"Make it premium\" / \"luxury\" -\u003e VISUAL_DENSITY 2-3, MOTION_INTENSITY 4-5\n- \"Dashboard\" / \"admin panel\" -\u003e VISUAL_DENSITY 7-8\n- \"Make it pop\" / \"wow factor\" -\u003e DESIGN_VARIANCE 7-8, MOTION_INTENSITY 7-8\n\n---\n\n## Sources\n\nPicasso consolidates and builds upon 15+ open-source projects and research sources:\n\n| Source | What Was Extracted |\n|---|---|\n| [Anthropic Skills](https://github.com/anthropics/skills) (5 skills) | frontend-design rules, canvas-design philosophy process, algorithmic-art p5.js pipeline, theme-factory 10 themes, web-artifacts-builder bundling |\n| [Impeccable](https://github.com/pbakaus/impeccable) | 7-domain reference system, 20 steering commands, anti-AI-slop rules, 8 interactive states, scoring systems, UX writing |\n| [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) | 9-section DESIGN.md format, 55 real-world site examples, Agent Prompt Guide concept |\n| [Vercel agent-skills](https://github.com/vercel-labs/agent-skills) | 45 React/Next.js performance rules across 7 priority tiers |\n| [Frontend-slides](https://github.com/zarazhangrui/frontend-slides) | 12 style presets, feeling-to-animation mapping, viewport-fitting CSS |\n| [Torph](https://torph.lochie.me/) | Dependency-free text morphing with spring easing |\n| [soundcn](https://github.com/kapishdima/soundcn) | 700+ CC0 UI sounds, shadcn-style installation, Web Audio API |\n| [web-haptics](https://haptics.lochie.me/) | Mobile haptic feedback with 4 presets and desktop debug mode |\n| [facehash](https://www.facehash.dev/) | Deterministic SVG avatar generation with 3D depth |\n| [better-icons](https://github.com/better-auth/better-icons) | 200K+ icons from 150+ collections, MCP server for AI agents |\n| [Geist Pixel](https://vercel.com/blog/introducing-geist-pixel) | 5 pixel font variants for retro/gaming aesthetics |\n| [CryptoSkills](https://github.com/0xinit/cryptoskills) | Async state machine patterns, error classification taxonomy |\n| [InterfaceCraft](https://www.interfacecraft.dev/) | Design philosophy (\"reduce until clear, refine until right\") |\n| NNGroup, Laws of UX, W3C WAI | UX psychology research, WCAG 2.2 patterns, accessibility best practices |\n| Tufte, Data-to-Viz, ColorBrewer | Data visualization principles, chart selection, colorblind-safe palettes |\n\n---\n\n## The Non-Negotiables\n\n1. **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.\n2. **Every design must have a clear aesthetic point of view.** If it could belong to any product, it belongs to none.\n3. **Match implementation complexity to vision.** Maximalist designs need elaborate code. Minimalist designs need surgical precision.\n4. **Text is always a design element**, never an afterthought.\n5. **Every detail matters.** The shadow radius, the letter spacing, the hover transition duration, the border color in dark mode.\n6. **Every interactive element needs all 8 states:** default, hover, focus, active, disabled, loading, error, success.\n7. **Accessibility is not optional.** WCAG 2.2 AA compliance is the baseline, not the goal.\n8. **Performance is a feature.** LCP \u003c 2.5s, CLS \u003c 0.1, INP \u003c 200ms.\n9. **UX writing is design.** Buttons say what they do. Errors explain how to fix. Empty states guide the next action.\n10. **Vary between generations.** Never converge on the same fonts, colors, or layouts across projects.\n\n---\n\n## License\n\nMIT\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003csub\u003eBuilt by \u003ca href=\"https://github.com/viperrcrypto\"\u003eviperrcrypto\u003c/a\u003e. Every interface deserves intention.\u003c/sub\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviperrcrypto%2Fpicasso","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviperrcrypto%2Fpicasso","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviperrcrypto%2Fpicasso/lists"}