I Scored 53/100 on My Own Website. Here's Every Fix Floto Gave Me.

There is a moment every AI-built site hits. It works. It looks good on your screen. You have stared at it for two weeks and every pixel looks fine. That is the trap: it looks fine to you, because you built it and your eye stopped seeing it around day three.

The person who lands on it for the first time has none of your context. They see the spacing you went numb to, the button you know matters but they do not, the section that repeats and makes the page feel broken. You cannot un-know your own site enough to catch that. You need an outside read, and then a disciplined way to act on it.

This guide is the full loop:

1. Build the site (with AI).
2. Audit the live page with Floto.
3. Understand why each issue was flagged.
4. Prioritise: critical, then major, then minor.
5. Generate the fix prompt for one issue.
6. Give it to your coding agent (Claude Code / Cursor / Codex).
7. Review the change before you accept it.
8. Implement the smallest correct fix.
9. Verify in the browser.
10. Re-audit, and repeat until the issues that matter are gone.

1. You built the website. Now get it reviewed.

AI got very good at building a decent-looking site fast. Type a prompt, get a hero, some sections, a CTA. Shipping it is not the finish line, though. A finished site needs a review the same way finished code needs one.

Getting that review normally means paying for a UX audit, waiting for a designer friend to have a spare afternoon, or posting it somewhere and hoping useful replies come back. All slow. So most solo builders skip it and ship on "looks good to me."

Design problems on a live page are not opinions. Most are measurable: font sizes too small to read on a phone, whitespace big enough that people think the page ended, a primary button visually smaller than the decoration around it. You just cannot see them any more. An audit tool can.

2. What is Floto?

Floto is an AI design-feedback tool. It runs audits on your work and gives you the "why" behind what is broken, plus a fix you can act on. It comes in two forms: a Figma plugin, and a Chrome extension. This guide is about the extension, which audits live web pages.

Current product, verified from floto.ai and the Chrome Web Store listing (extension last updated 26 Aug 2026). Capabilities change — check the official pages before you rely on any specific feature.

What the Chrome extension does

Its tagline: "Audit web pages, compare designs, and turn issues into actionable fixes." On any page you are on, it runs three kinds of audit:

• Usability — confusing interactions and UX issues.
• Copy — unclear or inconsistent interface text.
• Accessibility — barriers that stop people using the page.

Then it highlights each problem directly on the page, and for every issue it generates a detailed fix prompt you can paste into "Cursor, Claude Code, Figma Make, or your preferred LLM or coding agent" (their words). It also pushes issues to Jira and Linear if you use those.

The wider Floto toolkit (mostly the Figma side)

You do not need these for the workflow in this guide, but they exist and are worth knowing:

• Design Audit — your design critiqued in seconds, with the reasoning. This is the usability / copy / accessibility engine.
• Persona Testing — feedback from synthetic personas, so you see the design through a specific user's eyes.
• Flow & Prototype Testing — test how users move through a prototype.
• Missing States — finds states and scenarios your flow forgot (empty, error, loading, etc.).
• Design Diff — checks that what got shipped matches what was designed.

Pricing at the time of writing: a free tier with 200 credits a week, then Pro at $10/month for 1,500 credits. A live-page usability audit is well inside the free allowance.

3. Install Floto

1. Open the Chrome Web Store listing: Floto: Design Feedback.
2. Click Add to Chrome, then confirm. Pin it to your toolbar so it is one click away.
3. Create a free account when it prompts you (this is what tracks your weekly credits).
4. For the full product and docs, the home base is floto.ai.

That is the whole setup. No config, no project to create.

4. Run your first website audit

1. Open the live or staging version of your site — the real rendered page, not a screenshot or a local file. Floto audits what a visitor actually sees, animations and all.
2. Let the page fully load.
3. Click the Floto icon in your toolbar.
4. Pick the audit you want. For a first pass, usability is the highest-signal one.
5. Run it and wait. It scans the rendered DOM and returns in under a minute.
6. Read the score first for a gut check, then move straight to the issue list.
7. Open individual issues. Each one names the element, the CSS selector it was found on, a severity, a category, and a short reason.

5. My real website audit

I ran the usability audit on my own homepage, codewithnishant.vercel.app. Here is exactly what came back.

Audit type: Usability · Usability heuristics. Twelve of the fifteen were minor. Below, Floto's own numbering is kept. Each issue: what Floto found, why it matters, what I would fix, and where AI helps.

The typography cluster (issues 1–9)

Floto found: one page rendered 27 distinct font sizes (issue 1 — a tidy interface usually stays under 10); five headings and labels were set in long runs of all-caps (issues 2, 3, 4, 5, 7 — slower to read than sentence case); and three supporting labels sat at 10–11px (issues 6, 8, 9 — below ~12px is hard to read, especially on mobile).

Why it matters: no shared type scale is the single biggest "this feels amateur" signal. Tiny labels are a straight accessibility problem. Long all-caps phrases add reading friction to exactly the elements meant to be skimmed.

How AI helps: "List every distinct font-size in the stylesheet. Propose a scale of about 8 tokens as CSS custom properties, map the existing values onto it, and show me the diff before changing anything."

The spacing cluster (issues 13–14)

Floto found: over 600px of dead whitespace between the "Common questions" heading and the footer links (issue 13 — a "false bottom" where people think the page ended); and in one section the large left-hand headings did not share a top edge with the right-hand content cards (issue 14 — the section felt disorganised).

Why it matters: a false bottom loses everyone who does not scroll past it — including the footer nav and any final CTA. Misaligned columns read as "unfinished" even when every element is fine on its own.

How AI helps: "Measure the vertical gap between the FAQ section and the footer links. Reduce it to about 120px by trimming section padding, not by adding new elements. Then top-align the heading and cards in the work section."

Affordance (issue 15)

Floto found: the "Read the full case study" links were small and had no button weight, so they read as footnotes rather than the primary path to deeper content.

Why it matters: if the link to your best proof looks like fine print, most people never click it.

6. Don't fix everything at once

Fifteen issues is not fifteen tasks for today. Triage by severity first:

• Critical — fix first. It is actively breaking trust or usability.
• Major — fix next. It measurably hurts hierarchy, clarity, or conversion.
• Minor — fix when it is cheap and you are already in that file.

Then, within a severity band, weigh:

• User impact — does a real visitor hit this?
• Conversion impact — is it on the path to the action you want?
• Accessibility — treat these as one band up from wherever Floto put them.
• Hierarchy and clarity — does it change what the page appears to be about?
• Consistency — is it one instance of a pattern you can fix everywhere at once?

7. The best part: Floto gives you a fix prompt

A score tells you the site has problems. It does not fix anything. The reason the audit is worth two minutes is the next step: every issue comes with a prompt written for a coding agent, and Floto also generates one combined prompt for the whole report.

Mine opened like this — this is the real header text, not a paraphrase:

You are an expert front-end engineer. Below are 15 usability issues
(Usability heuristics) found on a live web page. For each one, identify
the root cause and propose a concrete, minimal code fix — HTML, CSS,
ARIA or copy as appropriate — that stays consistent with the existing
markup and keeps the page accessible. Work through them issue by issue,
keeping the same numbering.

Page: Nishant Gupta — AI Systems Architect
URL: https://codewithnishant.dev/
Audit: Usability · Usability heuristics · 15 issues

[each of the 15 issues follows, with its selector, severity,
category, and the exact element it was found on]

What makes that a good fix prompt, and what to look for in any auditing tool's output:

• It identifies the problem in one line.
• It names the affected area — the element and the CSS selector.
• It explains why it matters, so the agent optimises for the right thing.
• It gives implementation direction without dictating exact code.
• It sets constraints: "minimal", "consistent with existing markup", "keeps the page accessible". Those three words are what stop the agent rewriting half your CSS to fix a spacing value.

8. Give the fix prompt to your coding agent

This works with Claude Code, Cursor, Codex, or any agent that can read your repo. The mistake is pasting the whole report and saying "do everything". You get a giant unreviewable diff and no idea what changed.

Do this instead, one issue at a time:

1. Give the agent the single issue — the finding, the selector, Floto's reason.
2. Ask it to inspect the existing implementation before proposing anything.
3. Ask it to identify the actual cause in your code, not just the symptom Floto saw.
4. Ask for the smallest appropriate fix — HTML, CSS, ARIA, or copy — consistent with the existing markup.
5. Review the proposed change. Read the diff. Is it minimal? Did it touch only this issue?
6. Implement it.
7. Verify in the browser — the real page, desktop and mobile.
8. Re-run Floto when you have a logical group of fixes done.

Here is one issue from a Floto usability audit of my site.

[paste: the issue title, severity, category, selector, element,
and Floto's explanation]

Do this, in order:
1. Inspect the real code, starting from the selector above. Do not
   change anything yet.
2. Tell me the actual root cause in my codebase (not just the symptom).
3. Propose the smallest fix — HTML / CSS / ARIA / copy — that is
   consistent with the existing markup and keeps the page accessible.
4. Show me the exact diff and nothing else. Do not touch unrelated
   styles, components, or sections.
5. In two lines: what changed, and why it fixes the issue.

Then wait for my go before applying.

This connects to how I run any AI change: the agent proposes, I decide. If I cannot say in a sentence what the fix does and why, I do not accept it. A spacing fix that touches one rule is fine. A spacing fix that refactors the grid is not — push back.

9. The website feedback loop

One audit is not the end. The loop is the useful part:

Floto audit
   |
   v
a finding  ->  its fix prompt
   |
   v
Claude Code / Cursor / Codex   (inspect -> propose -> you review)
   |
   v
code change
   |
   v
browser verification   (desktop + mobile, the real page)
   |
   v
Floto again   ->  did the score move? any NEW issue introduced?
   |
   v
next finding  (repeat until the ones that matter are gone)

Re-auditing matters for two reasons. First, it confirms the fix actually landed the way you think it did. Second, a fix can introduce a new issue — enlarge a CTA and you might create a contrast or spacing problem next to it. The re-audit catches that before your visitors do.

10. Tips for getting better results

• Audit the live or staging page, not a screenshot or a local dev file with half its assets missing.
• Fix critical usability before cosmetic polish.
• Do not chase the score. Read why Floto flagged something before you act.
• Check the actual page before accepting any AI fix. "The CSS changed" is not "the issue is fixed".
• Make one logical group of changes at a time, then re-audit.
• Keep accessibility issues one band higher in priority than wherever they landed.
• Check mobile separately — a fix that works at 1440px can break at 390px.
• Do not let the agent rewrite unrelated parts of the site. Scope every prompt to one issue.
• Ask the agent to inspect before it modifies. Always.
• Keep a short record of architectural decisions (a decisions.md) so a fix made in August still makes sense in December.
• Verify the final result visually, on real devices, before you call it done.
• Run the audit again after any major layout or content change, not just once at launch.

11. Common mistakes

The ways this goes wrong, and the better move each time:

• Blindly fixing every issue. → Triage. Critical and major first; minor only when cheap.
• Asking AI to "rewrite the whole site". → One issue, one focused change, one reviewable diff.
• Changing unrelated components because one issue was reported. → Constrain the prompt: "do not touch anything outside this issue".
• Treating the audit as absolute truth. → It is a strong signal. Verify the cause in your own code (see issue 11 above).
• Fixing desktop and assuming mobile is fine. → Re-check every fix at a phone width.
• Stopping after the first implementation. → Re-audit. Confirm it landed and introduced nothing new.
• Never verifying what the agent changed. → Read the diff every time. If you cannot explain it, do not accept it.

12. My website-building guide (the AI Website + Video Playbook)

Floto tells you what is wrong with a site you already have. This is the other end: how I build a site worth auditing in the first place. It is a pack of 10 cinematic-website prompt templates plus a 6-step pipeline for the AI-generated video that runs behind the scroll. It is from my 2026 AI workshop.

Read the full pack here: AI Website + Video Playbook (Google Doc). Below is what is in it and when to reach for each piece.

The 10 templates

Each one is a single copy-paste prompt that builds a scroll-scrubbed site with a specific structure and palette. Pick by what you are selling.

Three of the prompts, in full

These are the actual copy-paste blocks from the playbook — the shortest and most reusable ones. The other seven follow the identical shape (brand, three video shots, a section-by-section website spec, a palette, and a "verify on localhost before it's done" line).

Build me an award-winning cinematic 3D-scroll developer portfolio for [YOUR NAME]. Awwwards Site-of-the-Year energy: huge condensed type, scroll-driven cinematics, and a central element that reacts to scroll. The central element is ME.

VISUALS — generate video (standard, 1080p, 16:9, no audio, ~8s per clip). Upload my photo and pass it as an identity reference on every clip so my face stays consistent. Wardrobe fixed: [black tee, dark hoodie].

1. HERO ORBIT — I stand, arms crossed, in a black-void studio with warm orange rim light; slow 360° orbit around me.
2. THE BUILDER — I sit at a dark desk ringed by floating holographic code editors and dashboards; slow push-in.
3. THE SHIP — I walk toward camera down a corridor of glowing project screens, ending in a hero pose.

WEBSITE — scroll-scrub the orbit as a canvas frame sequence: [YOUR NAME] in massive cream type tracks in letter by letter; subtitle [what you build, one line]. Stats strip counts up on scroll: [stars, projects, years, clients]. THREE PILLARS over clip 2 reveal [3 core skills]. WORK over clip 3: cards for [3 projects], one-line pitch + hover motion. Finale: [Hire me / Book a call] + footer [GitHub, X, LinkedIn]. Colors: bg #0D0C0B, accent #E1502A, type #ECE6D8, heavy condensed display, kinetic type, grain, smooth scroll. Launch on localhost and verify the orbit scrub is buttery before saying it's done.

Build me an award-winning cinematic site for EMBER & OAK — a fictional wood-fire steakhouse in [CITY].

VISUALS — video, standard, 1080p, 16:9, no audio, ~8s per clip.

1. HERO — slow-motion macro of a ribeye searing over open flame, embers rising into darkness, amber light.
2. THE ROOM — slow dolly through a moody dining room at golden hour: leather booths, candlelight, a bartender behind.
3. THE CRAFT — overhead of a chef's hands plating, steam curling up, dark slate table.

WEBSITE — full-bleed hero scroll-scrubbing the fire clip with EMBER & OAK in elegant serif and "Wood fire. Nothing else." beneath. Sections: story over clip 2 (Six dishes. One fire.) -> menu in two columns (Fire / Field) with prices -> private dining over clip 3 -> hours + map + Reserve a Table form. Near-black, warm cream text, ember-orange accent, film grain, slow parallax. Mobile: menu collapses to one column. Launch on localhost and verify the hero scrub and reservation form render before saying it's done.

Build me an award-winning cinematic site for NOIR&CO — a fictional creative studio that designs brands for companies that refuse to be ignored.

VISUALS — video, standard, 1080p, 16:9, no audio, ~8s per clip.

1. HERO — black ink blooming and morphing through water in extreme slow motion, occasionally flashing into gold.
2. THE WORK — oversized posters and screens with bold typography sliding past on gallery walls, camera dollying sideways.
3. THE PEOPLE — silhouettes of a small team working late in a moody studio, city bokeh through the window.

WEBSITE — hero scroll-scrubs the ink bloom behind NOIR&CO in enormous type filling 80% of the viewport, manifesto line typing itself beneath. Sections: kinetic manifesto where each scroll step slams one word (LOUD. PRECISE. UNFORGETTABLE.) -> work grid of 4 case studies with hover video reveals from clip 2 -> services in an editorial two-column layout -> team over clip 3 -> oversized footer: Got a brand worth fighting for? Pure black and bone white, gold accent used exactly three times, brutalist display + refined serif. Cursor becomes a small gold dot with a trailing ring. Launch on localhost and verify the kinetic text and hover reveals work before saying it's done.

The 6-step video pipeline (Part B of the playbook)

The templates assume a short AI-generated video behind the scroll. Here is how that gets made:

1. Ideas & references. Screenshot a hero section you like from Pinterest / Dribbble / Landbook. That screenshot is your brief.
2. Hero image (the critical step). Generate one clean image of your subject — consistent lighting and framing. Every clip references this one image so the subject looks identical throughout.
3. OpenArt video. Upload the hero image → Create → Video → 16:9, 5–8s, standard quality → write the motion prompt → render 2–3 takes → download MP4.
4. Higgsfield video. Upload the hero image as a reference on every clip → Seedance 2.0 model, standard mode, 1080p, 16:9, no audio, ~8s → chain clips by setting each clip's end frame as the next clip's start frame.
5. Website assembly. The template prompt already wires the video into a scroll-scrubbed canvas. Ask for web compression — roughly 90% smaller file — so the scroll stays smooth.
6. Deploy. One prompt: create the GitHub repo, walk through Vercel / Netlify deployment, connect a custom domain.

13. The complete website workflow

Everything above, as one playbook you can run start to finish:

1. Build the website. AI does the first pass.
2. Use the playbook prompts. Pick the template that matches what you sell; run the 6-step video pipeline if you want motion behind the scroll.
3. Open the live or staging site. The real rendered page.
4. Run Floto. Usability audit first.
5. Review the audit. Score for a gut check, then the issue list.
6. Prioritise. Critical → major → minor, weighted by user and conversion impact.
7. Take one issue's fix prompt. Not the whole report.
8. Give it to Claude Code / Cursor / Codex.
9. Ask the agent to inspect first. Root cause in your code, no changes yet.
10. Review the proposed implementation. Read the diff. Minimal? Scoped?
11. Implement the smallest correct change.
12. Verify the website. Real page, desktop and mobile.
13. Run Floto again. Did it land? Any new issue?
14. Repeat from step 6 until the issues that matter are gone.

14. Useful links

• Floto — the product and docs
• Floto: Design Feedback — the Chrome extension (install this)
• codewithnishant.vercel.app — the site I audited (53/100, 15 issues)
• AI Website + Video Playbook — the 10 build templates + the video pipeline

15. Final checklist

Copy this. Run it every time you ship or significantly change a site.

• Website built
• Mobile checked at a real phone width
• Floto installed
• Audit completed on the live / staging page
• Critical issues reviewed
• Major issues reviewed
• Fix prompts generated, one per issue
• Coding agent inspected the implementation before changing anything
• Each proposed change reviewed as a diff
• Changes implemented, smallest correct version
• Website verified visually, desktop and mobile
• Floto audit repeated
• Remaining issues prioritised for the next pass

You would not merge code without a review. Give a finished website the same courtesy: ship it, audit it, understand it, fix what matters, audit it again.