DEV Community

Cover image for How To Create UI Design With AI
Tomer Raitz
Tomer Raitz

Posted on

How To Create UI Design With AI

#ai #claude #ui #frontend

Originally posted at Vibki - link to post

If you've ever dreamed of a way to create a UI designer that builds your app screens before you even start developing, this is the blog post for you. In this post, you will see how to implement a designer using Claude Code and Pencil.

Why do we need it?

Great question! We could just tell Claude what our app is about and then have it modify the UI as we tweak the code. However, there are several reasons why that isn't a good idea:

  • Time: The most obvious reason is wasted time. The UI design process can be lengthy. If you have to refactor the code after every single screen creation, it takes much longer than just designing the UI first and developing it afterward.
  • Separation of Concerns: As we've mentioned on the blog many times, we need to keep the context window as small as possible. It's important to split processes into smaller tasks. This is why handling UI design in a separate context before developing it is a great approach.
  • Expert Domains: It's considered a best practice to create agents with specific expertise to handle single types of tasks. For example, a designer agent handles the UI design, while a frontend developer agent deals with component creation.

So, how do we do this magic?

💡 Note: The following workflow is specific to Claude Code, but you can modify it to use with your favourite AI tool.

Step 1: Installation

  1. Go to https://www.pencil.dev/downloads
  2. Download the Pencil Desktop app or Extension.

In Claude Code, the MCP installation happens automatically. However, if it doesn't work for you, add this to your MCP configuration:

    "pencil": {
      "command": "/path/to-your-pencil-desktop/mcp-server-windows-x64.exe",
      "transport": "stdio",
      "args": [
        "--app",
        "desktop"
      ],
      "env": {}
      }
Enter fullscreen mode Exit fullscreen mode
  1. Open pencil App
  2. Create a new .pen file and save it in your project folder.

Step 2: Install the Frontend-Design Claude Code Plugin

  1. Open Claude Code.
  2. Run the /plugin command.
  3. Search for frontend-design and install it.

Step 3: Create Your New Design

  1. Before your main prompt, write something like: "I want to use frontend-design."
  2. Ask it to generate your design. For example: "Create an app design for a todo app."
  3. Review the output and fix it if needed.

Read more about AI Engineering at Vibki.

Top comments (0)