Learn | AI Design Workflow

File structure Your first React code Output Code Distraction free code Layer visualization

LLM Written

Human Written

File structure

├── src
`  `├── App.tsx `← we are here`
`  `├── index.css
`  `└── main.tsx

Your first React code

Simply replace the entire content of src/App.tsx with the following:

Output

Code

export default function Home() {
  const cartCount = 20;
  return (
    <button className='bg-blue-500 text-white px-4 py-2 rounded'>
      Add to cart
      <span className='bg-white text-blue-700 ml-2 px-2 py-1 rounded-full'>{cartCount}</span>
    </button>
  );
}

Distraction free code

const cartCount = 20;
<button>
  Add to cart
  <span>{cartCount}</span>
</button>

Layer visualization

Layerspage.tsx

Approximation of how this code would look in Figma's layer panel.

Home

cartCount"20"

AddToCartButton"Add to cart"

CartCountBadge"{cartCount}"

Select a layer to inspect

Your First Code