# How to Extract Responsive Breakpoint Behavior for Desktop, Tablet, and Mobile Views

> Learn how to extract responsive breakpoint behavior for desktop, tablet and mobile. Automate CSS value capture and document layout shifts for website cloning.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-07-03

---

**Use browser automation to capture computed CSS values at 1440px (desktop), 768px (tablet), and 390px (mobile) viewports, then document specific layout shifts in [`LAYOUT_ARCHITECTURE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/LAYOUT_ARCHITECTURE.md) to guide the cloning process.**

The AI-Website-Cloner template provides a systematic approach to extract responsive breakpoint behavior from target websites. According to the [`INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/INSPECTION_GUIDE.md) in the JCodesMore/ai-website-cloner-template repository, clone agents must record when layout shifts occur across different viewport widths as part of the design-token extraction process. This documentation ensures that builder agents receive precise specifications to reproduce the exact desktop, tablet, and mobile layouts found in the original site.

## Understanding the Breakpoint Extraction Workflow

The template defines **responsive breakpoints** as critical design tokens that agents must capture during the inspection phase. The workflow documented in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) instructs agents to "inspect with DevTools responsive mode" and note **when the layout shifts** at specific viewport widths. This process involves programmatically resizing the browser window and recording computed style changes for key layout containers.

By default, the template recognizes three canonical breakpoints that correspond to standard device categories:

- **Desktop** – viewport widths ≥ 1440px (the template’s default full-page screenshot size)
- **Tablet** – approximately 768px (where multi-column layouts typically collapse)
- **Mobile** – viewport widths ≤ 390px (the template’s mobile screenshot target)

## Step-by-Step Breakpoint Capture Process

### Initialize Browser Automation

Start by launching a headless browser using Playwright, Puppeteer, or Chrome MCP. Navigate to the target URL and prepare to cycle through the three canonical viewport sizes.

```typescript
import { chromium } from "playwright";

const browser = await chromium.launch();
const page = await browser.newPage();
const viewports = [1440, 768, 390]; // Desktop, Tablet, Mobile

```

### Record Computed Styles at Each Width

For each viewport width, set the viewport size, navigate to the page, and extract **computed CSS values** using `window.getComputedStyle`. Focus on properties that indicate layout changes, such as `grid-template-columns`, `flex-direction`, and `display` values for navigation and sidebar elements.

```typescript
type BreakpointInfo = {
  width: number;
  columns: number;
  flexDirection: string;
  sidebarVisible: boolean;
};

const results: BreakpointInfo[] = [];

for (const vw of viewports) {
  await page.setViewportSize({ width: vw, height: 900 });
  await page.goto(url, { waitUntil: "networkidle" });

  // Extract grid column count
  const columns = await page.evaluate(() => {
    const grid = document.querySelector(".grid");
    return grid ? getComputedStyle(grid).gridTemplateColumns.split(" ").length : 0;
  });

  // Check navigation flex direction
  const flexDir = await page.evaluate(() => {
    const nav = document.querySelector(".nav");
    return nav ? getComputedStyle(nav).flexDirection : "row";
  });

  // Detect sidebar visibility
  const sidebarVisible = await page.evaluate(() => {
    const sb = document.querySelector(".sidebar");
    return !!sb && getComputedStyle(sb).display !== "none";
  });

  results.push({ width: vw, columns, flexDirection: flexDir, sidebarVisible });
}

```

### Identify Layout Shift Triggers

The inspection guide explicitly asks agents to list the **specific breakpoint values and what changes** at each width. Document transitions such as "4-column grid collapses to 2-column" or "sidebar visibility changes from visible to hidden" as implemented in the source workflow at line 388 of [`clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/clone-website.md).

## Recording Layout Changes in LAYOUT_ARCHITECTURE.md

After capturing the breakpoint data, write the findings into the [`LAYOUT_ARCHITECTURE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/LAYOUT_ARCHITECTURE.md) specification file located under `docs/research/`. This file serves as the source of truth for builder agents and should contain a structured table mapping breakpoints to layout behaviors.

| Breakpoint | Width (px) | Layout Change Description |
|------------|------------|---------------------------|
| Desktop | 1440 | 4-column grid, sidebar visible, horizontal navigation |
| Tablet | 768 | 2-column grid, sidebar hidden, navigation wraps |
| Mobile | 390 | Single-column stack, hamburger menu, footer stacks vertically |

As noted in the main [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md), builder agents receive these "responsive breakpoints" along with other design tokens to ensure the cloned UI matches the original responsive behavior.

## Implementing Breakpoints in Tailwind CSS

Translate the extracted breakpoint values into your styling configuration. Create or update [`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts) to align Tailwind’s responsive utilities with the documented widths:

```typescript
import type { Config } from "tailwindcss";

export default {
  content: ["./src/**/*.{ts,tsx,js,jsx}"],
  theme: {
    screens: {
      desktop: "1440px", // Matches full-page screenshot width
      tablet: "768px",
      mobile: "390px",
    },
  },
} satisfies Config;

```

This configuration ensures that utility classes like `desktop:grid-cols-4` or `mobile:hidden` correspond exactly to the breakpoints extracted from the target site.

## Key Source Files in the Template

| File | Purpose |
|------|---------|
| [`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md) | Defines the checklist for extracting breakpoints and design tokens (line 24) |
| [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) | Contains operational instructions for capturing screenshots at 1440px and 390px, and recording breakpoint behavior (lines 122-124, 388) |
| [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) | Documents that builder agents receive responsive breakpoints as part of their component specifications (line 96) |
| [`LAYOUT_ARCHITECTURE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/LAYOUT_ARCHITECTURE.md) | The output specification where extracted breakpoint data is archived for builder consumption |

## Summary

- **Extract at three canonical widths**: 1440px (desktop), 768px (tablet), and 390px (mobile) as defined in the template workflows.
- **Use `window.getComputedStyle`** to capture actual CSS values for grid columns, flex directions, and element visibility at each breakpoint.
- **Document in [`LAYOUT_ARCHITECTURE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/LAYOUT_ARCHITECTURE.md)**: Create tables that map each breakpoint width to specific layout changes and component behaviors.
- **Configure Tailwind screens**: Map the extracted values to the `screens` object in [`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts) to maintain responsive fidelity.
- **Pass to builders**: The README confirms that responsive breakpoints are consumed by builder agents alongside other design tokens to reconstruct the UI.

## Frequently Asked Questions

### What are the exact breakpoint widths used in the AI-Website-Cloner template?

The template specifies **1440px for desktop**, **768px for tablet**, and **390px for mobile** as the canonical widths for breakpoint extraction. These values correspond to the full-page screenshot dimensions configured in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) and represent the standard viewport sizes where most responsive layouts undergo significant structural changes.

### How do I detect when a sidebar disappears at smaller viewports?

Use the `window.getComputedStyle` method to check the `display` property of the sidebar element. In Playwright or Puppeteer, evaluate `getComputedStyle(document.querySelector('.sidebar')).display` at each viewport width; if the value is `none` or the element is removed from the DOM, record that the sidebar is hidden at that breakpoint.

### Where should I document the extracted breakpoint behavior?

Document all findings in **[`docs/research/LAYOUT_ARCHITECTURE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/LAYOUT_ARCHITECTURE.md)**. According to the inspection workflow, this specification file should contain tables listing each breakpoint width alongside descriptions of what layout changes occur, such as grid column reductions or navigation transformations.

### Can I use Puppeteer instead of Playwright for breakpoint extraction?

Yes, the methodology remains identical regardless of the browser automation tool. Both Puppeteer and Playwright support `setViewport()` methods and `page.evaluate()` for accessing `window.getComputedStyle`. The template’s inspection guide only requires that you capture the computed styles at the three canonical widths, regardless of which automation library you use.