Skip to main content

Use a live website as a starting point with Web Capture

Web Capture lets you capture a section of any live webpage—or the entire page—and bring it onto your Kombai Design Canvas.

From there, you can use the captured design as a starting point, iterate on it, and explore new directions without recreating the reference from scratch.

Let’s walk through how it works.

Before you begin

Web Capture is available through the extension built into Kombai Browser. You can launch the browser from the Globe icon in toolbar below the chatbox. The extension is already installed in Kombai Browser. Learn how to launch Kombai Browser.

1. Create a blank Canvas

Start by creating a blank Canvas in Kombai and leave it open. This Canvas is where your captures will appear as designs.

2. Open the page you want to capture

Next, open the webpage you want to use as a starting point.

This can be a page from your own project or another live website whose layout or visual direction you want to explore.

Let’s say you want to experiment with a different version of a hero section. Open the page containing that section in Kombai Browser.

3. Start Web Capture

In the Kombai Browser extension, click the Web Capture icon.

Now, when you move your pointer across the page, you’ll be able to choose the section you want to capture. Once you click it, the capture will appear as a design on the Canvas you opened in step 1. You do not need to transfer it separately.

If you want to bring in the entire page instead, click Capture full page in the panel.

Note: Full-page capture works for most webpages. Pages with lots of animations, images, or interactions may not render as expected on the Canvas. If that happens, capture individual sections instead.
Pro tip: You can capture more than one section before leaving Web Capture mode. Each captured item appears as a separate card in the panel.

When you’re finished capturing, return to the Canvas you opened in step 1. Each section or full page you captured is already there as a design, ready for you to open and continue working with.

4. See what Web Capture preserves

Web Capture brings the captured section or full page onto your Canvas as editable HTML—not as a static screenshot.

You can edit its text and images, and adjust the layout, spacing, and styles. Fonts, animations, interactions, and responsive styles are preserved too, so you can continue working with the design as it appeared on the original page.

Web Capture also works with authenticated pages. If you’re signed in and can see the content in Kombai Browser, you can capture it.

5. Continue iterating in Kombai

Once the capture is available as a design on your Canvas, you can use it as a visual starting point for further work.

For example, you can:

  • Open the design editor and adjust its styles, content, or markup.
  • Generate a new variant to explore another visual or structural direction.
  • Generate versions for different devices or light and dark modes.
  • Add the design to your chat as context.
  • Use Code design when you’re ready to turn it into code.

Conclusion

And that’s all there is to using Web Capture to start a design from a live webpage.

Instead of recreating a reference from scratch, you can capture the section you’re interested in, bring it onto your Canvas, and continue exploring from there.

If you want to try a different direction, generate a new variant from the captured design. If you’re happy with the result and want to implement it, use Code design to take the next step.