Frontend Development Prompts: HTML, CSS & JavaScript

Frontend code is uniquely sensitive to context: a class name that fits one project breaks another, a CSS reset that helps one codebase wrecks another. Strong frontend prompts start by telling the AI what stack, conventions, and design tokens are already in play.

1. Introduction

Generating frontend code is one of AI's clear strengths — markup, layout, interactivity are all heavily represented in training data. The challenge is that "good frontend code" depends entirely on the project: vanilla HTML, plain CSS, Tailwind, a component library, a design system. Without that context, the AI defaults to a stack of its own choosing and the output rarely slots in cleanly.

2. The Concept Explained

Frontend has three intertwined layers: HTML for structure, CSS for presentation, JavaScript for behaviour. A good prompt treats them as a layered system — semantics first, styling second, behaviour third — and tells the AI which layer it is generating and what already exists in the other two.

The mental model is "start with the page working without CSS, then without JavaScript, then with everything". AI naturally writes the all-three-at-once output. Force it to think layer-by-layer and the result becomes more accessible, more testable, and easier to debug.

3. The Problem Without This Technique

The common prompt is "build me a card component". Without stack or design context, the AI invents both — usually with inline styles, divs instead of semantic elements, and a colour palette pulled from thin air.

build me a responsive product card component

4. The Solution

Stack: React 18 + TypeScript, Tailwind CSS 3.
Design tokens already configured in tailwind.config.js:
  colors: { brand: { 500: '#16a34a' }, surface: '#ffffff', text: '#0f172a' }
  fontFamily: { sans: ['Inter', 'sans-serif'] }

Component: ProductCard

Props:
  {
    name: string,
    priceCents: number,
    currency: 'INR' | 'USD',
    imageUrl: string,
    inStock: boolean,
    onAddToCart: () => void
  }

Structure (semantic HTML):
- Use <article> as the outer element
- Image inside a <figure> with alt text from `name`
- Price formatted with Intl.NumberFormat (locale 'en-IN' for INR, 'en-US' for USD)
- "Out of stock" state replaces the button with a disabled button labelled
  "Out of stock"; button must have aria-disabled when disabled

Styling:
- Tailwind utility classes only, no custom CSS
- Card max-width 320px, rounded-xl, subtle shadow on hover
- Responsive: image aspect-square on mobile, 4:3 on tablets and up

Behaviour:
- onAddToCart fires only when in stock
- Keyboard focusable button with visible focus ring

Output: only the component file. No story, no test, no docs.

5. Step-by-Step Breakdown

1. Declare the stack precisely. "React 18 + TypeScript + Tailwind 3" gives different output than "Vue 3 + SCSS + BEM". One sentence saves dozens of edits.
2. Share your design tokens. Colour, font, spacing scale. Paste the relevant slice of tailwind.config.js or your CSS variables. Without this, the AI guesses your palette.
3. Lead with semantics. Say which HTML element belongs at each level. Forcing article, figure, button guides the AI away from div soup.
4. Specify the responsive and accessibility behaviour. Breakpoints, focus rings, ARIA attributes, keyboard handling. These are the parts most likely to be missing.
5. Pin down the props and event interfaces. The contract for the component should be in the prompt, not invented by the AI.
6. Demand utility classes or scoped styles, not inline. Inline styles are an instant lint failure in most modern frontends. Be explicit.

Tip: If your project uses a component library (MUI, Chakra, shadcn/ui), paste a real example of an existing component from your codebase. The AI will mimic its structure faithfully — much better than describing the conventions in words.

6. Practice Exercises

7. Key Takeaways