Claude Prompt to Build Responsive CSS Layouts

What this prompt does

This prompt drives an AI assistant to produce a complete, deployment-ready responsive layout rather than a teaching example. The template forces you to specify your exact CSS approach (pure CSS, Tailwind, CSS Modules), your three breakpoints, and your browser support floor upfront — so the output matches your actual project constraints instead of some generic tutorial baseline.

The eight required output sections work together. Asking for CLS handling, edge cases, and container queries in the same request means the AI cannot stop at the happy path. You get overflow handling, empty states, and RTL support as part of the first response, not as follow-up patches.

The "production-ready code, not a tutorial" instruction at the end is load-bearing. It signals to the model to suppress explanatory prose and inline comments teaching basics, keeping the output dense and immediately usable.

When to use it

• You are building a card grid that needs to reflow from 1 to 2 to 4 columns without cumulative layout shift on page load.
• You need a sidebar + content layout that collapses to a stacked mobile view and you want the container query version, not a viewport-width hack.
• You are migrating a legacy float-based layout to modern CSS Grid and need a tested, accessible structure fast.
• Your design system requires dark mode support and you want the color token logic baked into the layout CSS from the start.
• You are prototyping a dashboard with dynamic content (rows added via Livewire or React) and need overflow and minimum-content states handled.
• You are targeting a specific browser support floor (say, Safari 16+) and need to know which CSS features are safe without a polyfill.

Example output

For layout_type: "product card grid", css_approach: "CSS Grid + custom properties", mobile_bp: 320px, tablet_bp: 768px, desktop_bp: 1280px, framework: "none", browser_support: "last 2 versions":

/* Mobile-first grid */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  container-type: inline-size;
}

@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Container query: card reflows when its container is narrow */
@container (max-width: 300px) {
  .card__meta { flex-direction: column; }
}

/* Subtle breakpoint transition — no layout-triggering properties */
.card {
  transition: box-shadow 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  .card-grid { --card-bg: #1e1e2e; --card-border: #2e2e4e; }
}

The AI also returns the matching semantic HTML, breakpoint-by-breakpoint behavior notes, and RTL-safe logical property variants (margin-inline-start instead of margin-left) for the edge-cases section.

Pro tips

• Set browser_support precisely. "Modern browsers" gives the AI permission to use features you cannot ship. "last 2 Chrome/Firefox/Safari versions, no IE" produces tighter, more accurate code.
• Use css_approach: "Tailwind" only if your project already has Tailwind configured. Mixing Tailwind utilities with arbitrary @apply in a non-Tailwind project creates build errors the AI will not warn you about.
• The container query output is opt-in. If your layout is page-level (viewport-driven), explicitly note "no nested contexts" in layout_description so the AI does not add container queries where they add no value.
• Pair this prompt with a real CLS audit. Run Lighthouse after pasting the output. The prompt requests CLS-safe code but the AI cannot measure your actual font loading or image dimensions — those are your responsibility.
• For RTL support, add dir="rtl" to your layout_description. The prompt already asks for RTL edge cases, but it needs to know your text direction to generate logical properties (margin-inline-start vs margin-left) correctly.