Design a web-based AI UI builder tool that is deeply integrated with a custom design system. The tool should include two main areas:
A Design System Repository
An AI Builder Interface
🔹 Design System Repository Section Create a clean, modern interface that shows a grid of components (imported from Figma).
Each grid item should:
Display a visual preview of the component.
Show the component name below the preview.
When a user clicks on a component:
A slide-out modal should open from the right.
Inside this modal, display:
A list or grid of all available component states (e.g., default, hover, disabled, etc.).
Each state should have a toggle or dropdown to reveal the corresponding code snippet (HTML/CSS or React).
Include a button on the main screen to "Add New Component".
On click, a modal should open with two options:
Link via Figma MCP (Figma component URL)
Manually Add Code Block (user pastes in component code)
If manually added, the user should have the option to define multiple states and paste code per state.
🔹 AI UI Builder Interface Add a prominent input field at the top for users to enter natural language prompts (e.g., “Generate a product display page with a cart summary on the right”).
When the prompt is submitted:
Show a loading screen with a spinner and message like “Generating design using your components...”
Once generation is complete:
Render a full-page UI mockup using only the components from the design system repository.
Ensure components retain their original styles and behaviors.
Provide toggle options to switch between Preview Mode and Code Mode for the generated screen.
🔹 Styling Guidelines
Use a clean, modern and sleek dark mode design with #34A394 as the primary colour
Use Inter as the primary font.
Use consistent spacing, rounded corners, and subtle elevation for cards and modals.
I'll create a comprehensive AI UI builder tool with a design system repository and AI builder interface. This will be a modern, dark-themed application with the features you specified.
I've created a comprehensive AI UI Builder tool with a sleek dark mode design using #34A394 as the primary color and Inter font. Here are the key features implemented:
#34A394 accent colorThe tool generates different UI layouts based on prompt keywords (e-commerce, dashboard, landing page) and maintains consistent styling with your design system components. The interface is intuitive and provides a professional experience for building AI-powered interfaces.
The code returns the following error:
Failed to load "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" from "blob:https://kzmgonpc3nvj55stufyy.lite.vusercontent.net/f59bd10e-fbec-4a4f-8603-7bd2eb924af2 - see network log for details.", make sure it exists.
Revise the code to address the error.
I was previewing: /
I'll fix the font loading error by using Next.js's built-in font optimization instead of the CSS import.
I've fixed the font loading error by implementing Next.js's built-in font optimization system instead of using a CSS import. Here's what I changed:
fonts.ts file that properly imports the Inter font using Next.js's font systemThis approach has several advantages:
The application will now load the Inter font correctly without any external requests to Google Fonts, resolving the error you encountered.