Atomiton
Back to the homepage

// AI NOTES

How this homepage was made with AI

Tools, prompts, decisions and the checks that kept the content honest. Items in [brackets] are for the team to fill in.

// 01 TOOLS

What was used

  • Claude Code (Anthropic CLI agent): research, design, code, tests. Model: Claude Sonnet 5.5.
  • Playwright + headless Chromium: recorded the live site into an offline copy, took screenshots at 360 / 768 / 1024 / 1440 px, ran interaction tests.
  • Lighthouse 12: performance, accessibility and best-practices scores. SEO is not scored because the site is set to noindex.
  • Python (Pillow) and ffmpeg: recoloured the existing logo for the dark theme, converted images to WebP and re-encoded a 71 MB video to 13 MB.
  • Ghostscript: shrank the 42 MB energy case-study PDF to 1.4 MB with no visible loss, so every file fits hosts that cap a single file at 25 MB (Cloudflare Pages).
  • Node.js: a small generator that builds the 34 inner pages from the site’s own CMS data, plus a link checker.
  • [ANY OTHER TOOL YOU USED]

// 02 PROCESS

In order

  1. Cloned atomiton.com into a local, offline copy so the real content, CMS data and assets were the single source of truth.
  2. Read the homepage CMS JSON field by field, then the header, footer, links and logos of the current page.
  3. Turned the brief into design tokens (colour, type, spacing) and built plain HTML, CSS and vanilla JS with no build step.
  4. Tested in a real browser, fixed what failed, and re-measured.
  5. Rebuilt every page the homepage links to (solutions, Knowledge Hub and its articles, Impacts and its case studies, the platform page, legal pages) in the same style, generated from the CMS data so nothing was retyped.

// 03 PROMPTS

Key prompts

The design prompt asked for a restrained sci-fi HUD style: dark first, one green brand colour, hairline borders, mono labels, glass panels, and strict rules for contrast, motion and performance. Content had to stay as on atomiton.com.

[PASTE THE PROMPTS YOU WANT TO SHOW, AND WHAT EACH ONE PRODUCED]

// 04 DECISIONS

What the AI decided, and why

  • The hero graphic comes from the site’s own words. “No More Rearview Paralysis” says data moves in minutes (operations), months (billing) and years (planning). The graphic shows those three rhythms merging into one view. It is labelled illustrative, not live data and has no numbers.
  • Real details replaced placeholders where the source had them. The Calendly URL, phone, email, social links and the eight logos on the current site are used as found. The logo strip is labelled “Ecosystem” because the source does not say whether those names are customers or partners.
  • A broken link was found and fixed. The coverage link stored in the site’s CMS returns 404. The article lives at energybusinessreview.com/atomiton and is confirmed to be the Atomiton award page.
  • No unsourced numbers. The only figures on the page come from the source: Scope 1–3, SB 253, CSRD and the 2025 award year.
  • Accessibility drove the capabilities control. Desktop uses an ARIA tabs pattern with arrow keys, Home and End. Mobile switches to an accordion. A motion switch in the top bar turns animation off, and the OS reduced-motion setting is respected.
  • Missing data was found by checking the live site. The offline copy had no case-study details because its crawl used the wrong route (/impact-details/<id> instead of /impacts/impact-details/<slug>). Clicking “Read more” on the live site revealed the right route and the data request, and the five records were fetched from there.
  • Embeds load on request. The page claims “no tracking”, so YouTube, Synthesia and 7taps stay behind a play button, and YouTube uses its privacy-enhanced domain. Across all 36 pages no third-party request is made.
  • Report charts were redrawn. The CMS stores them as Highcharts settings. They are drawn as SVG in the HUD palette with marker shapes, end labels and a hidden data table, instead of loading a charting library.
  • Source defects were repaired or reported, not hidden. A sentence the CMS split across paragraphs was joined again; a video caption that stops mid-sentence is shown as stored and listed for the content owner.
  • Hidden from search engines on purpose. The site is not meant to appear in Google. Every page carries noindex, nofollow and a _headers file sends the same X-Robots-Tag for every file, PDFs included. Description, Open Graph and canonical tags were removed. There is no robots.txt block, because a blocked page cannot be read, so Google would never see its noindex.
  • One file was too big for the host. The energy case-study PDF was 42 MB. It was compressed to 1.4 MB instead of being moved to separate storage, so the download link did not change.
  • [YOUR OWN DECISIONS AND WHERE YOU OVERRODE THE AI]

// 05 CHECKS

How it was verified

  • Content: 52 of 53 homepage strings and 655 of 656 inner-page strings from the CMS appear word for word. The two differences are a dash replaced by a comma (as written in the brief) and a short description that only appears on its Knowledge Hub card.
  • Lighthouse: Accessibility 100 and Best Practices 100 on every page tested. Performance is 90 to 99 on mobile and 100 on desktop. Layout shift is 0. These runs were done before the PDF was compressed and the SEO tags were removed. The SEO category is no longer reported, since the pages are noindex on purpose.
  • Behaviour: 48 scripted checks passed: tab and accordion keyboard use, menu, form validation, motion switch, reduced motion, no-JavaScript render, Knowledge Hub filters, navigation between pages, click-to-load embeds.
  • Links: all 1,376 local links and assets across 36 pages resolve, and no link points back to atomiton.com.
  • Layout: 36 pages at 360, 768 and 1440 px: no horizontal scroll, no console errors, no broken images, one H1 each.
  • Mistakes the checks caught: tab panels placed inside the tablist, a button label that did not match its visible text, a glow that caused sideways scroll, a low-resolution logo, corner brackets that never rendered, embeds that contacted YouTube on page load, a heading order that skipped a level, and a wrong route that hid five case studies.