Digital Design, September 2026

From a screenshot to a live link

What the Digital Design repo is, what it does today, and where it goes next.

Kurt, 24 September 2026. Use the arrow keys, or scroll.

The brief is one path from a Figma design to Christie’s codebase

  1. Design in Figma

  2. AI turns it into code

  3. Code goes into our repo

  4. Vercel deploys it

  5. A link goes out for sign-off

  6. Approved work moves to engineering

One repo takes a designer from a screenshot to a live site

  1. A screenshot or Figma link

    Pasted into VS Code.

  2. An AI agent

    Claude Code, Codex or Copilot, following the repo's rules.

  3. The Digital Design repo

    Prototypes, proofs of concept, experiences and decks.

  4. A Vercel link

    Every branch gets its own preview.

The agent handles git, the terminal and the build. It checks its own work in a real browser before it hands it back.

The hero banner prototype was built and shared this way, with no code written by hand

  1. The designer says‘Build this from these screenshots.’

  2. Then‘Share this.’

  3. The agent repliesproto-hero-banner.vercel.app

Once set up, the whole loop happens inside VS Code.

proto-hero-banner.vercel.appOpen it

Every new project starts on brand, with the basics already built

  • Typography

    Christie's fonts, one shared copy for every project.

    Ready

  • A CSS reset

    The team's modern reset, shared rather than copied.

    Ready

  • Starter code

    An HTML or Astro project, created with one request.

    Ready

  • Prototype controls

    Switch versions and states, and reset between test participants.

    Ready

  • Icons

    One shared set, ready to drop into any page.

    Ready

  • Design tokens

    Colour, type and spacing from one source, matched to Figma.

    Planned

The repo runs on engineering’s own tools, so work and habits transfer to theirs

  • Yarn

    The same package manager, pinned to the same version, 4.17.1.

  • Turborepo

    Runs and builds each project, with the same commands.

  • Prettier

    Engineering's formatting settings, copied as they are.

  • oxlint

    Engineering's code checks, copied as they are.

We match engineering where it helps work move across, not to copy their process for its own sake.

We use Vercel’s free protections for now, and have considered the paid ones

In place

  • The repo is private, and holds no keys or .env files.
  • Branch and preview links need a Vercel login.
  • AI agents cannot read secrets, use admin commands, delete in bulk or publish packages. They ask before they push.
  • Every change goes through a pull request.

Known risks

  • Each project’s stable .vercel.app address is open to anyone with the link. A free setting resolves this, but requires everyone to have a Vercel login.

Considered, not used yet

  • Paid options, such as Password Protection, would let people outside the team open a link safely.
  • They wait until the approach has won buy-in.

Experiences and a snippet library come next, on the same foundation

  • Prototypes

    Design tests, built and shared fast.

    Ready

  • Proofs of concept

    Built in engineering's shape, to move across.

    Planned

  • Experiences

    Standalone microsites and one-pagers.

    Planned

  • Snippet library

    Tested blocks we reuse, so experiences stay consistent and build faster.

    In progress

Shared foundation

  • Fonts
  • Reset
  • Tokens
  • Placeholders
  • Engineering's configs

A small deck builder lets Claude make slides like these

Each deck is one file in the repo. Ask the agent for a deck, and it writes the slides, checks them in a browser and shares a link.

Still a work in progress, but a quick way to share an idea with the team.

<Slide>

## One path from Figma to code

<Flow steps={[…]} />

</Slide>