> ## 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.

# Refine Design

> Make targeted improvements to existing designs. Fix specific elements, adjust styling, iterate on feedback. Precision editing without starting over.

## What Refine Does

Refine takes an existing design and makes specific changes. Instead of regenerating from scratch, it preserves what works and modifies what needs adjustment. Refine handles:

* Visual adjustments (colors, spacing, typography)
* Layout modifications
* Component swaps
* Content updates
* State additions
* Responsive adaptations

## [​](#when-figr-uses-refine) When Figr Uses Refine

Figr automatically engages refinement when you:

* Ask to change something in a generated design
* Request adjustments to specific elements
* Want to iterate on a concept
* Need to incorporate feedback
* Ask for variations of an existing design

<Accordion title="Trigger Phrases">
  ```text theme={null}
  "Make the buttons larger"
  "Change the header to use our blue"
  "Add more whitespace between sections"
  "Move the sidebar to the right"
  "Make this more minimal"
  ```
</Accordion>

## [​](#refinement-types) Types of Refinement

<AccordionGroup>
  <Accordion title="Visual Adjustments">
    * "Make the cards have more rounded corners"
    * "Increase the contrast on the text"
    * "Use a darker background"
    * "Make the typography bolder"
  </Accordion>

  <Accordion title="Layout Modifications">
    * "Stack these horizontally instead of vertically"
    * "Add a sidebar navigation"
    * "Make this a two-column layout"
    * "Move the CTA above the fold"
  </Accordion>

  <Accordion title="Component Updates">
    * "Replace the dropdown with tabs"
      * "Use toggle switches instead of checkboxes"
    * "Add a search bar to the header"
    * "Include pagination at the bottom"
  </Accordion>

  <Accordion title="Content Refinement">
    * "Use more realistic placeholder data"
    * "Make the headlines shorter"
    * "Add helper text under the form fields"
    * "Include error messages"
  </Accordion>

  <Accordion title="State Additions">
    * "Show what this looks like empty"
    * "Add a loading skeleton"
    * "Design the error state"
    * "Show the hover state for cards"
  </Accordion>
</AccordionGroup>

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

<AccordionGroup>
  <Accordion title="Be Specific About What to Change">
    * **Less effective:**"Make it better"
    * **More effective:** "Increase the font size of the section headers  and add more space between the cards"
  </Accordion>

  <Accordion title="Reference Specific Elements">
    * **Clear targeting:** "Change the top navigation..." "In the sidebar, make..." "The card on the right should..."
  </Accordion>

  <Accordion title="Explain the Why">
    * "Make the CTA bigger - users are missing it"; "Add more contrast - accessibility feedback"; "Simplify the form - users abandoning halfway"
  </Accordion>
</AccordionGroup>