Improve UI
Improve UI Without Breaking Layout
Ask the agent to polish a screen using existing design tokens, with mobile and dark mode in the same pass.
The Prompt
improve-ui-without-breaking-layout.md
Improve this UI in place. Use the design system already in the repo (tokens, components, spacing). Do not introduce a new visual language. Screen / component: {{screen}} Problems I see: {{problems}} Must keep: {{keep}} Do this: 1. Read the existing components and global styles first 2. Fix the listed problems 3. Check mobile, tablet, and desktop 4. Check light and dark if a theme exists 5. Preserve behaviour and copy unless copy is part of the problem Deliver a short before/after of what changed and which files. No drive-by page rewrites.
Negative prompt
Included when you copy the prompt
Do not introduce a new visual language, colour palette, or component library. Do not rewrite unrelated pages or "refresh the whole app." Do not change copy or behaviour unless {{problems}} requires it. Do not ignore mobile, tablet, or existing dark/light theme. Do not break {{keep}} layout or branding constraints. Do not use one-off magic numbers that fight the design tokens already in the repo.
Fill in your details below - this prompt updates as you type, then copy it.
Fill in your details
0 of 3 filled. Preview updates as you type - then copy the finished prompt (negative prompt included when present).
improve-ui-without-breaking-layout.md
Prompt preview
Improve this UI in place. Use the design system already in the repo (tokens, components, spacing). Do not introduce a new visual language. Screen / component: {{screen}} Problems I see: {{problems}} Must keep: {{keep}} Do this: 1. Read the existing components and global styles first 2. Fix the listed problems 3. Check mobile, tablet, and desktop 4. Check light and dark if a theme exists 5. Preserve behaviour and copy unless copy is part of the problem Deliver a short before/after of what changed and which files. No drive-by page rewrites.
Examples
Example input
Screen: Prompt detail page header (PromptHeader.tsx) Problems: Title wraps under the copy button on tablet; primary CTA has low contrast in dark mode; spacing between tags and title is tighter than other pages. Must keep: Existing max-width layout, logo, and current heading hierarchy.
What you should get
Before: flex row without wrap gap; CTA used text-primary on dark bg; space-y-1 under title. After: flex-wrap with gap-3 aligned to token spacing; CTA uses existing button-primary token (passes contrast); tag row uses same gap as category pages. Files: PromptHeader.tsx, minor class tweaks only - no new CSS file, no other routes touched. Verified: 375 / 768 / 1280 widths; light and dark themes.
When to use this prompt
Use it when
- You need help with frontend engineers.
- You need help with design-minded founders.
Skip it when
- You only need a one-line ask with no constraints, format, or context.
- You cannot supply the fill-in details the template asks for.
- A different category or tool-specific workflow fits the job better.
How to get a good result
Done when
Before: flex row without wrap gap; CTA used text-primary on dark bg; space-y-1 under title. After: flex-wrap with gap-3 aligned to token spacing; CTA uses existing button-primary token (passes contrast); tag row uses same gap as category pages. Files: PromptHeader.tsx, minor class tweaks only - no new CSS file, no other routes touched. Verified: 375 / 768 / 1280 widths; light and dark themes.
Common mistakes
- Leaving screen, problems, keep vague - the model then invents placeholders.
- Asking Cursor or Claude for a shorter answer after a long structured prompt - that throws away the format rules.
- Stopping when the first draft appears instead of checking it against the success criteria below.
FAQ
- What do I fill in before I copy this prompt?
- Replace these placeholders with your details: screen, problems, keep. Required fields are marked on the page. The prompt text updates as you type.
- Which AI tools is this prompt written for?
- It works best with Cursor, Claude. Copy the filled prompt and paste it into the tool you already use.
- What should a good result look like?
- Before: flex row without wrap gap; CTA used text-primary on dark bg; space-y-1 under title. After: flex-wrap with gap-3 aligned to token spacing; CTA uses existing button-primary token (passes contrast); tag row uses same gap as category pages. Files: PromptHeader.tsx, minor class tweaks only - no new CSS file, no other routes touched. Verified: 375 / 768 / 1280 widths; light and dark themes.
- What are common mistakes with this prompt?
- Leaving screen, problems, keep vague - the model then invents placeholders. Asking Cursor or Claude for a shorter answer after a long structured prompt - that throws away the format rules. Stopping when the first draft appears instead of checking it against the success criteria below.
Best for
- Frontend engineers
- Design-minded founders
Related Prompts
More prompts like this — same topic and style.