Paul TinkerProduct designer · Design systems Back to portfolio

AI-native products & design systems

A working log of designing and building digital products with AI

An AI-native product and design system: a multi-brand e-commerce prototype, designed and built through prompts.

  • One system
  • Two brands
  • LTR and RTL
Bridge home page on desktop and phone: three riders in Bridge kit against a blue backdrop.
01 · HomeSeason hero, then three category doors with a men's and women's split, so the visitor picks a fit before a product. A new-in rail and the SHIFT crossover close the page.
Bridge men's listing on desktop and phone: filters for type, size and colour beside a grid of jerseys.
02 · ListingFilter rail (type, size, colour, availability) with sort, a live result count and load-more. One crossover placement sits in the grid after the second row.
A Bridge product card, before and on hover: on hover the jersey photo swaps to a close-up of the fabric.
03 · Product cardEach jersey has a full front shot and a fabric close-up. Hover the card and the close-up takes over, so you can see the print before you click.
Bridge product page for the Contour Jersey in Tidewater, on desktop and phone.
04 · ProductSticky gallery against a scrolling buy column: colour, size, add to bag, then fabric, fit and weight. Delivery, returns and free repairs are stated before checkout.
Bridge checkout on desktop and phone: contact and delivery details beside the bag summary.
05 · CheckoutOne page, three marked steps: contact, delivery address and method, payment. The bag summary holds the right column with totals, VAT and the returns assurances.
The Bridge product page in Arabic on desktop and phone: the whole layout mirrored right to left, with prices in the local format.
06 · Right to leftChoose Arabic and the whole interface turns over: the navigation, gallery and buy column all mirror, not just the words.
SHIFT by Bridge, the second-life brand: its home page on desktop and phone, in rust red with a plain sans-serif typeface.
07 · SHIFTThe same components and templates in the second brand. Only the look changes: a plain sans-serif typeface instead of a serif, rust red instead of Bridge blue, and an off-white background instead of white.
1 / 7

I've spent my career building systems and components that help digital products scale. I wanted to know how AI changes that, so I built a whole digital product through an AI-native workflow: designing and building primarily through prompts, using Claude Design as the working environment. No Figma. No handoff.

The result is a working multi-brand e-commerce prototype, built as a design artifact rather than code, and pushed live so anyone can click through it. The point was never to launch a shop; it was to find out how the product, the design system and the process change when AI becomes part of the system itself.

One system, two brands. The company is Bridge, a cycling clothing brand. A second brand, Shift, gives products a second life. They share foundations, components and templates; the visual expression changes and the foundations don't. Which is the question underneath the whole thing: how do you get consistency and scale without making every brand look the same?

What's built. Homepage, listing with filtering, product detail, search, account and sign-in, checkout, navigation and country selection, responsive layouts, two brand expressions, and localisation including right-to-left, plus an internal audit tool measuring component and block usage. The country selector goes further than currency: markets like Arabic need a different interface direction, not a translated one.

Also

  • Brand identities, visual direction and photography generated in Gemini from written asset specifications rather than made up on demand, which made it obvious that how assets are named, structured and referenced is part of the design system, not separate from it
  • The handoff disappears: intent, design, code, review, iteration. Generation is not judgement, though: small changes ripple across components, and states, breakpoints and accessibility quietly break. Review becomes the part that matters
A contact sheet of 24 Bridge jerseys generated in Gemini from written specs, each worn by a model in the same studio light: camouflage, art deco, botanical, geometric, stripes and plain colours.
A contact sheet of the 24 matching fabric close-ups used for the rollover on each product card: prints, knits, stripes and spots.
1 / 2

Still open. Solo is easy; real products have stakeholders. Who changes the foundations and who approves a component. What a market or a brand is allowed to modify. How you stop the system drifting as AI invents new patterns instead of reusing existing ones.

How do you get consistency and scale without making every brand look the same?

Explore prototype