skills.rest
xpert-ai
xpert-aiOFFICIAL
Explore all skills by this author →
Website𝕏@xpertai_cloudGitHub

ideate

Generate three distinct on-brand UI design variants from confirmed briefs.

8|12|Updated Sep 19, 2025
Search Tags:#figma#product-design#image-generation#visual-exploration#design-brief#ui-mockups#design-variants
One-click install
npx skills add https://github.com/xpert-ai/xpert-plugins --skill ideate-xpert-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ideate
Source: https://github.com/xpert-ai/xpert-plugins/tree/main/community/roles/product-design/skills/ideate
Command: npx skills add https://github.com/xpert-ai/xpert-plugins --skill ideate-xpert-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Product designers often need to explore multiple distinct visual directions for a product after finalizing a design brief, but manually creating consistent, on-brand high-fidelity UI variants is time-consuming and prone to inconsistency.

Core Features & Use Cases

  • Aligned Design Variants: Generates 3 distinct, production-quality UI options that strictly adhere to the confirmed design brief and hard constraints.
  • Context-Aware Generation: Integrates existing design assets including Figma files, screenshots, design tokens, brand assets, and component references to keep variants on-brand and relevant.
  • Multi-Surface Support: Creates dimension-accurate mockups for mobile apps, tablets, desktop dashboards, landing pages, and individual UI components.
  • Use Case: After confirming a brief for a new e-commerce checkout flow, use this skill to generate 3 distinct layout and hierarchy options to share with stakeholders for feedback.

Quick Start

Use the ideate skill to generate 3 visual design variants for the new user profile screen we just confirmed the design brief for.

Frequently Asked Questions about ideate

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

FAQPage Schema
How do I generate multiple UI mockups from a single design brief?▼

Generating multiple UI mockups from a design brief involves creating three distinct, production-quality visual design variants that strictly adhere to your confirmed project constraints and layout requirements.

What is visual exploration for product design?▼

Visual exploration for product design is the process of generating distinct, on-brand UI alternatives to explore layout, hierarchy, interaction, and visual system options for mobile apps, desktop dashboards, and landing pages after a brief is confirmed.

Can I use Figma files and design tokens to generate design variants?▼

Yes, you can use Figma files, design tokens, screenshots, and brand assets as provided context to generate design variants that remain on-brand and dimension-accurate for your specific UI components.

Does ideate support generating mockups for both mobile apps and desktop dashboards?▼

Yes, it supports multi-surface mockup generation, creating dimension-accurate UI designs for mobile apps, tablets, desktop dashboards, landing pages, and individual UI components based on your design brief.

What's the best way to explore layout and hierarchy options for a new checkout flow?▼

The best way to explore layout and hierarchy options for a checkout flow is to generate three distinct visual design variants from your confirmed brief to share with stakeholders for structured feedback.

Related Skills

Explore More Design & Creative Skills→
jgtolentinojgtolentino
2

design-system-cli

Extract design tokens, assets, and component structures from websites.

Community
Advanced
zivtechzivtech

graphic-design-critic

Audit graphic assets for brand consistency and production readiness.

Official
Advanced
zm2231zm2231

prototype-review

Review prototypes, wireframes, and mockups for usability, accessibility, and design consistency.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced