skills.rest
LGugui
LGuguiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

picasso

Redesign UI/UX with dark premium visuals, DICE card patterns, and motion animations via Figma Claude Bridge.

Updated Jun 5, 2026
Search Tags:#design system#figma#animation#redesign#visual overhaul
One-click install
npx skills add https://github.com/LGugui/cerebro-template --skill picasso-lgugui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: picasso
Source: https://github.com/LGugui/cerebro-template/tree/main/.claude/skills/picasso
Command: npx skills add https://github.com/LGugui/cerebro-template --skill picasso-lgugui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires anime.js, figma-cli, and includes scripts (resource) and assets (resource) components.

What problem does it solve?

The Picasso skill addresses the need for a comprehensive design system, offering a streamlined process for redesigns and visual enhancements with advanced tools and patterns.

Core Features & Use Cases

  • Comprehensive Design System: Combines premium visual elements, card design patterns, motion animations, and Figma integration for high-impact redesigns.
  • Visual Dark Premium: Incorporates a sophisticated 7-domain typographic system, dark gradient energy, and consistent spacing for a premium look.
  • Card Design Patterns: Utilizes DICE poster-forward patterns to create impactful card designs that prioritize visual dominance of images with overlaid text.
  • Anime.js Motion: Leverages motion patterns to add interactivity and engagement to designs.
  • Figma Claude Bridge: Facilitates real-time design execution with Figma integration.

Quick Start

Activate Picasso by using the command: "apply picasso" to initiate a visual overhaul of your project in Figma.

Frequently Asked Questions about picasso

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

FAQPage Schema
How do I redesign my UI for a dark premium aesthetic in Figma?▼

You can execute visual overhauls directly in Figma using the Figma Claude Bridge integration, which facilitates real-time design execution and applies premium aesthetics to your interfaces.

Does the Figma Claude Bridge support real-time UI redesign execution?▼

Yes, the Figma Claude Bridge supports real-time design execution by connecting your Figma environment to the visual overhaul system, allowing you to apply premium aesthetics and card patterns directly to your canvas.

How do I apply DICE card patterns to prioritize images in UI design?▼

Applying DICE card patterns to prioritize images involves utilizing poster-forward design structures that create impactful card layouts with visual dominance of images overlaid with text, ensuring high-impact redesigns.

Do I need anime.js to add motion animations to Figma redesigns?▼

Yes, anime.js is required to add motion animations to your redesigns, as the skill leverages this dependency to integrate motion patterns that increase interactivity and engagement for your design components.

Can I use this visual overhaul system for product design workflows requiring dark mode interfaces?▼

Yes, this visual overhaul system is specifically ideal for product design workflows requiring premium aesthetics and interactivity, particularly when designing dark mode interfaces with sophisticated typography and gradients.

Related Skills

Explore More Design & Creative Skills→
GrizzwaldHouseGrizzwaldHouse
6

Notion & Figma Integration

Synchronize design components, tokens, and project pages between Notion and Figma.

Community
Intermediate
christofferbergjchristofferbergj
5

implement-design

Translate Figma designs into UI code using the Figma MCP workflow.

Community
Advanced
NaimalArain13NaimalArain13
2

figma-animations-prototypes

Prototype interactive UI animations with Figma Smart Animate transitions.

Community
Intermediate
bughqbughq
2

stacks-design-soft

Engineer premium UI components with Crosswind utilities and custom CSS in Stacks.

Official
Advanced