Article

Content

manojwt7@gmail.com Uncategorized

Content

Good Morning Everyone, This is Manoj from CRO Team, 

Let me share my screen, the tool is not developed yet so I come up with a flowchart to follow better.

I would like to present an idea for an AI-powered UX Design Assistant that helps designers create Figma designs faster. The idea is given Ryan during our 1 on 1 meeting. So thank you Ryan.

For the tool
I planned to create configuration kind of page where the user needs to enter the design preferences such as:

  • Project name
  • Website type
  • Theme
  • Color palette
  • Brand guidelines
  • Design style
  • Target audience

These settings become the foundation for all future design generation within that project.


Step 1: Project Setup

“The designer creates a new project and configures the design settings.

For example, they can define the theme as modern, choose brand colors, and specify the target audience etc..

This configuration is saved and can be updated at any time.

 

Step 2: Generate Individual Sections

“Instead of generating an entire website at once, the designer can request specific sections.

For example:

  • Hero Banner
  • Features Section
  • Testimonial Section
  • Pricing Section
  • Contact Form

 

Step 3: AI Analysis

“Once a request is submitted, 

Claude reviews:

  • Project configuration
  • Brand guidelines
  • Design preferences
  • Requested section

Claude then decides the most appropriate layout, structure, and user experience for that section.

 

Step 4: MCP Connectors

“Claude then uses MCP connectors to access external systems.

Figma MCP allows Claude to create and update designs directly in Figma.

Design System MCP allows Claude to use approved components, colors, and typography.

Knowledge Base MCP allows Claude to follow internal design standards and best practices.

This ensures generated designs remain aligned with the input standards.

 

Step 5: Design Generation

“After gathering all required information, Claude creates a design plan and sends instructions to Figma.

The generated section is automatically added to the project’s Figma file.

 

Review and Refinement Process

A designer may not always be satisfied with the first version.

Instead of starting over, the designer can provide refinement instructions.

For example:

  • Add another testimonial card
  • Remove ratings
  • Change the layout
  • Increase spacing
  • Use a carousel instead of a grid

Claude will analyze the existing design and update only the requested elements.

The designer can continue refining until the desired result is achieved.”

 

Version Management

“We can also maintain version history.

Each design update can be saved as a new version.

This allows designers to compare changes and revert to previous versions if necessary.

This provides confidence and flexibility during the design process.”



“A common question might be why we need a platform if designers can already use Claude.

The difference is that Claude alone is a generic AI tool.

Our tools adds structure, consistency, and company-specific knowledge.

Back to Blog