We Asked AI to Design 4 Screens and What Happened Next... 👀

EDITOR’S NOTE

Dear Future-Proof Humans,

What if your AI assistant could...

1️⃣ Design a login screen for your app while you finish your coffee

2️⃣ Create an entire onboarding screen based on just a text description

3️⃣ Apply trendy design styles to your UI without spending hours on inspiration boards

After connecting Claude to Gmail, WhatsApp, and Reddit, I've been exploring something even more visual: Figma design automation.

I connected Cursor (an AI-powered code editor) to Figma and watched as it:

✔️ Created a clean login screen in seconds
✔️ Built an onboarding screen for an instant loan application
✔️ Designed a mobile interface using brutalism principles—with proper spacing, hierarchy, and visual consistency

In this edition of Nanobits, we look at:

⚡️ How to set up the Figma MCP connection
🔗 Commands that turn text descriptions into working designs
⚠️ Practical ways to automate repetitive design tasks

Let's see how AI can transform your design workflow!

ARE YOU NEW TO MODEL CONTEXT PROTOCOL?

Think of MCP as a universal translator—it lets AI like Claude actually interact with your apps and data (no more copy-paste purgatory).

Catch up fast: Here’s an MCP explainer breaking down how it works, why it matters, and where it’s headed.

These are the past experiments we have conducted with various MCP servers:

• How I Made Claude Edit Files, Write Cover Letters, and Fetch Live IPL Updates

• I turned Claude Desktop App into WhatsApp Manager, Reddit Content Curator & Smart Study Planner

• I created an AI assistant to manage your Gmail inbox by finding important messages, summarizing newsletters, and spotting trends without you reading a single email

You can reach out to us if you get stuck.

MCP IN ACTION: WHAT MORE CAN YOU DO WITH FIGMA?

I connected Cursor to Figma and tested what it could do:

✔️ Created a complete login screen from a text description in seconds

✔️ Built an onboarding screen for an instant loan application with proper visual hierarchy

✔️ Designed a mobile interface using brutalism principles with proper spacing and consistency

...and much more.

No technical barriers. No programming needed. Just AI that turns your design ideas into visual reality.

We will work with Cursor Desktop as our MCP host for this newsletter.

Things you need before getting started:

1. Cursor Desktop (AI-powered code editor)

2. Bun (JavaScript runtime & toolkit)

3. Config file: cursor MCP configuration JSON

4. Text Editor (for editing configuration files)

5. System Terminal

6. Figma account with developer access

7. [Optional] Familiarity with basic Figma concepts

If these things feel alien to you, you can reply to this email with your queries. We are also available on LinkedIn.

Tasks with Figma MCP Server

Installing the Figma MCP Server and Setting up your Connection

Let's get your AI-powered design workflow up and running. Here's how to install and configure the Figma MCP server with Cursor.

Step 1: Install Bun

First, you'll need to install Bun, which is a JavaScript runtime and toolkit:

curl -fsSL https://bun.sh/install | bash

Step 2: Run Setup

This command will install MCP in your Cursor's active project:

bun setup

Step 3: Start the WebSocket Server

The WebSocket server helps the MCP server communicate with Figma:

bun socket

Step 4: Launch the MCP Server

Now start the Figma MCP server:

bunx cursor-talk-to-figma-mcp

Step 5: Install the Figma Plugin

1. In Figma, go to Plugins > Development

2. Choose "Import plugin from manifest…"

3. Select the src/cursor_mcp_plugin/manifest.json file

4. The plugin should now be available in your Figma development plugins

Configure in Cursor Desktop

After setting up the server, you need to tell Cursor how to connect to it:

1. Open Cursor Desktop

2. Go to settings and Cursor settings

3. Go to the MCP tab and click on “Add a new global MCP server“

4. Edit the config file by adding this JSON snippet:

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

4. Save the config file and restart Cursor Desktop

5. In a new chat, verify the connection by asking Cursor if it's connected to Figma

talk to figma channel <insert channel name>

How to find the channel name?

Once the Cursor-Figma MCP plugin is installed, click on it to see the following window pop-up:

Now you're ready to start creating designs using just text prompts! Let's see some examples of what you can do.

Task 1: Create a Simple Login Screen

After setting up the Figma MCP connection, I wanted to start with something straightforward—a basic login screen. This is a great first test since it involves common UI elements that appear in almost every app.

How It Works

Using Cursor's AI capabilities with the Figma MCP connection allows:

1. Describing a login screen in natural language

2. Having the AI generate the design directly in Figma

3. Receiving a complete, properly structured UI without manual design work

Example Prompt

Create a clean, modern login screen with email and password fields, a "Forgot Password?" link, a login button, and an option to sign up if the user doesn't have an account.

What Cursor Returns

The AI created a complete login screen with:

• Properly structured input fields for email and password

• A prominently displayed login button

• Appropriate spacing and alignment

• "Forgot Password?" text positioned correctly

• A sign-up option at the bottom

• Modern color scheme and typography

The impressive part was that all elements were properly organized in Figma with the correct component hierarchy, naming conventions, and styling properties. This wasn't just a flat image - it was a functional Figma design that could be edited and modified.

Task 2: Create an Onboarding Flow for an Instant Loan App

I wanted to try something more complex for my second test - a multi-step onboarding flow for a financial app.

How It Works

The AI can:

1. Understand the context of the loan application process

2. Create logical screen sequences

3. Design an appropriate UI for collecting financial information

4. Maintain brand consistency across multiple screens

Example Prompt

Design an onboarding flow for an instant loan app with 3 screens: welcome screen explaining the loan process, personal information collection screen, and income verification screen. Use a blue and white color scheme.

What Cursor Returns

The AI successfully created a coherent 3-screen flow:

• A welcome screen with a loan process explanation and clear next steps

• A form for personal details with appropriate input validation hints

• An income verification screen with upload capabilities

• Consistent navigation elements and progress indicators

• All using the specified color scheme

Each screen maintained proper visual hierarchy, with clear primary and secondary actions. The flow made logical sense for the loan application process, and all screens felt like part of the same product.

Task 3: Create a Brutalist Mobile Login Screen

I wanted to push the style boundaries for my third test and see if the AI could handle specific design trends.

How It Works

This test demonstrates how the AI can:

1. Apply specific design styles and trends

2. Adapt standard UI patterns to different aesthetic approaches

3. Balance usability with stylistic choices

Example Prompt

Create a login screen for a mobile app using brutalist design principles. Include email/password fields, a login button, and social login options. Use high contrast, raw elements, and bold typography.

What Cursor Returns

The AI delivered a striking, brutalist login screen with:

• Raw, unstyled form elements with visible boundaries

• High-contrast color combinations

• Deliberately asymmetrical layout

• Bold, oversized typography

• Monospaced fonts for technical appeal

• Minimal decoration while maintaining functionality

While maintaining all necessary functional elements of a login screen, the design successfully captured the brutalist aesthetic, proving that AI can go beyond standard corporate design styles.

Task 4: Create an E-commerce Landing Page Inspired by Amazon

For my final test, I wanted to see if the AI could create a complex page based on an existing reference.

How It Works

This test shows how the AI can:

1. Analyze and interpret existing design patterns

2. Create complex layouts with multiple sections

3. Handle product displays and promotional elements

Example Prompt

Design an e-commerce landing page inspired by Amazon's layout. Include a header with search, categories section, featured product carousel, deal of the day section, and product recommendations. Make it look professional.

What Cursor Returns

The AI created a comprehensive e-commerce landing page with:

• A functional navigation bar with search functionality

• Category navigation with appropriate icons

• A featured product carousel with proper spacing and controls

• Deal of the day section with pricing and timer elements

• Product grid with consistent card designs

• Footer with all typical e-commerce page elements

While inspired by Amazon's structure, the design used a different structure and styling to avoid being a direct copy. All elements were organized correctly in the Figma hierarchy, making modifying or expanding the design easy.

End Note

That’s all for this week!

From Gmail to WhatsApp to Reddit, we've explored how AI can transform your digital workflows. Now we're adding Figma to your toolkit—turning text descriptions into polished designs without touching a single design tool.

Next week, we'll explore more practical setups you can build in minutes. Until then, try connecting Cursor to Figma and see what happens when AI can create, style, and organize design elements for you.

Three Figma + Cursor experiments to try this weekend:

1. Ask Cursor to "Create a sign-up form with social login options and a modern gradient background" and watch it build a complete component hierarchy in seconds

2. Challenge Cursor to recreate your existing app's login screen in three different design styles (minimal, brutalist, and neumorphic) to see which one feels freshest

3. Have Cursor design a complete user flow for a feature you've been thinking about, and watch as it creates connected screens with proper component relationships

Start small with one connection. If you get stuck, just reply to this email—I'll walk you through it.

Which design tasks would you automate first? Let me know what visual challenges you'd like AI to solve for you.