npm - picasso-skill - Versions diffs - 1.3.1 → 1.3.2 - Mend

picasso-skill 1.3.1 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -4,15 +4,17 @@
 </p>
 <p align="center">
-  20 reference domains &bull; 25+ commands &bull; 4,700+ lines of actionable design intelligence<br/>
+  20 reference domains &bull; 35+ commands &bull; 4,700+ lines of actionable design intelligence<br/>
   Every interface looks like a senior design engineer spent days on it.
 </p>
 <p align="center">
   <a href="#install">Install</a> &bull;
   <a href="#what-makes-picasso-different">Why Picasso</a> &bull;
+  <a href="#the-design-interview">Interview</a> &bull;
+  <a href="#creative-commands">Creative Commands</a> &bull;
   <a href="#benchmark">Benchmarks</a> &bull;
-  <a href="#commands">Commands</a> &bull;
+  <a href="#commands">All Commands</a> &bull;
   <a href="#references">References</a> &bull;
   <a href="#sources">Sources</a>
 </p>
@@ -89,6 +91,178 @@ Picasso doesn't just describe tools -- it specifies exactly how to use them with
 ---
+## 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.
+```bash
+/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
+```bash
+/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
+```bash
+/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
+```bash
+/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
@@ -100,7 +274,7 @@ We compared Picasso against every publicly available AI design skill as of April
 | **Reference domains** | **20** | 1 | 7 | 1 | 1-3 |
 | **Total lines of guidance** | **4,700+** | ~120 | ~2,500 | ~200 | 50-300 |
 | **Anti-pattern rules** | **50+** | ~10 | ~30 | ~5 | 0-5 |
-| **Steering commands** | **25+** | 0 | 20 | 0 | 0-3 |
+| **Steering commands** | **35+** | 0 | 20 | 0 | 0-3 |
 | **ARIA patterns documented** | **12 widgets** | 0 | 0 | 0 | 0 |
 | **React performance rules** | **45 (Vercel)** | 0 | 0 | 0 | 0 |
 | **Chart/data viz guidance** | **Full matrix** | None | None | None | None |
@@ -112,7 +286,9 @@ We compared Picasso against every publicly available AI design skill as of April
 | **UX psychology** | **6 laws + patterns** | None | None | None | None |
 | **Design system generation** | **9-section (Stitch)** | None | None | None | None |
 | **Sound/haptics** | **soundcn + web-haptics** | None | None | None | None |
-| **Scoring system** | **/20 tech + /40 UX** | None | /20 + /40 | None | None |
+| **Scoring system** | **0-100 quantified** | None | /20 + /40 | None | None |
+| **Design interview** | **4-section onboarding** | None | None | None | None |
+| **Creative commands** | **10 (/roast, /steal, /evolve...)** | None | None | None | None |
 | **Tool integrations** | **7 libraries** | 0 | 0 | 0 | 0 |
 | **Sources consolidated** | **15+ repos** | 1 | 1 | 1 | 0-1 |
@@ -269,11 +445,39 @@ Picasso ships as both a **skill** (knowledge base) and an **agent** (autonomous
 | `/harden` | Error handling and edge cases: text overflow, i18n (RTL, expansion), network errors, empty/loading/error states, browser compat |
 | `/onboard` | Design onboarding: signup friction reduction, first-run experience, progressive feature discovery, setup checklists |
+### Creative
+| Command | What It Does |
+|---|---|
+| `/picasso` | Run the design interview -- deep discovery conversation, generates `.picasso.md` config |
+| `/roast` | Brutally honest critique with designer-Twitter energy. Every roast includes the fix. Rated 🔥-🔥🔥🔥🔥🔥. |
+| `/score` | Quantified 0-100 design score with category breakdown (typography, color, spacing, a11y, motion, responsive, perf, anti-slop) |
+| `/steal <url>` | Extract design DNA from any live website into a `.picasso.md` config |
+| `/mood <word>` | Generate complete design system from a single evocative word (cyberpunk, cottage, luxury, etc.) |
+| `/evolve` | Multi-round iterative refinement: 3 directions → pick → refine → ship |
+| `/compete <url>` | Head-to-head design comparison against a competitor with per-category scoring |
+| `/before-after` | Visual side-by-side comparison report after changes (HTML export) |
+| `/mood-board` | Generate interactive HTML mood board from adjectives |
+| `/design-system-sync` | Detect and auto-fix drift between DESIGN.md and actual code |
+| `/preset <name>` | Apply a curated preset (linear, stripe, vercel, notion, brutalist, etc.) |
 ### Advanced
 | Command | What It Does |
 |---|---|
-| `/overdrive` | Technically extraordinary effects. Proposes 2-3 directions before building. Toolkit: View Transitions API, scroll-driven animations, WebGL/Three.js, @property gradient animation, Web Audio, spring physics. Targets 60fps. Progressive enhancement required. |
+| `/overdrive` | Technically extraordinary effects. View Transitions, scroll-driven animations, WebGL, @property gradients, Web Audio, spring physics. 60fps. Progressive enhancement. |
+### Automation (Agent-Only)
+| Command | What It Does |
+|---|---|
+| `/a11y` | Full accessibility audit: axe-core + pa11y + Lighthouse with JSON parsing |
+| `/perf` | Lighthouse performance audit with Core Web Vitals pass/fail thresholds |
+| `/visual-diff` | Screenshot desktop + mobile in light/dark mode, analyze visually |
+| `/consistency` | Multi-page consistency check across all routes |
+| `/lint-design` | Find hardcoded colors, spacing violations, font inconsistencies, z-index chaos |
+| `/install-hooks` | Generate git pre-commit hook for automated design checks |
+| `/ci-setup` | Generate GitHub Actions workflow for PR design review with scores |
 ---

package/agents/picasso.md CHANGED Viewed

@@ -417,6 +417,190 @@ When the user invokes these commands, execute the corresponding workflow:
 | `/lint-design` | Design token linting: find hardcoded colors, inconsistent spacing, non-standard fonts, z-index chaos, transition:all |
 | `/install-hooks` | Generate a git pre-commit hook that runs fast grep-based design checks (no server needed) |
 | `/ci-setup` | Generate a GitHub Actions workflow for PR design review: a11y, perf, screenshots, PR comment |
+| `/roast` | Brutally honest design critique with sharp, specific, funny feedback |
+| `/before-after` | Visual side-by-side comparison after changes with HTML report |
+| `/steal <url>` | Extract design DNA from any live website into .picasso.md |
+| `/mood <word>` | Generate complete design system from a single evocative word |
+| `/score` | Quantified 0-100 design quality score with category breakdown |
+| `/compete <url>` | Head-to-head design comparison against a competitor site |
+| `/evolve` | Multi-round iterative design refinement with screenshots |
+| `/mood-board` | Generate visual inspiration HTML from adjectives |
+| `/design-system-sync` | Detect and fix drift between DESIGN.md and code |
+| `/preset <name>` | Apply a curated community design preset |
+## Creative Commands
+### /roast -- Brutally Honest Design Critique
+The anti-polite review. Write feedback in sharp, designer-Twitter energy. Be specific, be funny, be cutting -- but always constructive. Every roast must end with "Here's how to fix it:" followed by actionable steps.
+Example tone: "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? My brother in Christ, it's 2026."
+Rules:
+- Never be mean about the developer, only the design
+- Every criticism must be specific (file:line or element)
+- Every roast point must include the fix
+- End with a genuine compliment about what IS working
+- Output a "Roast Score" from 🔥 (barely warm) to 🔥🔥🔥🔥🔥 (absolute inferno)
+### /before-after -- Visual Diff Report
+After any /polish or /redesign, auto-generate a comparison:
+1. Take "before" screenshots (desktop + mobile) BEFORE making changes
+2. Make the changes
+3. Take "after" screenshots
+4. Generate an HTML report at `/tmp/picasso-before-after.html` showing side-by-side comparisons with annotations
+5. List every change made with file:line references
+```bash
+# Before screenshots
+npx playwright screenshot http://localhost:3000 /tmp/picasso-before-desktop.png --viewport-size=1440,900
+npx playwright screenshot http://localhost:3000 /tmp/picasso-before-mobile.png --viewport-size=375,812
+# ... make changes ...
+# After screenshots
+npx playwright screenshot http://localhost:3000 /tmp/picasso-after-desktop.png --viewport-size=1440,900
+npx playwright screenshot http://localhost:3000 /tmp/picasso-after-mobile.png --viewport-size=375,812
+```
+### /steal <url> -- Design DNA Extraction
+Point at any live website and extract its design DNA:
+1. Screenshot the URL at multiple viewports
+2. Analyze the screenshot visually for: fonts, color palette, spacing rhythm, border-radius, animation style, layout structure
+3. Use bash to fetch the page and extract CSS:
+```bash
+curl -s "<url>" | grep -oP 'font-family:[^;]+' | sort -u | head -10
+curl -s "<url>" | grep -oP '#[0-9a-fA-F]{3,8}' | sort | uniq -c | sort -rn | head -15
+curl -s "<url>" | grep -oP 'border-radius:[^;]+' | sort -u
+```
+4. Generate a `.picasso.md` config that matches the extracted aesthetic
+5. Optionally generate a DESIGN.md based on the extraction
+### /mood <word> -- Instant Aesthetic from a Single Word
+Generate a complete design system from an evocative word or phrase:
+1. Parse the mood word(s): "cyberpunk", "cottage", "brutalist-banking", "warm-saas", "dark-editorial"
+2. Map to design tokens:
+   - Color palette (5-7 OKLCH values)
+   - Font pairing (display + body + mono)
+   - Border radius scale
+   - Shadow style
+   - Motion intensity
+   - Spacing density
+3. Generate a complete `.picasso.md` config
+4. Generate a `DESIGN.md` with the full token set
+5. Show a preview summary: "Mood: cyberpunk -> Neon green on near-black, JetBrains Mono headers, sharp 2px radius, high motion, dense layout"
+Include a mood mapping table:
+| Mood | Palette Direction | Typography | Radius | Motion |
+|---|---|---|---|---|
+| cyberpunk | neon on dark, high contrast | monospace display + geometric body | sharp (0-2px) | high, glitch effects |
+| cottage | warm earth tones, muted | serif display + rounded body | soft (12-16px) | gentle, slow fades |
+| brutalist | black/white + one accent | mono or slab | none (0px) | minimal, abrupt |
+| luxury | deep neutrals + gold/cream | thin serif display + elegant sans | subtle (4-8px) | smooth, slow |
+| editorial | high contrast, limited palette | strong serif + clean sans | minimal (2-4px) | moderate, text-focused |
+| playful | bright, saturated, varied | rounded sans + handwritten accent | large (16-24px) | bouncy, energetic |
+| corporate | conservative blue/gray | clean sans + readable body | standard (8px) | subtle, professional |
+| dark-tech | dark surfaces + accent glow | geometric sans + monospace | sharp (2-4px) | fast, precise |
+| warm-saas | warm neutrals + friendly accent | humanist sans | medium (8-12px) | moderate, smooth |
+| minimal | near-black + white + one accent | one font family, varied weights | subtle (4px) | very subtle |
+### /score -- Quantified Design Quality Score
+Run a comprehensive scoring algorithm:
+1. **Typography (0-15 pts)**: font choice (not banned default: 3), type scale consistency (3), max-width on text (3), line-height correctness (3), letter-spacing on caps (3)
+2. **Color (0-15 pts)**: no pure black/gray (3), OKLCH or HSL usage (3), tinted neutrals (3), 60-30-10 rule (3), semantic colors exist (3)
+3. **Spacing (0-10 pts)**: consistent scale (5), Gestalt grouping (5)
+4. **Accessibility (0-20 pts)**: axe-core violations (10), focus-visible (3), semantic HTML (3), alt text (2), reduced-motion (2)
+5. **Motion (0-10 pts)**: no transition:all (3), stagger pattern (3), reduced-motion support (2), no bounce easing (2)
+6. **Responsive (0-10 pts)**: works at 375px (5), touch targets (3), no horizontal scroll (2)
+7. **Performance (0-10 pts)**: Lighthouse perf score mapped (0-100 -> 0-10)
+8. **Anti-Slop (0-10 pts)**: deductions for each AI-slop fingerprint detected (-2 each, minimum 0)
+Total: 0-100. Output as:
+```
+## 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 issues to fix for +15 points:
+1. Add prefers-reduced-motion support (+4)
+2. Replace #000 with tinted near-black (+3)
+3. ...
+```
+### /compete <url> -- Competitive Design Analysis
+Compare the current project against a competitor:
+1. Screenshot both sites (desktop + mobile)
+2. Extract design DNA from both
+3. Compare head-to-head across categories:
+   - Typography quality
+   - Color cohesion
+   - Spacing consistency
+   - Motion sophistication
+   - Mobile experience
+   - Performance (Lighthouse)
+   - Accessibility (axe)
+4. Output a comparison table with winner per category
+5. Generate specific recommendations: "Their typography is stronger because they use a modular type scale. Yours uses 7 different font sizes with no clear ratio."
+### /evolve -- Iterative Design Refinement Loop
+Multi-round design refinement:
+1. **Round 1: Directions** -- Generate 3 distinct aesthetic directions for the page/component. Describe each in 2-3 sentences with the key differentiator. Ask user to pick one (or combine elements).
+2. **Round 2: Refinement** -- Implement the chosen direction. Screenshot it. Ask "What do you love? What's not right?"
+3. **Round 3: Polish** -- Apply feedback. Screenshot again. Ask "Are we there? Or one more round?"
+4. **Round 4+: Iterate** -- Continue until user says "ship it"
+Rules:
+- Never generate just one option in Round 1
+- Each direction must be genuinely different (not three variations of the same thing)
+- Always screenshot between rounds so the user can SEE the change
+- Max 5 rounds before suggesting we ship (diminishing returns)
+### /mood-board -- Generate Visual Inspiration
+When the user isn't sure what they want, generate a mood board:
+1. Ask for 3-5 adjectives or reference points
+2. Search the style-presets.md for matching presets
+3. Generate a single HTML file at `/tmp/picasso-moodboard.html` that shows:
+   - Color swatches with OKLCH values
+   - Font samples at different sizes
+   - Example component (a card, a button, a hero) in that style
+   - Spacing rhythm visualization
+4. Open in browser for the user to react to
+### /design-system-sync -- Auto-sync Code to DESIGN.md
+Detect drift between DESIGN.md and actual code:
+1. Parse DESIGN.md tokens (colors, fonts, spacing, radius)
+2. Extract actual values used in code (via grep)
+3. Compare and produce a drift report:
+   - "DESIGN.md says accent is oklch(0.55 0.25 250) but code uses #3b82f6 in 7 places"
+   - "DESIGN.md says body font is 'Outfit' but globals.css declares 'Inter'"
+4. Offer to auto-fix all drift with a single confirmation
+### /preset <name> -- Apply Community Preset
+Apply a curated design preset by name:
+1. Load from style-presets.md or a presets directory
+2. Generate `.picasso.md` + `DESIGN.md` from the preset
+3. Apply to the codebase:
+   - Update CSS variables / Tailwind config
+   - Update font imports
+   - Adjust component styling
+4. Available presets: linear, stripe, vercel, notion, raycast, editorial, luxury, brutalist, dark-tech, warm-saas, cyberpunk, cottage, etc.
 ## Advanced Automation Commands

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "picasso-skill",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "The ultimate AI design skill for producing distinctive, production-grade frontend interfaces",
   "bin": {
     "picasso-skill": "./bin/install.mjs"