Manuel Herrmann
Case · Pixel.Syntax

From pixel × to prompt.

One designer, zero lines of web code — and one question: can I build my own website as freely as I build a key visual?

The starting point

18 years of design. But building websites used to mean: hire an agency — or settle for a site builder.

The blind spot

Unfamiliar territory

Key visuals, motion, campaigns, even scripts for InDesign and After Effects — all my own craft. My own website was the one place where that stopped: someone else's template, someone else's rules, someone else's code. A strange blind spot for a media & motion designer.

The idea · Vibecoding

Describe instead of program

Vibecoding flips the roles: I stay the art director — concept, look, timing. The AI (Claude) becomes the production team and writes every line of code. No editor, no tutorial marathon. A dialogue — like working with a very fast team.

The process

Six stations from empty folder to live site. No magic — a process.

  1. Step 1 · The briefing

    Plain language instead of syntax

    I describe what I want to see — the way I'd brief a team: mood, references, scroll behavior. Claude translates it into HTML, CSS and JavaScript. Language becomes interface.

  2. Step 2 · The iteration

    Over 50 feedback rounds

    Every change — spacing, timing, dramaturgy — lands in minutes instead of days. The rhythm is that of a conversation, not a ticket system.

  3. Step 3 · The effects

    Effects on request

    Matrix spotlight, 3D marquee, vortex: show a reference, describe the effect — and Claude rebuilds it natively. No plugin, no template, exactly in this site's look.

  4. Step 4 · The crash

    When the MacBook gave up

    Honestly: along the way, this site crashed a MacBook — the GPU memory ran full. Diagnosed, measured and fixed together. The numbers are below.

  5. Step 5 · The craft

    Design stays the designer's job

    Typography, grid, timing, every call on look and dramaturgy: the designer's. Claude executes — precisely and tirelessly. AI doesn't replace a designer's eye. It gives that eye more to work with.

  6. Step 6 · The output

    The live site

    You're reading the result right now: a custom-built website with effects no site builder can deliver — conceived, briefed and approved by a designer.

The stress test

The moment something breaks is part of every real project. Here, it was measurable.

The diagnosis · GPU memory

Crash, diagnosis, fix

In an early version, the 3D marquee held around 970 MB of video textures in GPU memory at once — enough to bring a MacBook to its knees. We tracked down the lag together and cut the texture load to a fraction. Then came the crash diet for the assets: gallery videos compressed from 800 MB down to 217 MB, the complete upload package from 1.0 GB to around 470 MB — with no visible loss in quality.

217 MB Gallery videos — down from 800 MB
≈ 470 MB Upload package — down from 1.0 GB
0 Lines of hand-written code
The takeaway

No off-the-shelf website — and an honest verdict to go with it.

The verdict

No replacement for developers. But a remarkable tool.

A custom site with effects no site builder can match — built in dialogue, round after round. And still: vibecoding doesn't replace a developer. Architecture, security, production-grade code — that's still a job for the pros. But as a rapid-prototyping tool, it's remarkable: from idea to clickable draft at the pace of a conversation. The limit is no longer the code — it's the clarity of your vision.

Want to know what that means for your team?

Let's talk ← Back to case studies