Code / Designer

CSS Layout Generator

Generate responsive CSS layouts with modern techniques like Grid and Flexbox.

ChatGPT, Claude · 0 copies · 0 views

Customize this prompt

Fill variables before copying. Required fields stay visible in the preview until completed.

Layout type *

Framework *

What this layout is for *

Specific requirements *

CSS approach *

How to use

Describe the layout you need. Copy the code and adapt to your component structure and design tokens.

Example output

```html
<div class="grid grid-cols-[auto_1fr] grid-rows-[auto_1fr] h-screen">
  <!-- Header spans full width -->
  <header class="col-span-2 h-14 bg-white border-b flex items-center px-4">
    Dashboard
  </header>
  
  <!-- Sidebar -->
  <aside class="w-64 bg-gray-50 border-r overflow-y-auto transition-all">
    <!-- nav items -->
  </aside>
  
  <!-- Main content -->
  <main class="overflow-y-auto p-6">
    <!-- content -->
  </main>
</div>
```

Responsive: sidebar collapses to bottom sheet on mobile (< 768px)

Related prompt templates

More Designer prompts to try.

Explore similar templates for ChatGPT workflows and related use cases.

DesignerChatGPT

UX Writing Microcopy

Write clear, helpful microcopy for UI elements, error states, and empty states.

Write UX microcopy for {{product}} — a {{product_description}}. Feature/context: {{feature}} Tone: {{tone}} Provide copy for: 1. Empty state (no data yet) 2. Error state (something went wrong) 3. Success confirmation 4. Loading state message 5. Tooltip/help text 6. CTA button text (primary + secondary) 7. Confirmation dialog Rules: - Be specific, not generic - Use active voice - Keep under 10 words for UI elements - Include a helpful action where possible - Match the {{tone}} tone

DesignerChatGPT

Anti-AI-Slop Frontend Design

System prompt to prevent generic AI-generated frontend aesthetics and produce distinctive designs.

<frontend_aesthetics> You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight. Focus on: - Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter. - Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid pale...