Artifact

Visual & UI Generation

What is Artifact?

Artifact is a generative UI tool that instantly produces React components, HTML code, and Mermaid diagrams. In Doraverse, it is integrated directly into the AI agent workflow, enables effortless creation and refinement of web UI elements and visualizations — all powered by your chosen AI model.


Key Features of Artifact in Doraverse

  • Instant Prototyping: Quickly generate websites, user interfaces, and layout components using generative AI, speeding up the front-end development process.

  • Generative UI:Create full React components, clean HTML code, and sophisticated Mermaid diagrams on demand to visualize complex ideas clearly.

  • Iterative Design: Allows rapid, user-centric refinement of generated outputs, making it easy to improve designs step-by-step with AI assistance.

  • Display in a Separate UI Window: Visual content generated by Artifact is displayed in a dedicated, separate UI window, improving clarity and making interaction with the visuals easier and more intuitive.


How Artifact Helps You

  • Speed up UI/UX design and development by generating code and diagrams instantly without spending hours on layout design.

  • Visualize complex ideas by using Mermaid diagrams to clearly map workflows, site maps, or interaction charts.

  • Easily explore design ideas and get AI suggestions to refine your UI.

  • Enable stakeholders with little coding experience to participate in prototyping and feedback.

  • Display visuals in a separate UI window for focused review and easier interaction.


Use Cases

Rapid Website Prototyping

Create full React components or HTML snippets for landing pages, dashboards, or feature mockups in minutes.

UI Component Design

Automatically generate reusable UI elements styled and structured for responsiveness.

Diagramming and Documentation

Visualize processes, relationships, or system architecture using Mermaid diagrams generated on the fly.

Learning and Experimentation

Explore React and HTML fundamentals in an interactive environment powered by AI assistance.

Additional Instructions with Artifact

To maximize the power and flexibility of Artifact, you can enable two important options that adjust how the AI generates and handles UI components:

Enable shadcn/ui Instructions

Adds special instructions so the AI understands how to use shadcn/ui components—a collection of reusable, well-designed UI components built with Radix UI and Tailwind CSS.

This helps the AI generate polished, consistent React components that conform to your design system, saving time and ensuring a professional look.

Suggestion: Enable this when your project or company uses shadcn/ui or you want cleaner, modular UI code that’s easier to maintain and customize.

Example
You are generating React components using the shadcn/ui library, which is built on Radix UI and styled with Tailwind CSS. Follow these guidelines:

1. Use shadcn/ui components as building blocks wherever possible (e.g., Button, Input, Dialog, Checkbox).
2. Respect the design system’s consistent styling patterns using Tailwind CSS classes included in shadcn/ui.
3. Ensure components are reusable and modular, separating concerns clearly.
4. Use accessible and semantic HTML elements as per Radix UI standards integrated in shadcn/ui.
5. Include proper props and events handled in a React-friendly way.
6. Generate clean, readable code with clear indentation and comments where necessary.
7. Avoid inline styles; use Tailwind utility classes exclusively.
8. For layouts, use common shadcn/ui layout primitives or Flex/Grid utilities with Tailwind classes.
9. Write responsive components that adapt gracefully to different screen sizes.

Example snippet using shadcn/ui Button component:

```jsx
import { Button } from "@/components/ui/button"

export function SubmitButton() {
  return (
    <Button type="submit" className="w-full">
      Submit
    </Button>
  )
}

Custom Prompt Mode

Disables the default Artifact system prompt, allowing you to provide your own custom instructions guiding the AI’s behavior.

This gives you full control over how the AI creates UI artifacts, from coding style to specific frameworks, naming conventions, or file structures.

Suggestion: Use this mode if you have specific requirements or want to tightly tailor output for your team’s development standards and workflows.

Last updated