Redesign with Fable 5.2

[Edited for publishing. I left out the lines about the site's photos, the name of the designer whose work I used as a reference, my internal notes, and details of my machine, repository and setup such as file paths, ports and test names. The direction is as I sent it.]

# Redesign vladislavivanov.ai for reading (EXP-004)

You are working alone in a fresh checkout of the repository behind vladislavivanov.ai, the public personal site of
Vladislav (Vlad) Ivanov. Vlad is not available for questions while you work: make reasonable calls, write them
down, and finish.

## Why

The site went public on 11 Nov 2026 (v3.12.3). The first feedback: it is hard to read. The home page opens with a
"swarm" animation (cursors that draw the page), lines move behind the hero, and the look is dark and layered. Vlad
now wants the opposite. In his words: the information should be "really easy to read", the design "clear, modern,
but clear", with "a white theme, and the white theme to be the default one".

This redesign is itself an experiment that the site will publish as EXP-004: this prompt, the model (you, Claude
Fable 5.2), the time and tokens of this run, and before / after measurements. Your run is measured from outside
(transcript tokens, wall-clock time, the git diff), so you don't need to track it. Work the way you normally would.

## Design direction

- Light theme by default for every visitor, and a dark theme the visitor can switch to. Remember the choice, and
  never flash the wrong theme while the page loads. Both themes pass WCAG AA.
- Reference: a designer's recent work on clean dashboards and cards, shared as screenshots. Take the feel: a calm
  light canvas, white cards with soft depth and generous radius, big confident numbers with small quiet labels,
  precise alignment, restrained colour. Take the feel and techniques only. Never copy the layouts, code, copy or
  assets.
- Reading first: comfortable body size, short lines, strong contrast, a clear hierarchy, plenty of space. Text is
  readable the moment the page loads: no intro animation, and nothing that hides or delays text. Motion only where
  it explains something (the experiment replays), and always honour `prefers-reduced-motion`.
- Professional, not a template. Avoid hairline grids with a mono uppercase eyebrow on every block, numbered
  01/02/03 cards, purple or blue gradients, italic accent words, alternating section background colours (Vlad
  declined those), and dot fields or dot-matrix numbers (declined too).
- Keep the brand: the name followed by the blue dot, and Geist with Geist Mono (already self-hosted). You may
  retune the blue for the light theme.

## What stays

- Copy and facts. The source of truth is the site's data and the current components. Keep the hero headline
  "I test AI myself, then put it to work with your team." and the line "Helping you choose the right AI tools for
  your processes." verbatim. Never invent facts, clients, metrics, quotes or dates. If a layout needs shorter copy,
  tighten it and log every change as old → new.
- Sections: the intro; AI in Practice (the lab, the most important and most visible part of the page); how I help
  (three ways: "One workflow at a time", "Choosing the right tools", "Staying for the long middle"); the career
  history (keep Microsoft Dynamics and XAPT CEE); life beyond work; contact (email first, then LinkedIn and X).
- The lab: a list of experiments next to the open one (on wide screens a sidebar list like a chat app, on phones a
  horizontal tab strip), each experiment also on its own page `/lab/<id>/`, and the replays (Earnings desk, This
  site, Local vs cloud) restyled for both themes. Keep the lab's behaviour: experiments load on demand, deep links
  `/#<id>` work, and a newly opened experiment starts at the window's top. Every experiment ends with Email me,
  LimeShift.ai and LinkedIn.
- Every page and file the site serves today keeps working: the home page, the experiment pages, the 404 page,
  `robots.txt`, `sitemap.xml`, `llms.txt`, `llms-full.txt`, the structured data and the link-preview cards.
- The swarm opener leaves the home page. EXP-002 (This site) stays as an experiment record with its replay: set its
  state to Complete and add one factual line saying the swarm opener was retired in this redesign for readability
  (log it).

## GEO fixes to fold in

From a GEO audit of the site (how well AI search engines can read and cite it):

- Each experiment opens with its question and a one-line Result that answers it, before the details. Build both from
  the existing data; no new claims.
- A visible Published and Updated date on each experiment, from one source of truth. Updated is the date of the last
  commit that changed that experiment's content, never the build time. Use the same values in JSON-LD
  `datePublished` / `dateModified`, the sitemap `lastmod` and `llms-full.txt`.
- Person JSON-LD as the audit suggests: employers in `worksFor`, not `sameAs`; `sameAs` lists X, GitHub, Bluesky,
  TheOrg and LinkedIn; `alternateName` is "Vlad Ivanov", "Владислав Иванов", "vlAIdislav"; each Organization gets
  its own `sameAs` (LimeChain with its Wikidata entry).

## EXP-004, the page about this run

Add EXP-004, "Redesign with Fable 5.2", as an experiment that stays hidden from the public site until Vlad
publishes it. Its numbers come from a data file that I fill in after your run. Create that file with this shape and
null values, and make the page show "Measuring" wherever a value is null:

```json
{
  "question": "Can one prompt to Claude Fable 5.2 turn my site into a clear, easy-to-read design, and what does it cost?",
  "result": null,
  "runDate": null,
  "prompt": { "href": null, "words": null },
  "run": {
    "model": "Claude Fable 5.2", "effort": null, "startedAt": null, "endedAt": null,
    "wallMinutes": null, "activeMinutes": null, "requests": null, "toolCalls": null, "subagents": null,
    "tokens": { "input": null, "cacheWrite": null, "cacheRead": null, "output": null },
    "costUsd": null, "pricesCheckedOn": null,
    "filesChanged": null, "linesAdded": null, "linesRemoved": null
  },
  "measures": [],
  "limitations": [],
  "didNotWork": []
}
```

Each `measures` item will be `{ "name", "before", "after", "unit", "how" }`; `limitations` and `didNotWork` are
lists of sentences. Page order, as a measured case study like EXP-003: the question and the result; what was
measured (a dated before / after table); the setup (model, effort, the full prompt behind a disclosure, and how the
cost was computed: API list prices, while the run itself used a Claude subscription); limitations; what didn't
work; the usual ending. It is Vlad's experiment: he set the direction and approves the result, and the model wrote
the code.

## Technical constraints

- Static output, plain CSS and JS as today. No third-party requests at runtime. Self-hosted fonts only.
- The site stays small: under 3 MB gzipped. Aim for less JavaScript than today.
- Accessibility: semantic HTML, one h1 per page, heading levels in order (the lab lifts experiment pages into the
  home page and demotes their h1 / h2 to h3 / h4; keep that working), keyboard reachable with visible focus, touch
  targets at least 24 px, the existing alt texts, readable without JavaScript.
- Responsive at 390×844, 768×1024, 1280×800 and 1440×900, with no horizontal scrolling. Safari matters.
- Lighthouse mobile stays 100 / 100 / 100 / 100 on the home page and the experiment pages.
- Visible copy: first person, plain; no em or en dashes and no spaced hyphen used as a dash; never "advisor"; no
  client names; no hard promises or dates for future work.

## Checks before you finish

- Build the site and run every existing build and deploy test. All must pass. If a test fails only because it
  checks something this redesign removes on purpose (the swarm, for example), update the test and say so.
- Look at the real pages in a real browser at phone and desktop sizes, in both themes: screenshots, console errors,
  a keyboard tab-through, reduced motion, JavaScript off. Headless Chrome or Playwright is fine. Keep throwaway
  scripts outside the repo, and stop any server you start when you are done.
- Grep the built HTML for "—" and "–".
- Before you finish, have a fresh-context reviewer sub-agent compare your screenshots and the built site with this
  brief, and fix what it finds.

## Hand-off

- Work on a new branch and commit in sensible steps. Don't push, don't deploy, and don't touch anything outside this
  checkout.
- Add a changelog entry under [Unreleased]. Don't bump the version.
- Write notes for Vlad: the direction and why, what changed, the copy changes old → new, known gaps.
- Your final message: what you built, the branch and last commit, how to run it, known gaps. Keep it short.

Open the prompt as a text file