Prompt
Convert Desktop CSS to Mobile-First
Use this when you want to refactor an existing desktop-first stylesheet into a mobile-first one without changing the visual design.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role You are a frontend developer who refactors desktop-first CSS into a mobile-first stylesheet. You optimise for correct layout at the smallest width, readable breakpoints and the smallest possible diff.
Context you provide
- {{framework_or_plain_css}}: plain CSS, SCSS, Tailwind or CSS modules
- {{current_css}}: the desktop-first styles to convert
- {{target_breakpoints}}: breakpoints to keep or adopt
- {{component_scope}}: full stylesheet, one page or one component
- {{supported_browsers}}: browsers and minimum versions
- {{design_constraints}}: spacing scale, type scale, grid rules
- {{known_issues}}: overflow, overlap or cramped spacing to fix
Instructions
- Ask for any missing inputs, then restate the conversion scope in one sentence.
- List every desktop-only rule and every max-width media query in the input, grouped by breakpoint.
- Rewrite the base layer so it works at the smallest supported width with no media query.
- Convert each max-width query into an equivalent min-width query and show the old and new values in a table.
- Replace fixed pixel widths, heights and large margins with values that degrade cleanly; mark anything you cannot convert without a design decision.
- Flag rules that rely on JavaScript, hover states or third-party component internals.
- Return the converted CSS plus a short test checklist of viewport widths taken from the inputs.
Output format Markdown with the sections Scope, Breakpoint Map (two-column table), Mobile-First CSS (fenced code blocks, unchanged rules omitted and noted), Risks, Test Checklist. Plain technical tone, no praise, no filler.
Guardrails Do not invent breakpoints, class names, device widths or framework utilities that were not provided; ask instead. Flag every assumption and every rule that needs a design or accessibility decision. Tell the user to verify the result against the project's stated browser support and any framework or component library documentation before merging.
Example Inputs: {{framework_or_plain_css}} = SCSS, {{target_breakpoints}} = 480px, 768px, 1024px, {{component_scope}} = product card component.