Screenshot to Code

Describe a UI screenshot and get generated HTML/CSS code using common patterns. Build layouts from visual descriptions quickly.

Select Component Type

Preview

Generated Code

<!-- Navbar -->
<nav style="background: #ffffff; padding: 16px 24px; border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
  <div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;">
    <a href="#" style="font-size: 20px; font-weight: 700; color: #3b82f6; text-decoration: none;">Logo</a>
    <div style="display: flex; gap: 24px; align-items: center;">
      <a href="#" style="color: #6b7280; text-decoration: none; font-size: 14px;">Link 1</a>
      <a href="#" style="color: #6b7280; text-decoration: none; font-size: 14px;">Link 2</a>
      <a href="#" style="color: #6b7280; text-decoration: none; font-size: 14px;">Link 3</a>
      <a href="#" style="color: #6b7280; text-decoration: none; font-size: 14px;">Link 4</a>
      <a href="#" style="background: #3b82f6; color: #fff; padding: 8px 20px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500;">Get Started</a>
    </div>
  </div>
</nav>