Skip to content
FR

Analysis tool

for websites Sonde

Personal project

View the app
Sonde on an iMac and a phone: the « See any site clearly. » home page in front of the coloured smoke, and a report’s scores by goal (Find errors 74, Better UX 82, More leads 81, Security 88).

Sonde is a website analysis tool: you paste an address, choose what matters, and get a report that separates what was measured from what was interpreted. I wanted a report you can trust: every claim says whether it was measured, observed, interpreted by the AI, or is a hypothesis to check.

Brief and goal

Analyze any public site against the chosen goals (errors, UX, leads, security, speed, accessibility, SEO…), your own site or someone else’s, and deliver a report where every claim states its source.

Role and responsibilities

Personal project: designing the tool, architecture, visual direction, programming with Claude Code, testing on real sites and deployment on Firebase.

Credits

Personal project. The tool’s design, the visual direction and the programming with Claude Code are my work.

Use of AI

I used Claude Code to program, test, debug and deploy Sonde, and the Gemini API inside the tool itself to read sites, write findings and answer questions about the report; I also used Claude Code to add this sheet to the portfolio, from the project’s documentation. My personal contribution includes the idea of the tool, the instructions, the visual direction, the interaction choices, reviewing the reports and validation.

Production steps

  1. Building the architecture

    I started by defining the architecture with Claude Code: a React interface in TypeScript, hosted on Firebase, and a single cloud function that runs the analysis and streams its progress live. The Gemini API key stays in Google’s Secret Manager, never in the browser, and the same schemas validate data on both sides. From the start, every claim in the report had to state its source: measured, observed, interpreted or hypothesis.

    Live analysis of htmx.org in Sonde: the seven phases, from inventory to review, a radar of the pages found and read, and the live log.

  2. Measuring before interpreting

    Before letting the AI speak, Sonde takes inventory of the site (sitemap, robots.txt, technologies) and runs about 45 deterministic checks: HTTPS, security headers, broken links, titles, alt text, forms and more. Gemini then reads the pages and writes the findings; in an in-depth analysis, it also retraces a visitor’s journey, then a review pass rereads every claim and removes what the evidence does not support.

    The « Measured, not guessed » section of a Sonde report: measurements sorted into failures, warnings and passes, such as blocking scripts and broken links.

  3. First design

    I first designed a night-time interface from a mood board: midnight blue, light monospace type, a WebGL silk behind the title and a planet rising under the call to action. The animations are custom-made, without an animation library.

    First version of the Sonde home page, in midnight blue: the title « See any site clearly. » in monospace in front of a bluish silk and a periwinkle « Analyze » button.

  4. Testing on real sites

    I tested the tool on real sites, in quick and in-depth analyses, in English and in French. These tests revealed a false finding: the AI reported « truncated » documentation when it was the tool that was cutting long pages. Pages are now cut cleanly, with a clear mark, and the instructions forbid reporting these cuts; the same test confirmed a real problem, empty reference pages.

    The « What we found » section of a Sonde report on htmx.org: a high-priority finding, a broken link and an empty attributes page, with its measured and observed evidence, its recommendation and its impact.

  5. Visual redesign and launch

    The first version looked too « AI-made »: outlines everywhere, a sonar logo and buttons that followed the cursor. I redid it with solid surfaces, a new logo, a single hover gesture, reserved for what can be clicked, and a palette drawn from a reference image: coral, salmon, marigold, lemon and turquoise. The tool is online on Firebase.

    The goals section of the Sonde home page in the new palette: ten solid pink cards on a dark teal background, the « Security » card hovered.

Technologies

Challenges

An analysis report is only useful if you can trust it, yet AI can say false things about a site. The first design, for its part, looked AI-made.

Solutions

Measurements come before AI, every claim shows its source and a review pass rereads everything; when AI is not available, the tool still delivers a measurement report. For the design, I replaced the outlines with solid surfaces and kept a single hover gesture.

Final result

A web app online, in French and English: a quick analysis (about a minute) or an in-depth one (3 to 4 minutes), then a report with scores by goal, sourced findings, a Now / Next / Later plan, the measurements, a question assistant, a share link and PDF export.