Make It Pretty

My app looks generic, like a default AI-generated design. Help me find and replace the generic patterns. Keep all functionality exactly the same.

App: [APP IDEA]
Who it's for: [TARGET USER]
3 words for how it should feel: [3 WORDS FOR HOW IT SHOULD FEEL]
[ATTACH SCREENSHOT OR TAG MAIN PAGE FILES]

Please:
1. List the generic patterns you see, for example: default gradients, everything centered, identical card grids, emoji used as icons, the same font weight everywhere, a stock "hero + 3 features" layout, vague headings like "Powerful features".
2. For each one, suggest a specific replacement that fits my 3 words and my audience.
3. Suggest ONE distinctive element that could make it recognizable (for example a signature color, an illustration style, an unusual layout for one section, or a playful detail).
4. Apply the top 5 changes, one area at a time, and list the files you changed.
5. Make sure text contrast stays accessible.

Before we change any code, help me choose a visual direction for my app.

App: [APP IDEA]
Who it's for: [TARGET USER]
What I want people to feel: [FEELING]
Anything I already know I want or don't want: [ANYTHING I ALREADY KNOW I WANT OR DON'T WANT]

Please give me 3 different directions. For each one:
1. A short name and a one-sentence description of the vibe.
2. A color palette: background, surface, text, primary, accent, with hex codes, and a note on contrast.
3. A font pairing (free fonts, such as from Google Fonts) and why it fits.
4. Corner radius, shadow style, and icon style.
5. One example of how a button and a card would look, described in words.
6. Who this direction suits best and the risk of choosing it.

Then ask me which one I want, and wait. Once I choose, set it up as CSS variables or theme config without changing any layout or functionality yet.

Audit the spacing and alignment on this screen and fix it. Don't change functionality or colors.

[ATTACH SCREENSHOT OR TAG FILES]
Styling approach: [STYLING APPROACH]

Please:
1. List specific problems: inconsistent gaps between similar elements, items that almost line up but don't, text running too wide to read comfortably, sections with no breathing room, and padding that differs between similar cards or buttons.
2. Set one spacing scale (for example multiples of 4px or 8px) and show it as CSS variables or Tailwind config.
3. Group related things closer together and separate unrelated things more, and explain this rule in one sentence.
4. Limit the width of body text to a comfortable reading length.
5. Apply the fixes and list each change with a one-line "why".

Fix the typography hierarchy in my app so it's clear what matters most on each screen.

[ATTACH SCREENSHOT OR TAG FILES]
Current fonts: [FONTS OR "NOT SURE"]

Please:
1. Tell me what a visitor's eye lands on first, second, and third right now, and what it SHOULD land on.
2. Create a small type scale (for example page title, section heading, card title, body, small text) with size, weight, line height, and letter spacing for each.
3. Use weight and color (not just size) to separate levels, and keep to a maximum of 2 fonts.
4. Check line height and paragraph spacing for long text.
5. Apply it across my screens, make sure text stays readable on mobile, and list the files changed.

My app is responsive, but it still has problems on real phones. Check for these specific issues and fix any you find. Keep desktop exactly the same.

Tech stack: [TECH STACK]
Phones I've tested: [PHONES I'VE TESTED]
Problems I've noticed: [DESCRIBE OR "NOT SURE"]

Check for:
1. Full-height sections that jump or get cut off when the browser's address bar shows or hides (explain the newer viewport units like dvh/svh and when to use them).
2. The on-screen keyboard covering inputs or the submit button.
3. Inputs that make the page zoom in on iPhone when tapped (font size too small).
4. Content hidden under the notch or home bar (safe areas) in full-screen layouts.
5. A single element causing sideways scrolling. Tell me how to find it in DevTools.
6. Hover-only effects or menus that don't work with touch.
7. Wide tables, code blocks, or images that overflow.
8. Fixed headers or bottom bars covering content.

For each issue found: the cause, the fix, and how to test it on a real phone.

Go through every screen in my app and audit its states. Don't change code yet.

App: [APP IDEA]
Screens: [LIST OR "PLEASE FIND THEM"]
Tone of voice: [TONE OF VOICE]

Please make a table with one row per screen and columns for:
- Empty (first use, no data yet)
- Loading
- Error (network fails, server error, not allowed)
- Success (after an action)
- Partial or edge cases (one item, hundreds of items, very long names, missing images)

For each cell: does it exist today (yes/no/bad), and the exact text it should show, written in my tone. Every empty state should tell the user what to do next. Every error should say what happened and what they can do.

Then list the 5 most important gaps, and fix them one at a time when I say go.

Improve the user experience of this form. Keep the same fields and backend behavior.

[TAG FORM FILE OR ATTACH SCREENSHOT]
What the form is for: [PURPOSE]

Please:
1. Make sure every field has a visible label (not just placeholder text) and the right input type (email, tel, number) so phones show the right keyboard.
2. Show errors next to the field, in plain words that say how to fix it, and only after the user leaves the field or submits.
3. Disable the submit button and show "Saving..." while it submits, so it can't be clicked twice.
4. Keep what the user typed if submitting fails.
5. Show a clear success message or next step after submitting.
6. Check keyboard use: Tab order makes sense, Enter submits, and focus is visible.
7. Remove any field that isn't really needed, and tell me which ones you'd cut.

Rewrite the copy on my landing page so it's clear and specific. Keep the layout the same for now.

Product: [WHAT IT DOES]
Who it's for: [TARGET USER]
The problem they have, in their own words: [THE PROBLEM THEY HAVE, IN THEIR OWN WORDS]
What makes it different: [DIFFERENCE]
Facts I can use: [PRICE, FEATURES, ANY REAL DETAILS]
[PASTE CURRENT COPY OR TAG THE FILE]

Please:
1. Flag vague phrases and buzzwords in my current copy (for example "revolutionary", "seamless", "powerful", "all-in-one") and explain why each one is weak.
2. Rewrite each section in plain words, using my audience's own phrases where they fit.
3. Make every heading say something specific a reader can picture.
4. Use only the facts I gave you. Don't invent numbers, user counts, reviews, testimonials, or logos. If a section needs proof I don't have, leave a clearly marked placeholder.
5. Show old and new copy side by side.

Write 3 different versions of my landing page hero section.

Product: [WHAT IT DOES]
Who it's for: [TARGET USER]
Main result they get: [OUTCOME]
Main action I want: [MAIN ACTION I WANT]

For each version:
1. Use a different angle: (a) the problem they have, (b) the result they get, (c) what makes it different.
2. A headline (under 10 words), a subheadline (1-2 sentences that say what it is and who it's for), and button text that says what happens when you click it.
3. A one-line note on when this angle works best.

Rules: no buzzwords, no made-up numbers or claims. Then tell me which you'd pick and why, and build my choice into my hero section when I confirm.

Do an honest teardown of my landing page, as if you were a first-time visitor who has never heard of my product. Don't change anything yet.

Page URL or files: [URL / TAG FILES / SCREENSHOT]
Who it's for: [TARGET USER]
The one action I want visitors to take: [ACTION]

Please answer:
1. In the first 5 seconds, can a visitor tell what this is, who it's for, and what to do? Quote what they'd see.
2. Is the order logical? A common flow is: what it is, the problem, how it works, what you get, proof (only if real), price, FAQ, final call to action.
3. Where would a visitor get confused, bored, or doubtful? Be specific.
4. Are there too many competing buttons or links?
5. What questions would they still have before buying or signing up?
6. How does it look and read on a phone?

End with a top-5 fix list ordered by likely impact, and say which prompt in this pack helps with each.