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

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

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.

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.

Recording Layout Changes in LAYOUT_ARCHITECTURE.md

After capturing the breakpoint data, write the findings into the 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, 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 to align Tailwind’s responsive utilities with the documented widths:

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	Defines the checklist for extracting breakpoints and design tokens (line 24)
.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	Documents that builder agents receive responsive breakpoints as part of their component specifications (line 96)
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: 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 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 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. 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}