Rebuild Any App That Already Makes Money (Replit + Arrfounder)

You are a senior product designer and full-stack engineer with an award-level
eye for craft. I'm giving you the URL of a live website. Probe it, understand
exactly what it does, then rebuild it as a real, fully working web app with
genuinely exceptional design. Not a static mockup, not a faithful-but-bland
clone — the real thing, elevated to the best possible version of this brand.
Reference site: [PASTE URL HERE]
PHASE 1 — Probe and understand it
Open the URL and study it properly before writing any code. Work out:
- What the product actually is: its core promise, the problem it solves, who it's for.
- The ONE core feature that makes it special — the thing people come here to do.
  Getting this right matters more than anything else.
- Every page and how the navigation connects them.
- The brand DNA, captured precisely so you can rebuild from it:
  - Exact color palette (record real hex values, note which color is dominant vs accent).
  - Typography (typeface feel, headline vs body, weights, letter-spacing).
  - Spacing rhythm, layout grid, corner radius, shadow style, iconography, imagery.
  - The overall vibe in one honest sentence.
- The copy and its tone of voice.
- The data and state involved: inputs, uploads, results, accounts, history.
PHASE 2 — Rebuild it for real
1. MAKE THE CORE FEATURE ACTUALLY WORK
- Build the main feature end to end so it genuinely functions. If it's AI-powered
  — it analyzes an uploaded image, answers a question, generates something, or gives
  a recommendation — wire it to a real AI model so it truly takes the user's input,
  processes it, and returns a real result. Never fake it with a hardcoded answer.
- Use the latest capable model. Handle real inputs, loading, and errors gracefully.
- If the product gives financial, medical, or legal output, add a short
  "for educational purposes only, not professional advice" line in the UI,
  the way the real tools do.
2. COMMIT TO A DESIGN DIRECTION (this is what makes it amazing, not generic)
- Capture the reference brand's DNA — its identity, palette spirit, and energy —
  then build the BEST possible version of it. It should feel unmistakably like the
  same brand, but sharper, more confident, more crafted. Where the original is dated,
  timid, or cluttered, improve it. Keep the product identity; raise the execution.
- Pick ONE clear aesthetic point of view and execute it with precision (e.g. refined
  minimal, editorial, warm/organic, technical/utilitarian, bold/maximal — whatever
  genuinely fits this brand). Intentionality beats intensity. Don't hedge into a
  bland average of styles.
- Establish a real design system with CSS variables and reuse it everywhere:
  - A deliberate type scale (not random sizes) with clear hierarchy.
  - A spacing scale (consistent vertical rhythm, generous whitespace).
  - Semantic color roles (background, surface, text, muted, border, accent, success,
    warning, danger) — one dominant color with sharp, sparing accents.
  - Consistent radius, border, and shadow tokens.
  - Motion tokens (durations + easing curves — no linear easing).
3. TYPOGRAPHY, ATMOSPHERE, AND CRAFT
- Choose distinctive, characterful fonts that fit the brand. Pair a display font with
  a refined body font. Do NOT use Inter, Roboto, Arial, or default system fonts.
- Give surfaces depth and atmosphere instead of flat solid fills where it fits the
  vibe: subtle gradient meshes, grain/noise, layered transparency, considered shadows.
- Sweat the details: optical alignment, tabular numbers for data, tracking on caps,
  a clear focal point per screen, deliberate contrast hierarchy.
4. MOTION AND STATES (polish that reads as "expensive")
- One well-orchestrated page load with staggered reveals beats scattered twitches.
  Add purposeful hover, focus, and press states and smooth transitions.
- Always respect prefers-reduced-motion.
- Cover every state so no screen ever feels broken or empty: loading (use skeletons,
  not just spinners), empty, error, success, hover, focus, active, disabled, and
  sensible defaults.
5. AVOID GENERIC "AI SLOP" — do NOT ship any of these:
- Default Tailwind/bootstrap blue, or purple gradients on a white background.
- Inter / Roboto / system-font stacks as the primary typeface.
- Everything centered, equal-weight cards in a plain 3-up grid, no hierarchy.
- Emoji used as UI icons (use a real icon set).
- Lorem ipsum or obviously placeholder copy.
- Timid, evenly-distributed color with no dominant tone and no real accent.
6. RESULT PRESENTATION
- Present the core feature's output in a clean, designed layout that fits the product:
  cards, labels, scores, color-coding, and a clear verdict. Make the result the hero
  moment of the whole app — the thing worth screenshotting.
7. BUILD THE WHOLE FLOW
- Recreate the supporting pages too: landing page, sign up / sign in, and wherever
  the core feature lives.
- Seed everything with realistic sample data so no screen ever looks empty.
- Fully responsive — flawless on mobile and desktop, no horizontal scroll, tap targets
  sized for thumbs.
- Accessibility is part of the craft: real contrast ratios, visible focus rings,
  keyboard navigation, semantic HTML, alt text.
- If anything is unclear, make a smart product decision and keep going. Never stop to
  ask — build the most sensible version.
8. SELF-QA BEFORE YOU CALL IT DONE (do not skip)
- Actually view your build at mobile (~390px) and desktop widths — take screenshots.
- Review them against everything above: hierarchy, spacing rhythm, font choice,
  dominant-color discipline, motion, all states, responsiveness, the anti-slop list.
- Fix what looks off. Repeat until it genuinely looks designed, not generated.
When you're done, give me a working app I can click through end to end with the core
feature fully functional, plus a short summary of what you built, the design direction
you chose and why, and how the main flow works.

Now make my version genuinely better than the original, not just prettier.
Same site, same design system, same tokens and components. This is an upgrade to the
app you just built.
STEP 1 — FIND WHAT THE ORIGINAL IS MISSING
Research the reference product and its closest competitors and work out where it
actually falls short. Look at review sites, app store reviews, Reddit threads, forum
posts, and the competitors' own feature pages. Specifically find:
- Features users repeatedly ask for that the original does not have.
- The complaints that come up again and again (too slow, too expensive, watermarks,
  hard limits, no export, no batch, no free tier, clunky on mobile).
- What every competitor offers that the original does not.
Give me a short ranked list of the gaps you found, with a one-line note on the evidence
for each. Be honest, do not invent complaints.
STEP 2 — PICK THE THREE THAT MATTER
Choose the 3 gaps with the best ratio of user demand to build effort. Prefer ones that
are adjacent to the core feature, so they feel like a natural part of the product
rather than bolted on. Tell me which 3 you picked and why.
STEP 3 — BUILD THEM PROPERLY
- Build all 3 end to end so they genuinely work, wired to a real AI model where the
  feature calls for it. No fake results, no coming-soon placeholders, no disabled
  buttons.
- Make them feel native: same design system, same motion, same states. A new feature
  must not look like a different app.
- Anything the original charges for that you can reasonably offer free, offer free,
  and make that obvious in the UI.
STEP 4 — MAKE THE DIFFERENCE OBVIOUS
- Add a section to the landing page that shows what this app does that the original
  does not. Design it properly, no raw tables.
- Work the new features into the hero copy and the pricing page, so a first-time
  visitor understands the advantage in about five seconds.
- Keep every claim accurate and checkable. Do not overstate, do not invent weaknesses
  in the original.
When you're done, list the 3 features you added, the evidence behind each, and where
they now appear in the product.

Now add a full set of comparison pages so the site can rank on Google and pull in
search traffic. These are part of the SAME site — reuse the exact design system,
tokens, fonts, and components from the app you just built. They must look every bit
as designed as the app, never like a bolted-on SEO afterthought.
RESEARCH FIRST
- Take the original brand at the URL I gave you and research the market to find 5 to 8
  real competing or alternative products in the same category. Pick the closest and
  most-searched ones.
THEN BUILD
- A comparison hub at /compare listing every comparison with a short blurb and a link.
- One comparison page per competitor at a clean slug like /compare/[competitor-name].
- One page comparing THIS app against the original brand at the URL.
MAKE EVERY COMPARISON PAGE RANK
- A keyword-targeted page title and H1, e.g.
  "[This app] vs [Competitor]: features, pricing, and which is better in 2026".
- A unique meta description and Open Graph tags per page.
- A side-by-side comparison built as a DESIGNED component (not a raw HTML table):
  key features, pricing, free option, speed, accuracy, ease of use, and pros/cons for
  each. Use the design system — clear column hierarchy, readable on mobile, tasteful
  use of the accent color and check/cross marks.
- A short honest intro and a clear verdict. Favor this app where it genuinely wins, but
  stay fair and accurate. Do NOT invent fake weaknesses — dishonest comparisons get
  penalized by Google and kill trust.
- An FAQ answering what people actually type, e.g. "Is [this app] a good [Competitor]
  alternative?" and "[Competitor] vs [this app], which is better?".
- Structured data (Product, FAQPage, BreadcrumbList) so pages can earn rich results.
- A clear, well-designed CTA on every page sending the reader to sign up and try the
  core feature.
- Internal links from the landing page to the hub, and between the comparison pages.
Target the searches people actually make: "[brand] alternative", "[brand] vs
[competitor]", "best [category] tool", and "[competitor] alternatives".
Also tidy up SEO across the whole site: semantic HTML, fast load, a descriptive title
and meta description on every page, a sitemap, and clean readable URLs.