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

# Prototype

> Generate production-ready UI designs that match your product. Not generic templates. Actual interfaces you can show stakeholders and export to Figma.

## What Prototype Does

Prototype is Figr's core design generation capability. Describe what you need, and Figr creates high-fidelity interfaces based on your product context, design language, and memory. Prototype generates:

* Complete screen designs
* Component layouts
* Multi-screen flows
* Responsive variations
* Interactive states

<Frame>
  <img src="https://mintcdn.com/figr-1af7ae64/gqh1xm6TBO8K0yL7/images/prototypes.png?fit=max&auto=format&n=gqh1xm6TBO8K0yL7&q=85&s=61ac4b29b6f6404f99d36cc06bc21471" alt="Prototypes" width="3057" height="1872" data-path="images/prototypes.png" />
</Frame>

## [​](#when-figr-uses-prototype)When Figr Uses Prototype

Figr automatically engages prototype generation when you:

* Ask for a new screen or page design
* Request a feature interface
* Need UI for a specific flow
* Want to visualize a concept
* Ask for design variations

<Accordion title="Trigger phrases">
  ```text theme={null}
  "Design a settings page"
  "Create a dashboard for analytics" 
  "Build a checkout flow"
  "Show me what a notification center could look like"
  "Design the onboarding experience"
  ```
</Accordion>

***

## [​](#what-you-get)What You Get

<AccordionGroup>
  <Accordion title="High-Fidelity Output">
    Not wireframes. Not sketches. Production-ready designs. Output includes:

    * Correct colors from your design language
    * Proper typography and spacing
    * Real component patterns
    * Realistic placeholder content
    * Complete visual hierarchy
  </Accordion>

  <Accordion title="Product-Matched Designs">
    Prototypes look like they belong in your product. Figr applies:

    * Your design system tokens
    * Your component patterns
    * Your layout conventions
    * Your visual style
    * Context from memory
  </Accordion>

  <Accordion title="Export-Ready">
    Take designs directly to Figma or code. Export options:

    * One-click Figma export
    * Code export for development
    * Image downloads
    * Share links for stakeholders
  </Accordion>
</AccordionGroup>

***

## [​](#best-results)Getting Best Results

<AccordionGroup>
  <Accordion title="Be Specific About Requirements">
    * **Less effective:** "Design a dashboard"
    * **More effective:** "Design a dashboard showing: daily active users chart, recent activity feed, and quick action buttons for creating new projects"
  </Accordion>

  <Accordion title="Reference Your Product">
    * **Leverage your context:** "Using our existing card style, design..." "Match the navigation from our dashboard..." "Follow the form pattern we use in settings..."
  </Accordion>

  <Accordion title="Specify States and Variations">
    * \*\*Request complete coverage: \*\*"Design the empty state, loading state, and populated state" "Show mobile and desktop versions" "Include error handling for failed submissions"
  </Accordion>
</AccordionGroup>