picasso

Generate production-ready frontend interfaces from vague design requests.

26|3|Updated Apr 1, 2026
One-click install
npx skills add https://github.com/viperrcrypto/picasso --skill picasso
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: picasso
Source: https://github.com/viperrcrypto/picasso/tree/main
Command: npx skills add https://github.com/viperrcrypto/picasso --skill picasso

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Picasso provides an end-to-end design execution workflow for AI-enabled frontend tasks: it translates vague design intent into concrete, production-ready UI tokens and code by coupling discovery, anti-slop enforcement, and deterministic execution.

Core Features & Use Cases

  • Auto-discovery with a gallery of visual directions when no direction exists (.picasso.md)
  • Anti-Slop Gate: enforce explicit design commitments before coding
  • Design thinking, token-based design system generation, and post-execution validation
  • Slash commands and agent-driven workflows to roast, score, evolve, steal, mood, etc.
  • Generates DESIGN.md and tokens for design systems and theming
  • Integrates with Figma MCP for token extraction and live validation

Quick Start

Describe your project and run Picasso to start the discovery-and-execution workflow.

Frequently Asked Questions about picasso

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn vague design ideas into production-ready frontend UI?

To turn vague design ideas into production-ready frontend UI, you can use an autonomous workflow that combines visual discovery with deterministic execution. It guides you from initial direction through design-thinking and token generation to final code delivery.

Can I extract design tokens from Figma for frontend development?

Yes, you can extract design tokens from Figma for frontend development. The workflow integrates with Figma MCP for token extraction and live validation, ensuring your generated UI matches your existing design system components.

What is an anti-slop gate in AI frontend design generation?

An anti-slop gate in AI frontend design generation is a validation checkpoint that enforces explicit design commitments before coding begins. It prevents unstructured or generic outputs by requiring deterministic execution based on a 33-domain reference framework.

Does this workflow support building web dashboards and marketing pages?

Yes, this workflow supports building web dashboards and marketing pages. It is applicable to web apps, dashboards, marketing pages, and UI components, providing end-to-end design execution from visual discovery to token-based code delivery.

How do I start the design discovery process when I have no specific UI direction?

To start the design discovery process without a specific UI direction, the workflow provides auto-discovery with a gallery of visual directions. You simply describe your project and run the workflow to generate a .picasso.md configuration.