Why Slicing Beats Coding: Lessons from Recreating a Product Mockup with Claude, Codex, Cursor, and v0.app

Over the past few days I tried to turn a richly designed product mockup into a fully functional React page using a simple stack—React, Next.js, and Tailwind CSS—while leveraging AI assistants Claude, Codex, Cursor, and the v0.app generator.

What the AI got right

The tools quickly produced a page that contains the expected structural components: a header, hero section, cards, test module, tarot module, character cards, statistics, and a bottom story module. They also generated Tailwind classes and component hierarchies that compile without errors.

Where the AI fell short

When the generated page is placed side‑by‑side with the original design, several visual problems become obvious:

Modules appear “scattered” and lose the cohesive feel of the original.

Backgrounds are fragmented or incorrectly sized.

Elements overlap, become too dark, or lose proper contrast.

Card proportions, text hierarchy, and lighting effects are inaccurate.

The hero area, which should consist of multiple layers, is often flattened into a single image, causing text to be baked into the background and making the page hard to maintain.

Prompt tweaks and their limits

I experimented with increasingly detailed prompts such as:

“1:1 recreation, no creative freedom, no redesign.”

“Use React + Next.js + Tailwind.”

“Do not treat the whole image as a background.”

“All text, buttons, and navigation must be real DOM elements.”

“Complex backgrounds should be separate images.”

“Render the page as a mobile‑only layout, even on desktop browsers.”

These prompts reduced some layout mistakes—e.g., the AI stopped forcing a desktop layout and kept the module order closer to the design—but they could not solve the core slicing problem.

Why slicing is the bottleneck

The AI understands the page hierarchy (header, hero, cards, etc.) but lacks a reliable “slicing logic” to decide which visual elements belong to background images, which are decorative layers, and which should be rendered with real DOM. Without this judgment, even perfectly written React code cannot reproduce the original visual depth.

Case study: the hero section

The hero consists of at least five layers:

Dark page background.

Right‑side visual of the inn and street.

Left‑side mask covering the text area.

Title, button, and status text.

Local lighting effects and vignette.

If the AI receives the whole image, it often mixes these layers, misplaces background positions, or crops images incorrectly, leading to a page that looks “black and dirty.”

Three slicing strategies evaluated

Strategy 1: Use a single background image for the entire hero. Pros: Visual fidelity is highest. Cons: Text becomes part of the image, losing maintainability and breaking on different screens.

Strategy 2: Slice only the right‑side visual; keep left‑side text as DOM. Pros: Better structure and maintainable text. Cons: Requires precise background‑positioning, masks, and vignette handling.

Strategy 3: Split the hero into many layered PNGs (inn, moon, rose, characters, etc.). Pros: Maximum flexibility. Cons: High slicing effort and the AI may still misplace layers.

Strategy 2 offered the best trade‑off for this project.

Recommended workflow

Manually divide the design into logical modules; never feed the whole mockup to the AI.

Extract complex visual elements as separate background assets (e.g., hero background, tarot banner, character portraits, story covers).

Remove all text, buttons, and interactive elements from the images and implement them with real DOM.

Ask the AI to generate one module at a time, starting with Header + Hero, then progressively add cards, test sections, tarot modules, etc.

Iteratively fine‑tune spacing, font sizes, background positions, masks, and shadows by comparing the output with the original mockup.

This slower, modular approach yields a page that is both visually faithful and maintainable.

Take‑away

AI assistants are now capable of writing React code, decomposing components, and scaffolding Tailwind styles. However, for high‑impact visual pages the decisive factor remains a disciplined slicing methodology; without correctly partitioned assets, even the best prompts cannot bridge the gap between a “look‑alike” and a production‑grade implementation.