What is Forge

Forge is UXPin’s AI system for generating, editing, and reviewing UI inside the design environment. It converts natural language into structured interface components based on your project setup.

With Forge, you describe what you want to build or change. Instead of manually creating layouts element by element, you define the intent, and Forge generates UI using your selected library.

Forge works with your project’s connected component library, including built-in React libraries such as MUI, Ant Design, and shadcn/ui, custom React component libraries integrated with UXPin Merge, and UXPin Classic components. 

Forge powers AI features across UXPin:

• In the Editor, it provides a conversational interface for iterative creation and refinement.
• In Project view, it powers AI Component Creator for generating new prototypes from a single prompt or image.

You can use Forge to generate new UI, edit components, refine results with follow-up instructions, and review suggested changes before applying them.

Conversation history is saved for the project, so you can continue working in context.

Conversation history is saved for the project, so you can continue working in context.

Forge Interface

To open Forge in the Editor click the AI in the Bottom bar, or use the Alt "3" shortcut.

The panel can be detached and repositioned like other panels.

Your interactionwith Forge is shown as chat bubbles. Each response may include a short explanation of what was understood, a description of the planned change, generated UI or edits, and UX feedback.

At the bottom of the panel, you will find the text input field. This is where you describe what you want to create or change. You can write in natural language.

At the top of the input field, you will see context controls that determine how your request is handled.

Target pill
Shows which element on the canvas will be modified. It is set automatically based on your current selection. If nothing is selected, Forge may ask you to clarify the target.

Library pill
Shows which component library Forge will use. This is set automatically based on the library connected to your project.

At the bottom of the input field, you will find action buttons. 

Image upload
You can upload screenshots, wireframes, or mockups. The image is used as visual context when generating or editing UI.

Prompt Library
Provides grouped example prompts. You can use them as a starting point and adjust them to match your needs.

More menu (⋮)
Includes:

• Start new chat – Starts a new conversation and clears previous context.
• Settings – Open Forge settings.
• Docs – Open this documentation.
• Chat history – View your previous conversations for this project.

Chat history is saved per project and per user. Only you can see your conversations. Other team members who open the same prototype do not have access to your chat history.

Send button
Submits your prompt to Forge. 

If you stop AI before the process is complete, the current action will be canceled.

• When generating a new component, it will not be created or added to the canvas.
• When refining an existing component, the changes will not be applied.

If you want a simplified workspace focused on AI, you can enable AI Focus mode from the Top bar. This hides most of the Editor interface, keeping only the panels needed for AI-driven work.

Settings & Customization

To open Forge settings:

1. Open the AI panel.
2. Click the More menu (⋮).
3. Select Settings

AI Model selection

You can choose which AI model Forge uses for generation and refinement.

All supported models are visible in the selection list. However, access to specific models depends on your subscription plan. If you select a model not included in your plan and try to generate UI, you will see a message indicating that the model is unavailable.

Some models respond faster. Others handle more complex instructions and larger UI structures.

For details about model availability and credit costs, see AI Credits & Models.

AI Provider

By default, Forge uses UXPin’s integrated AI providers.

If you want to use your own provider account:

1. Open Settings in the AI panel.
2. Enable the Use own API key option.
3. Select the provider.
4. Enter your API key.

When connected, Forge uses your provider account for generation. Your provider handles usage and billing.

Design system guidelines

You can define rules that guide how UI is generated or edited by entering instructions in the Design System Guidelines field.

These guidelines are written as plain text. Forge interprets them as instructions when generating or refining UI.

You can describe:

• Preferred color usage.
• Typography rules.
• Spacing increments.
• Component structure patterns.
• Layout constraints.
  

If you reference specific tokens or styles, make sure they are clearly described in the guidelines.

For example:

Primary buttons should use #0055FF as the background color and white text.

Headings use Inter, 24px, semibold.

You can also insert example guidelines using the sample button next to the field. This adds a predefined set of instructions that you can edit.

Guidelines are saved automatically. Once added, they apply to future prompts in the same project and do not need to be repeated.

Usage and credits

Forge uses AI credits for generation, refinement, UX review, and iteration tasks.

The number of remaining credits is displayed:

• In the More menu (⋮) in the AI panel.
• At the bottom of the Settings modal.
• At the bottom of the AI Component Creator modal in Project view.
  

Credit usage depends on the size and complexity of the request and the model used.

For detailed information about how credits work, see AI Credits & Models.

Creating with Forge

You can use Forge to generate new UI directly in the Editor instead of building each element manually.

It is useful when you want to:

• Quickly create the first version of a component or section.
• Explore layout variations.
• Translate a written idea into a structured UI.
• Recreate a reference design from a screenshot.
• Build repetitive patterns without repeating manual steps.
  

Forge does not replace manual design work. Instead, it helps you create a structured starting point that you can refine.

You remain in control of the result. You can review changes, adjust them manually, or continue iterating with follow-up prompts.

Choosing a Library

Forge generates UI using the component library selected in the Editor.

Before creating or editing components, make sure the correct library is selected.

If the selected library matches the components on the canvas, Forge can modify those components directly.

If the selected library does not match the selected element, the Target pill does not appear and the selected component will not be modified. Instead, Forge may generate a new component using the currently selected library. In some cases, it may ask for clarification.

For example, if you select a component built with MUI but the library in Forge is set to shadcn/ui, Forge will not edit the MUI component. It will generate a new component using shadcn/ui instead.

From Text

Describe the component you want to create. Include:

• Structure.
• Purpose.
• Layout.
• Basic behavior if needed.
  

Instead of writing:

Create a form.

Write:

Create a login form with an email field, password field, 
and a primary button below.
Center the form on the page.

More specific prompts produce more predictable results.

You can also use the Prompt Library as a starting point and adjust it to match your needs.

If needed, you can also describe basic visual behavior that can be implemented with CSS.

For example:

• Add a smooth underline animation on hover for navigation links.
• Add a hover state that slightly scales the card to 1.02 and adds a soft shadow.
• Fade in the tooltip with a 200ms opacity transition.

Forge can generate visual states and simple animations defined through styles. It does not create advanced interaction logic or multi-step flows.

From Images

You can upload a screenshot, wireframe, or UI reference to generate a component based on its layout.

To use an external image:

1. Open the Forge AI panel.
2. Click the Image upload icon.
3. Select or paste an image.
4. Add a short description if needed.
5. Submit your prompt.
   
   

Forge analyzes the visual structure of the image, and then it recreates the structure using components from the selected library.

Forge does not generate pixel-perfect copies. It rebuilds the layout using available components and styles.

Using existing UI

You can also use elements directly from the canvas as a reference.

To do this:

1. Right-click an element or section on the canvas.
2. Select Use in AI prompt
   

UXPin creates a snapshot of the selected UI and attaches it to the prompt automatically.

You can then:

• Refine the existing layout.
• Generate a variation.
• Create a new view based on the same structure.
• Extend the current component with additional elements.
  
  

This is useful when you want to iterate on UI that already exists instead of starting from scratch.

After Forge generates a new component, you can choose how to use the result.

The response includes two options:

"Use component" Adds that version of the generated component to the canvas again. This is useful when revisiting earlier chats and reusing previously generated UI.

"Show code" Displays the underlying code used to generate the component.

For Merge (React) components, the code is shown as JSX using the selected component library, such as MUI, Ant Design, or shadcn/ui.

For UXPin Classic elements, the output is shown as HTML with inline CSS styles.

This allows you to review how the component is structured and how styles are applied.

Editing with Forge

You can use Forge to modify existing UI directly on the canvas.

Instead of creating new components from scratch, select an element and describe what you want to change. Forge updates the selected component while preserving its structure and library context.

Selecting what to edit

To edit existing UI, select an element on the canvas before submitting a prompt.

When an element is selected:

• Target pill is set automatically.
• Forge applies changes to that specific element.

Make sure the library selected in the AI panel matches the library used in your project before editing.

If no element is selected, Forge will usually generate a new component instead of modifying the existing UI.

If the selected element does not match the library chosen in the AI panel, Forge may generate a new component using the selected library rather than editing the original element.

Refining existing UI

Once you select a component, describe the changes in natural language or upload an image as a reference.

Forge updates the selected component while preserving its structure and selected component library.

You can refine the same component through multiple follow-up prompts. Each change builds on the current state.

Small, focused updates produce more predictable results than rewriting the entire component.

Reviewing applied changes

When Forge modifies an existing component, changes are displayed as structured code updates.

The response includes:

• A summary of what was changed.
• Code changes that reflect the update.

This allows you to review exactly what was modified before continuing with further iterations.

Forge applies updates directly to the selected element, and the change list reflects only the affected parts of the component.

Creating Alternatives 

Instead of modifying the selected component directly, you can generate an alternative version.

To create an alternative:

1. Select a component on the canvas.
2. Hover over the Target pill in the AI panel.
3. Choose the option to Create an alternative.
   

Forge creates a new version of the selected component. The original remains unchanged.

This is useful when you want to explore different layout variations or test alternative visual styles. Generating alternatives is safer than overwriting an existing component when you want to experiment.

Running UX Review

You can use Forge to review selected UI and receive structured feedback.

To run a review:

1. Select a component or section on the canvas.
2. Hover over the Target pill in the AI panel.
3. Choose UX Review option.

Forge analyzes the selection and provides a UX score together with observations about clarity and hierarchy.

The review is based on general UX principles such as clarity of content, visual hierarchy, consistency, and accessibility.

Forge does not apply changes automatically. You can implement improvements manually or generate an improved version based on the feedback.

Best Practices

Forge can generate UI quickly, but the results depend on how you structure your prompts and workflow. 

Working with Design System Guidelines

For consistent results, define Design System Guidelines before generating or refining UI.

If guidelines are not defined, Forge will make visual decisions based on the selected library and general layout patterns. This may produce inconsistent spacing, typography, or color usage across screens.

You can use Forge to help extract visual rules from an existing design. For example:

• Use Use in AI prompt on an existing screen.
• Ask Forge to describe spacing, typography, and color usage.

However, extraction from screenshots is not always precise. Visual estimation may differ from actual design values.

For predictable results, define and verify your rules manually, then paste them into Design System Guidelines field in Settings.

Writing effective prompts

The quality of generated UI depends on how clearly you describe your intent. Forge works best when prompts are structured and specific.

Plan before you prompt

Before submitting a prompt, decide:

• What component or section you want to build.
• Which library you are using.
• What visual rules should apply.

If needed, define Design System Guidelines first.

Work step by step

Instead of generating a full screen in one prompt, build it component by component.

For example:

1. Create the header.
2. Create the hero section.
3. Create the pricing cards.
4. Refine spacing and alignment.
   

This gives you more control and reduces unexpected layout changes.

Start with structure, then refine

When creating a new layout, begin with structure and hierarchy before refining visual details.

For example:

1. Generate the layout and main sections.
2. Adjust spacing and alignment.
3. Add visual states or styling refinements.

Breaking the process into steps produces more predictable results than requesting a fully detailed screen in a single prompt.

Be explicit about visual rules

If consistency is important, define spacing, typography, and color rules clearly.

Instead of writing:

Make it modern.

Write:

Use 24px padding, 12px border radius, and a subtle border #E5E7EB. 
Use 16px semibold heading and 14px regular body text. 
Add a soft shadow and a 150ms hover transition that slightly increases 
shadow depth.

Clear values produce more consistent results.

Use real content

Use realistic text instead of placeholders like 'Lorem ipsum'.

For example:

Instead of:Create a card with title and description.

Write:Create a pricing card with the title 'Pro Plan', 
description 'For growing teams that need advanced collaboration', 
price $29/month, and a primary button labeled 'Start free trial'.
 Add a small note below the button: 'Cancel anytime.'

Real content improves spacing and hierarchy.

If you already have structured data, you can paste it directly in CSV format.

Plan,Price,Users,Storage
Starter,$9/month,5 users,10GB
Pro,$29/month,25 users,100GB
Enterprise,Custom,Unlimited users,Unlimited storage

Providing structured content helps generate more accurate tables and layouts.

Be clear about UI elements

Describe UI elements clearly.

Instead of:

Add some controls. 

Write:

Add two secondary buttons aligned to the right 
and a text input field with a label above.
Use specific terms such as button, card, modal, 
input, dropdown, badge, or tooltip.

Let Forge clarify

If your request is ambiguous, Forge may ask follow-up questions. Answering these questions usually produces better results than restarting with a completely new prompt.

Use alternatives instead of overwriting

When exploring variations, generate alternatives instead of editing and replacing the existing component. This allows you to compare versions without losing previous work.