Your website as a city: an n8n workflow surveys it and builds it in isometric view

Try it first: your website as a city. Enter a domain, press “Build the city”, and a few seconds later the city stands. No domain at hand? The demo button fills in daniele-michelin.com.

How to read the city

• Houses = pages: 6 to 40 houses, on a logarithmic scale from the number of URLs in the sitemap. Without a sitemap it stays a village with a “No sitemap” sign.
• Height = weight: kilobytes of the homepage and the number of scripts, stylesheets and images. The more it loads, the taller the houses.
• Wall = security headers: six towers for HSTS, CSP, nosniff, frame protection, referrer policy and permissions policy. A missing header leaves its tower in ruins.
• Traffic = response time: measured as time to first byte. Up to 600 ms traffic flows, above that it slows down, above 1500 ms there is a jam with brake lights.
• Lock on the gate = TLS: a golden lock shows how many days the certificate has left. Without HTTPS it reads “no HTTPS”.
• Post office = e-mail protection: green flag for SPF plus an enforcing DMARC (quarantine or reject). Yellow for partial protection, red when senders are easy to fake.
• Signs = technology: the tallest houses carry up to five detected technologies, such as the web server, CMS or CDN.
• Sky = your local time: day, dusk or night by your clock. At night the windows light up. You can also switch the sky by hand.

On top of that there is an overall grade from A to F and a city guide written by an AI. The grade comes from the same check as the website report card: security headers, e-mail protection and certificate. 90 points or more is an A, below 35 is an F. The city is a game, the measurements underneath are real.

What the workflow shows

• Check first, then in parallel: the webhook first calls a checkpoint. It measures headers, SPF and DMARC, TLS and response time, and returns the final address after redirects. Then three HTTP nodes run at the same time: homepage, sitemap.xml and sitemap_index.xml.
• Merge: a Merge node with three inputs waits until all answers are in. If the sitemap is an index, the workflow fetches up to eight child sitemaps from the same host and extrapolates the page count. It follows the WordPress redirect to wp-sitemap.xml once.
• Code does the maths: the Code node “Stadt vermessen” (surveying the city) counts pages, kilobytes, scripts and images and recognises 40 technologies from headers and HTML. The AI calculates nothing.
• AI with rules: the city guide is gpt-oss-120b at IONOS in Germany. It gets the measurements as JSON and may use only those numbers. Three to four sentences, at most 380 characters, weaknesses told with gentle humour, no insults, no emojis, JSON only.
• Fallback: all HTTP nodes carry on after errors. If the AI does not answer or answers too briefly, a Code node writes the guide from the same numbers using a template. So the city always stands.
• Sharing with a picture: the server stores the city with a number and a link and draws a skyline as the preview image. WhatsApp and LinkedIn show the city when shared, not just a link.

Build it yourself

The workflow is ready as JSON to import. Placeholders are marked: the checkpoint address, the token and the page that receives the result. On my server the checkpoint is a small PHP script, so you need an endpoint of your own for it. Any OpenAI-compatible API works for the AI.

The skeleton also fits something serious: check first, then several requests in parallel, merge, calculate and let an AI put it into words. More workflows to click and download are on the n8n overview.

Originally published at daniele-michelin.com. More guides, free checks (SPF, TLS, headers) and an error-message lexicon: daniele-michelin.com/en/.