> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uxarts.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Welcome to UIdraft

> Discover UIdraft — AI‑powered, context‑aware UI design assistant that works across browser and Figma.

<Frame>
  <iframe id="youtube-boxify-demo" src="https://www.youtube.com/embed/7jJ4E7Sxhuo?si=2GdN-KP9HscPqeGR&rel=0&modestbranding=1&enablejsapi=1" title="UIdraft - Build UI Like a Pro" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen loading="lazy" style={{ width: '100%', height: '450px', borderRadius: '0.5rem' }} />
</Frame>

## Getting Started

<Columns cols={2}>
  <Card title="Feature overview" icon="sparkles" href="/uidraft/getting-started">
    Learn UIdraft’s core capabilities: patterns, Editable Design, publishing.
  </Card>

  <Card title="FAQ" icon="lightbulb" href="/uidraft/faq">
    Common questions and best practices to build efficiently.
  </Card>
</Columns>

<Card title="UIdraft Website" icon="globe" href="https://uidraft.ai/" horizontal>
  Visit our website for products, solutions, and updates.
</Card>

## Why UIdraft — not just "generate a page"

<Columns cols={2}>
  <Card title="Context‑aware, not generic" icon="eye" href="/uidraft/figma-plugin">
    Works with your existing layout and style; extends with consistency.
  </Card>

  <Card title="Editable by default" icon="pen" href="/uidraft/features">
    Everything is editable — adjust copy, layout, spacing, colors freely.
  </Card>

  <Card title="Figma workflow" icon="figma" href="/uidraft/figma-plugin">
    Use the official plugin to import/export and keep your team in sync.
  </Card>

  <Card title="Fair credits" icon="badge-check" href="/uidraft/pricing">
    Only pay when you accept the final result. Iterate first, decide later.
  </Card>
</Columns>

## Typical Workflow

<Steps>
  <Step title="Describe & choose a pattern">
    Start from a template or write a brief; UIdraft proposes fitting layouts.
  </Step>

  <Step title="Edit visually with Editable Design">
    Tune spacing, hierarchy, copy and colors until it feels right.
  </Step>

  <Step title="Share or export to Figma">
    Share a link for feedback or export to Figma for final touches.
  </Step>
</Steps>