Skill UI

Wraps any existing HTML artifact (landing page, dashboard, etc.) with a live sidebar panel of controls. This panel allows users to instantly adjust design variables—such as accent color, typography scale, layout density, and dark mode—by rewriting CSS custom properties in real time. All changes are persisted via localStorage, enabling continuous exploration and variant testing without losing state.

A comprehensive guide for creating a robust design system based on perspective techniques. It details foundational tokens (color, typography, spacing), component rules (states, variants), and accessibility criteria (WCAG 2.2 AA). Use this skill to ensure scalable, realistic, and highly usable UI components with structured implementation.

This guide teaches you how to function as an expert design-system guideline author for the 'Vibrant' brand. It provides comprehensive, implementation-ready documentation covering foundational tokens (color, typography, spacing), detailed component rules (states, variants, interactions), and adherence to WCAG 2.2 AA accessibility standards. The output is structured, actionable, and includes quality assurance checklists for both designers and engineers.

A sophisticated automated loop that uses vision or video models to evaluate subjective aesthetic quality (e.g., timing, color grade, layout). Instead of relying on numeric metrics, the system renders multiple parameterized variants into one artifact, asks the AI to rate them, and suggests optimal values, repeating the process until convergence. Ideal for design iteration where human judgment is the primary success criteria.

This skill performs a comprehensive audit of Figma component libraries. It checks for naming inconsistencies, component coverage gaps, variant completeness, and overall design system health. The output provides a structured report with prioritized issues, actionable naming conventions, and a step-by-step fix plan, ensuring design consistency across products.

This skill provides a comprehensive blueprint for designing digital products within Figma. It systematically maps out entire user journeys, including happy paths, loading states, error conditions, empty states, and edge cases. By defining the complete flow and suggested file structure beforehand, it prevents scope creep and ensures designers account for every necessary screen variant before starting the actual design work.

This skill systematically defines all necessary variants, states, and properties for a Figma component before development. It ensures comprehensive coverage of all states (e.g., Hover, Disabled, Loading) and properties (e.g., Size, Type), generating a robust variant matrix that prevents critical design gaps and streamlines the entire component building process in Figma.

Provides domain knowledge for compiling character/scene/prop creative settings into executable image generation prompts. Covers reference board layouts (character identity boards, sequence keyframes, environment study boards, prop study boards), composition and camera language, avoiding image moderation false positives, entity continuity, and cross-variant derivative design based on the main image. Not for video prompt compilation, pure material editing, or evaluating generated outputs.

Builds a brand asset register for logos, photography, icons and marks, capturing formats, variants, dimensions, rights, licences, and approved uses for brand control.

Build multiple genuinely distinct UI variants behind a development-only visual picker, then integrate the selected direction into production.