Tips & Tricks (अपडेट: 2/6/2026)

Claude Code से Responsive Design: CSS, Images और Playwright Guide

Claude Code से responsive UI बनाएं: mobile-first CSS, clamp, grids, images, navigation, tables और Playwright checks.

Claude Code से Responsive Design: CSS, Images और Playwright Guide

Claude Code को काम देने से पहले नियम तय करें

Responsive design का मतलब सिर्फ desktop page को छोटा करके phone पर फिट करना नहीं है। अच्छी responsive page screen width, touch target, image size, navigation priority, table readability, ads और CTA को साथ में देखती है। अगर आप Claude Code को सिर्फ “mobile friendly बना दो” कहेंगे, तो वह एक viewport में page ठीक दिखा सकता है, लेकिन horizontal scroll, fixed-width card, भारी hero image, भीड़ वाला menu या बहुत नीचे चला गया purchase button रह सकता है।

इसलिए prompt में छोटा लेकिन साफ contract दें। Mobile-first CSS का मतलब है कि छोटी screen base होती है और बड़ी screen के लिए rules बाद में जोड़े जाते हैं। clamp() CSS function है जिसमें minimum, preferred और maximum value एक साथ दी जाती है। Container query वह तरीका है जिसमें component पूरे viewport की जगह अपने parent container की width देखकर बदलता है। ये बातें basic लगती हैं, लेकिन Claude Code के output को review करना बहुत आसान कर देती हैं।

Official reference के लिए MDN के Responsive design, @container, clamp() और responsive images देखें। Verification के लिए Playwright Screenshots और Visual comparisons उपयोगी हैं। Claude Code की current docs overview और How Claude Code works बताती हैं कि यह codebase पढ़ता है, files edit करता है, commands run करता है और result verify करता है। Responsive work में भी इसे इसी तरह use करें।

Design foundation के लिए Claude Code design system, usability के लिए Claude Code accessibility और browser verification के लिए Claude Code Playwright testing भी पढ़ें।

Implementation flow

Responsive काम को last-minute CSS patch न बनाएं। Claude Code से पहले existing page पढ़वाएं, फिर हर component किस width पर टूटता है यह ढूंढवाएं, और CSS, images तथा tests को साथ में update करवाएं।

flowchart LR
  A["Existing page पढ़ना"] --> B["Mobile-first base CSS"]
  B --> C["Fluid grid और clamp()"]
  C --> D["Container query components"]
  D --> E["Responsive images और tables"]
  E --> F["Playwright screenshots"]

यह prompt practical starting point है:

Existing /responsive-demo page को responsive बनाएं।

Requirements:
- mobile-first CSS use करें।
- 320px, 390px, 768px, 1024px और 1440px पर horizontal overflow नहीं होना चाहिए।
- navigation, cards, pricing table, article CTA और footer overlap नहीं होने चाहिए।
- content images में width/height, srcset, sizes, loading और useful alt जोड़ें।
- JavaScript width checks से पहले CSS Grid, clamp() और @container prefer करें।
- बदलाव के बाद Playwright screenshots और overflow assertion run करें।

Do not:
- existing URLs, conversion CTA links या accessible heading order न तोड़ें।
- page-level horizontal scroll बनाने वाले बड़े fixed min-width न जोड़ें।

इससे Claude Code को goal, boundary और proof तीनों मिलते हैं। Review के समय आप आसानी से देख सकते हैं कि change सिर्फ desktop के लिए तो नहीं है।

Copy-paste HTML

नीचे navigation, hero image, cards, side panel और comparison table वाला छोटा page है। Image paths अपने project के हिसाब से बदलें और अगले section का CSS जोड़ें।

<!doctype html>
<html lang="hi">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Responsive Demo</title>
    <link rel="stylesheet" href="./responsive-demo.css" />
  </head>
  <body>
    <header class="site-nav">
      <a class="brand" href="/">ClaudeCodeLab</a>
      <nav class="nav-links" aria-label="मुख्य navigation">
        <a href="/hi/blog/">Articles</a>
        <a href="/en/products/">Products</a>
        <a href="/en/training/">Consulting</a>
      </nav>
    </header>

    <main class="page-shell">
      <section class="hero">
        <div>
          <p class="eyebrow">Responsive Design</p>
          <h1>छोटी screen से शुरू करें, फिर layout को grow करें</h1>
          <p class="lead">
            mobile-first CSS, fluid grids, responsive images और Playwright checks को एक workflow में लागू करें।
          </p>
          <a class="primary-cta" href="/en/products/">Prompt templates देखें</a>
        </div>
        <picture class="hero-media">
          <source
            type="image/avif"
            srcset="/images/responsive-demo-640.avif 640w, /images/responsive-demo-1280.avif 1280w"
            sizes="(width < 768px) 92vw, 40vw"
          />
          <img
            src="/images/responsive-demo-1280.jpg"
            alt="Phone और laptop पर वही responsive page"
            width="1280"
            height="900"
            loading="eager"
            decoding="async"
          />
        </picture>
      </section>

      <div class="layout-grid">
        <aside class="side-panel" aria-label="Viewport checklist">
          <h2>Check करने वाली widths</h2>
          <ul>
            <li>320px: छोटा phone</li>
            <li>390px: common phone</li>
            <li>768px: tablet</li>
            <li>1024px+: desktop</li>
          </ul>
        </aside>

        <section class="cards" aria-label="Improvement cards">
          <article class="card featured">
            <img src="/images/card-layout.jpg" alt="" width="720" height="480" loading="lazy" />
            <div class="card-body">
              <h2>Cards container width पर respond करें</h2>
              <p>Reusable component को सिर्फ viewport नहीं, अपने available space के हिसाब से density बदलनी चाहिए।</p>
            </div>
          </article>
          <article class="card">
            <div class="card-body">
              <h2>Navigation wrap हो सकती है</h2>
              <p>Desktop links को mobile में एक ही row में force न करें। Tap area बचाकर रखें।</p>
            </div>
          </article>
          <article class="card">
            <div class="card-body">
              <h2>Table meaning बचाएं</h2>
              <p>Small screens पर rows को cards बनाएं और `data-label` से column name दिखाएं।</p>
            </div>
          </article>
        </section>
      </div>

      <section class="comparison">
        <h2>Plan comparison</h2>
        <table class="responsive-table">
          <thead>
            <tr>
              <th scope="col">Item</th>
              <th scope="col">Solo</th>
              <th scope="col">Team</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-label="Item">Goal</td>
              <td data-label="Solo">Learning और small improvements</td>
              <td data-label="Team">Consistent review standards</td>
            </tr>
            <tr>
              <td data-label="Item">Proof</td>
              <td data-label="Solo">Local Playwright</td>
              <td data-label="Team">CI screenshots</td>
            </tr>
          </tbody>
        </table>
      </section>
    </main>
  </body>
</html>

Mobile-first CSS, fluid grid और clamp

CSS में narrow screen को default रखें। Wider screens के लिए columns बाद में जोड़ें। Cards के लिए repeat(auto-fit, minmax(...)), spacing और headings के लिए clamp(), और featured card के लिए container query use करें।

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #172033;
  background: #f7f8fb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.site-nav,
.page-shell {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1rem;
}

.brand,
.nav-links a,
.primary-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.page-shell {
  padding-block: clamp(1rem, 4vw, 3rem);
}

.hero {
  display: grid;
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: center;
}

.hero h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(2.25rem, 10vw, 5rem);
  line-height: 1.02;
}

.lead {
  max-width: 62ch;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.8;
}

.primary-cta {
  width: fit-content;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  background: #172033;
  color: white;
  text-decoration: none;
  font-weight: 700;
}

.layout-grid {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  margin-block-start: 2rem;
}

.cards {
  container: cards / inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

.side-panel,
.card,
.comparison {
  background: white;
  border: 1px solid #dbe3ef;
  border-radius: 0.75rem;
}

.card {
  overflow: hidden;
}

.card-body,
.side-panel,
.comparison {
  padding: 1rem;
}

@container cards (width >= 42rem) {
  .card.featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(14rem, 0.8fr) 1fr;
  }

  .card.featured img {
    height: 100%;
    object-fit: cover;
  }
}

.comparison {
  margin-block-start: 2rem;
  overflow-x: auto;
}

.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
  padding: 0.875rem;
  border-block-end: 1px solid #dbe3ef;
  text-align: left;
}

@media (width < 48rem) {
  .responsive-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
  }

  .responsive-table tr {
    border: 1px solid #dbe3ef;
    border-radius: 0.5rem;
    margin-block: 0.75rem;
    overflow: hidden;
  }

  .responsive-table td {
    display: grid;
    grid-template-columns: minmax(7rem, 40%) 1fr;
    gap: 1rem;
  }

  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #526071;
  }
}

@media (width >= 64rem) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  }

  .layout-grid {
    grid-template-columns: 16rem minmax(0, 1fr);
  }
}

मुख्य बात fixed widths हटाना है। width: min(100% - 2rem, 72rem) small screen पर margin देता है और large screen पर readable width रोकता है। minmax(min(100%, 18rem), 1fr) card को narrow container तोड़ने से बचाता है।

Components के लिए checklist

Claude Code को component-level criteria दें।

ComponentCommon failureClaude Code से क्या मांगें
Navigationdesktop links mobile में squeezewrapping, tap area और aria-label रखें
Cardswidth: 320px या big min-width overflow बनाता हैauto-fit, minmax(), container queries use करें
Imagesphone पर same large JPEG loadsrcset, sizes, width, height, loading, alt जोड़ें
Tablescolumns unreadable हो जाते हैंwrapper scroll या row cards, data-label के साथ
CTArevenue link नीचे दब जाता हैmobile first scroll और article end check करें

हर small nav को hamburger menu बनाने की जरूरत नहीं होती। तीन links हों तो wrapping ज्यादा clear हो सकती है। Table में भी context देखें: pricing comparison को horizontal view चाहिए हो सकता है, जबकि ticket list row cards में बेहतर पढ़ी जाती है।

Test करने लायक use cases

पहला use case SaaS dashboard है। Sidebar, filters, KPI cards, charts और data table साथ आते हैं। Mobile पर main KPIs पहले दिखाएं, secondary filters collapse करें और detailed rows को readable cards बनाएं।

दूसरा use case blog या media site है। Body width, table of contents, ads, related posts और free PDF CTA space के लिए compete करते हैं। Line length, image loading, code block overflow और CTA visibility check करें।

तीसरा use case ecommerce या course landing page है। Product cards, price comparison, buy button और FAQ revenue से directly जुड़े होते हैं। अगर price या buy button mobile पर बहुत नीचे चला जाए तो conversion घट सकता है।

चौथा use case internal admin screen है। Daily users search, filters, keyboard operation और readable tables चाहते हैं। Responsive improvement को existing workflow नहीं तोड़ना चाहिए।

Playwright से screenshot और overflow check

सिर्फ browser में देखकर task finish न करें। Playwright representative widths पर important elements, horizontal overflow और screenshots verify कर सकता है।

import { expect, test } from "@playwright/test";

const baseUrl = process.env.PLAYWRIGHT_BASE_URL ?? "http://127.0.0.1:3000";

const viewports = [
  { name: "mobile-320", width: 320, height: 740 },
  { name: "mobile-390", width: 390, height: 844 },
  { name: "tablet-768", width: 768, height: 1024 },
  { name: "desktop-1440", width: 1440, height: 1000 },
];

for (const viewport of viewports) {
  test(`responsive demo has no horizontal overflow at ${viewport.name}`, async ({ page }) => {
    await page.setViewportSize({ width: viewport.width, height: viewport.height });
    await page.goto(`${baseUrl}/responsive-demo`);

    await expect(page.getByRole("navigation", { name: "मुख्य navigation" })).toBeVisible();
    await expect(page.getByRole("link", { name: "Prompt templates देखें" })).toBeVisible();

    const hasHorizontalOverflow = await page.evaluate(() => {
      return document.documentElement.scrollWidth > document.documentElement.clientWidth;
    });

    expect(hasHorizontalOverflow).toBe(false);
    await expect(page).toHaveScreenshot(`responsive-${viewport.name}.png`, {
      fullPage: true,
      maxDiffPixels: 300,
    });
  });
}

First run baseline screenshots बनाएगा। Design intentionally बदला हो तभी npx playwright test --update-snapshots चलाएं। Screenshots OS, font rendering, GPU और headless mode से बदल सकते हैं, इसलिए team में same CI environment use करें।

Common pitfalls

सबसे बड़ा pitfall desktop-first CSS पर mobile overrides चढ़ाना है। शुरुआत में आसान लगता है, पर cascade जल्दी confusing हो जाती है। Claude Code से base rules को narrow screen बनवाएं और wide layout बाद में जोड़ें।

दूसरा pitfall <meta name="viewport"> missing होना है। इसके बिना mobile browser virtual desktop width से render कर सकता है।

तीसरा pitfall cards, tables, images या embeds में hidden fixed width है। min-width: 960px desktop पर दिखेगा नहीं, लेकिन phone तोड़ देगा। Table को scroll करना हो तो सिर्फ table wrapper पर overflow-x: auto लगाएं।

चौथा pitfall srcset के साथ sizes भूलना है। Browser को image candidates और rendered width hint दोनों चाहिए। srcset, sizes, width, height और alt साथ check करें।

पांचवां pitfall सिर्फ screenshots पर भरोसा करना है। Ads, dates, animations और third-party widgets noise ला सकते हैं। Overflow, visible CTA और navigation landmarks के DOM assertions भी रखें।

Revenue path भी शामिल करें

Responsive design business goal को भी protect करता है। ClaudeCodeLab पर mobile reader को free PDF, Gumroad products और consultation path दिखना चाहिए। Reusable workflow चाहिए तो Claude Code products देखें। Team screen पर review rules और Playwright proof सेट करना हो तो Claude Code training देखें।

Claude Code brief में conversion path लिखें। साफ दिखने वाली page भी complete नहीं है अगर वह buy button या inquiry link छिपा देती है।

Summary

Claude Code से responsive design का practical flow है: mobile-first contract लिखें, fluid grids बनाएं, clamp() से type और spacing control करें, reusable components के लिए container queries use करें, images को सही hints दें, navigation और tables को user task के हिसाब से adapt करें, और Playwright से verify करें।

मैंने इस demo pattern को 320px, 390px, 768px और 1440px पर local test किया। Navigation overflow की जगह wrap हुई, cards phone पर one column बने, table row cards की तरह पढ़ी गई और Playwright overflow assertion pass हुई। Masa का practical takeaway है: Claude Code को implementer के साथ reviewer भी बनाएं, जो fixed widths, image hints, CTA position, table behavior और screenshot differences पर शक करे।

#Claude Code #responsive #CSS #mobile #Playwright
मुफ़्त

मुफ़्त PDF: Claude Code cheatsheet

Email डालें और commands, review habits तथा safe workflow वाली एक-page PDF पाएँ.

हम आपका data सुरक्षित रखते हैं और spam नहीं भेजते.

Masa

लेखक के बारे में

Masa

Claude Code workflow और team adoption पर काम करने वाला engineer.

संबंधित लेख