Introduction
In modern web development, the gap between a static design mockup and a fully responsive, pixel-perfect HTML/CSS implementation is often where projects stall. Developers waste hours tweaking Flexbox parameters, debugging Grid gaps, or rewriting animation keyframes. AI assistants, when prompted correctly, can eliminate this friction. This article compiles ten battle-tested prompts I use daily for HTML/CSS layout, covering Flexbox, CSS Grid, animations, and responsive design. Each prompt includes a real-world example and the exact output you can expect.
1. Generate a Complex Flexbox Layout from a Text Description
Prompt: "Create a responsive Flexbox layout for a dashboard header: logo on the left, a search input centered, user avatar and notification bell on the right. Use flex-grow for search, max-width 1200px, and wrap on small screens."
Why it works: The prompt specifies alignment, flex properties, and breakpoint behavior. AI generates clean HTML and CSS with media queries.
Example output snippet:
<header class="dashboard-header">
<div class="logo">Logo</div>
<input class="search" type="text" placeholder="Search...">
<div class="user-actions">
<span>🔔</span>
<img src="avatar.jpg" alt="User">
</div>
</header>
.dashboard-header {
display: flex;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.search { flex-grow: 1; margin: 0 1rem; }
@media (max-width: 768px) {
.dashboard-header { flex-wrap: wrap; }
.search { order: 3; flex-basis: 100%; }
}
2. Convert a Literal Grid Layout from a Screenshot Description
Prompt: "Describe a CSS Grid layout with three columns: left sidebar (200px), main content (1fr), right sidebar (200px). On tablet, collapse left sidebar under main. On mobile, stack all vertically. Include grid-gap: 16px."
Why it works: The prompt defines explicit column widths, responsive breakpoints, and gap. AI outputs a complete grid container with named areas.
Example output:
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 200px;
gap: 16px;
}
@media (max-width: 1024px) {
.grid-layout {
grid-template-columns: 1fr 200px;
}
.sidebar-left { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
.grid-layout {
grid-template-columns: 1fr;
}
}
3. Create a Reusable Button Component with Hover and Focus States
Prompt: "Write CSS for a primary button with a gradient background, hover state that shifts gradient, focus ring with box-shadow, and a disabled state with reduced opacity. Use custom properties for colors."
Why it works: The prompt requests specific interactive states and CSS custom properties, enabling easy theming.
Example output:
:root {
--btn-bg-start: #667eea;
--btn-bg-end: #764ba2;
--btn-focus-color: #667eea;
}
.btn-primary {
background: linear-gradient(135deg, var(--btn-bg-start), var(--btn-bg-end));
border: none;
padding: 12px 24px;
color: white;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--btn-bg-end), var(--btn-bg-start));
}
.btn-primary:focus-visible {
outline: none;
box-shadow: 0 0 0 4px var(--btn-focus-color);
}
.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
4. Build a Keyframe Animation for a Loading Spinner
Prompt: "Generate a pure CSS loading spinner using keyframes. The spinner should be a circle with a border, rotating infinitely. Add a gradient to the border and make it 40px wide. Use a custom property for animation speed."
Why it works: The prompt defines shape, size, color, and animation parameters in a single request.
Example output:
.spinner {
width: 40px;
height: 40px;
border: 4px solid #e0e0e0;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin var(--spin-speed, 0.8s) linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
5. Generate a Responsive Card Grid with Hover Effects
Prompt: "Create a responsive card grid using CSS Grid with auto-fill and minmax(250px, 1fr). Each card has an image, title, description, and a button. On hover, the card should lift with box-shadow and a slight scale transform. Use transition."
Why it works: The prompt combines layout, component structure, and interaction in one request.
Example output:
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 24px;
}
.card {
background: white;
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
6. Write a Responsive Navigation Bar with Hamburger Menu
Prompt: "Build a responsive top navigation bar: logo left, links right. On mobile (below 768px), hide links and show a hamburger icon. Include CSS for the toggle with a checkbox hack. Use flexbox."
Why it works: The prompt specifies a common pattern with a specific breakpoint and a pure CSS toggle method.
Example output:
<nav class="navbar">
<div class="logo">SiteName</div>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<label for="nav-toggle" class="hamburger">☰</label>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
.navbar { display: flex; justify-content: space-between; align-items: center; }
.nav-links { display: flex; list-style: none; gap: 1rem; }
.nav-toggle, .hamburger { display: none; }
@media (max-width: 768px) {
.hamburger { display: block; }
.nav-links {
display: none;
flex-direction: column;
width: 100%;
}
.nav-toggle:checked ~ .nav-links { display: flex; }
}
7. Create a Custom Scrollbar with CSS
Prompt: "Write CSS for a custom scrollbar: thin, rounded, with a gradient thumb and semi-transparent track. Support both light and dark themes using prefers-color-scheme."
Why it works: The prompt requests a specific pseudo-element implementation with theme support.
Example output:
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 10px; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #667eea, #764ba2);
border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
}
8. Generate a CSS-Only Tooltip on Hover
Prompt: "Create a CSS-only tooltip that appears above an element on hover. The tooltip should have an arrow pointing down, use a dark background, and fade in with a transition. Use a data-tooltip attribute."
Why it works: The prompt uses attribute selectors and pseudo-elements for a no-JavaScript solution.
Example output:
[data-tooltip] {
position: relative;
cursor: pointer;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 6px 12px;
border-radius: 6px;
opacity: 0;
transition: opacity 0.2s;
white-space: nowrap;
}
[data-tooltip]:hover::after { opacity: 1; }
[data-tooltip]::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #333;
opacity: 0;
transition: opacity 0.2s;
}
[data-tooltip]:hover::before { opacity: 1; }
9. Write a Responsive Form Layout with Grid
Prompt: "Create a responsive form layout using CSS Grid. Two columns on desktop (label + input stack), single column on mobile. Include a full-width submit button. Use gap: 16px."
Why it works: The prompt defines a common form pattern with explicit responsive behavior.
Example output:
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-grid .full-width { grid-column: 1 / -1; }
@media (max-width: 768px) {
.form-grid { grid-template-columns: 1fr; }
}
10. Debug a Specific Flexbox or Grid Issue
Prompt: "I have a Flexbox container with three items. The middle item has flex-grow: 1, but the items overflow horizontally on small screens. How do I fix it? Provide CSS."
Why it works: The prompt describes the exact problem, allowing AI to diagnose and suggest a fix (e.g., add min-width: 0 or overflow: hidden).
Example fix:
.flex-container {
display: flex;
overflow: hidden;
}
.flex-item {
min-width: 0;
}
Conclusion
These ten prompts cover the majority of daily layout tasks: from flex and grid structures to animations and responsive patterns. By being specific about properties, breakpoints, and desired interactions, you get production-ready code in seconds. Remember to always test the output for accessibility and cross-browser compatibility. The key is to treat the AI as a skilled junior developer — give it clear requirements, and it will deliver solid code.
ASI Biont поддерживает подключение к Figma через API — подробнее на asibiont.com/courses
Comments