AI DESIGN · VISUAL PRODUCTION

MXP Landing Page — AI-Assisted Visual Design

What happens when a designer pushes AI-assisted tools as far as possible on a real visual production task — and ships it to production?

Client

Grid Dynamics — Merchandising Experience Platform (opens in a new tab)

Stack

Next.js · Tailwind CSS

Role

Senior Product Designer

Tools

Claude · Cursor · Git · GitHub

MXP landing page hero — Take control of every merchandising moment, with live product discovery preview — Above the fold — dark technical aesthetic, amber/grey typographic system

Context

No Figma file was produced for the page. This case study is not about UX research or user flows. It is about a four-week experiment in AI-assisted visual design: using Claude for ideation and specification, Cursor for implementation, and generative AI for animation and illustration — with no Figma handoff.

The result is a live production landing page for Grid Dynamics' Merchandising Experience Platform. The more interesting result is what the process revealed: AI produces strong animated and interactive components when given precise direction, and struggles with conceptual illustrations of complex systems. Knowing the difference is the design skill.

The Method

The actual pipeline was:

Conversation

Each problem was raised conversationally — usually with a screenshot of the live page or a description of what was wrong.

Inline Sketch

Claude generated disposable options inline — three or four variants side by side, built in minutes. Never a file, never a Figma frame. The equivalent of marker comps.

Decision

A decision was made by the designer — often overruling the recommendation. The sketch existed to make a decision, not to be a deliverable.

Specification

A precise markdown specification was written — exact token values, measured contrast ratios, CSS rules, and a verification list.

Code

Cursor applied the specification to the Next.js codebase. The designer reviewed the live page and the cycle restarted.

33 specification rounds. 9 page sections. 28 prepared assets. 5 working sessions across 4 weeks.

What AI Did Well · What It Didn't

This is the most honest part of the case study.

AI did well when given a contained visual problem with clear parameters — animated component demonstrations, interactive section layouts, typographic systems, and colour ramp generation. Given precise direction, the output was fast, varied, and often better than a first attempt by hand would have been.

AI struggled when the brief was conceptual — illustrations representing multi-dependent systems, abstract processes, or relationships between ideas. The output defaulted to generic metaphors: nodes and arrows, gears, overlapping circles. These required the most human intervention and produced the least satisfying results.

The insight this produced: AI is a strong executor of visual decisions and a weak originator of visual concepts. The designer's job shifted — less time making, more time judging, directing, and knowing when to override.

The most load-bearing design decision of the project — amber means a human decided it, secondary tone means the system produced it, grey is structure — was made by a person. Every subsequent colour question was resolved by reference to it. AI applied it consistently once it existed. It could not have originated it.

AI is a strong executor of visual decisions and a weak originator of visual concepts.

Visual Artifacts

MXP platform section showing 8 animated module cards — Rebuilt four times — final version shows each module as a small animated demonstration

Three palette options for MXP landing page shown side by side for comparison — option 1 — Initial HTML with interactive palette switcher — disposable inline sketch used to make a direction decision

Three palette options for MXP landing page shown side by side for comparison — option 2 — Initial HTML with interactive palette switcher — disposable inline sketch used to make a direction decision

Three GitHub Pull Requests showing MXP landing page commits and file changes — PR 1 — Design delivered as specification — Cursor applied it, designer reviewed and directed. 'Made with Cursor' visible in PR #3 description.

Three GitHub Pull Requests showing MXP landing page commits and file changes — PR 2 — Design delivered as specification — Cursor applied it, designer reviewed and directed. 'Made with Cursor' visible in PR #3 description.

Figma accessibility audit board showing contrast ratio calculations for MXP colour tokens — Contrast ratios computed for every token pair — not estimated. Findings drove token rebuilds in both light and dark themes.

Outcome & Reflection

The absence of Figma was not a constraint — it was a clarification.

The page shipped to production. Stakeholder review required no revision requests — feedback was 'it looks awesome' and 'we don't have to change anything.' For a marketing page built entirely through specification and AI implementation, with no traditional design handoff, that is a meaningful result.

What this experiment established:

AI-assisted visual production is real and fast — but it requires a designer who can write precise specifications, judge output critically, and know when the result is wrong in ways the tool cannot detect.

The absence of Figma was not a constraint — it was a clarification. Without a canvas to arrange things on, every decision had to be made explicitly and written down. The specifications became more precise than any annotation layer would have been.

The open question this project left: how far can this method scale to more complex, multi-stakeholder products where the brief is less contained? That is the next experiment.