Vincent Ang

Craft · Systems · Product execution

Designer. Developer. Producer. Human Being.

Twenty years of UX design and front-end engineering, now run as an AI-amplified practice. I design the system, art-direct the world, and build the product that holds both.

Open to design systems, product, and frontend engineering roles — and creative technologist work

More about me
Portrait of Vincent Ang

Now · Product operating model

AI as a Product System

  1. Research
  2. Design
  3. Build
  4. Verify
  5. Codify
ClaudeChatGPTPerplexity

Foundry Series · Self-initiated personal project

Imagining people lost in their art.

None of these houses exist. I invent each one around a craft that does and set it in the country that craft comes from: a Black Forest clock house, a Cremona violin bench, a barong workshop in Laguna. The part I keep coming back to is picturing the person inside — hours gone, absorbed in it. 22 so far, with more countries to come. Websites are what I know how to make; working with AI is what let me make them about the things I love.

See all 22 worlds

The Foundry roster

The amplification

22 trades.One workshop.

I wanted to build every one of them, and there is only one of me. Working with agents is how a workshop of one gets to 22 — and I love it. Not for the speed. For the reach: a thing I am curious about on a Tuesday can be a finished, running site by the weekend.

22 —Worlds in the series so far
Each with its own palette, typeface, voice, and interaction model
22 —Deployed and reachable
Not mockups — every world links to the running site
1 —Token architecture
Each world compiles its own DTCG set from one schema, one pipeline, one accessibility contract
1 —Art director
Agents draft and build; taste, direction, and the veto stay in one pair of hands

No two of these share a colour, a typeface, or a single token value — a Murano furnace has no business looking like a log yard in Numedal. What they do share is the schema those tokens are written in, the pipeline that compiles them, a critique loop, and an accessibility floor none of them is allowed to fall through. The system is the structure, never the surface.

This is the part I did not see coming. I have wanted to work at this range my whole career, and now I can. I direct agents across research, art direction, implementation, and critique, and the constraints live in writing — a design doctrine per world, a contrast contract, asset budgets, a review pass — so speed never becomes the thing deciding how the work looks. I frame the problem, set the rules, look at the evidence, and throw away most of what comes back.

It is the same relationship a knife maker has with a good hammer. The tool does not make the judgment; it makes the judgment possible. What is new is that a curiosity I would once have let go now gets built instead — and that is the most fun I have had making things.

Selected product systems

Products built as systems.

A white-label portal that rebrands by carrier without forking the passenger experience, a governed workspace that keeps a design-token model intact, and a marketplace organised around why people travel rather than what they book.

Applied design system · White-label product

MachIFE

  • Brand inheritance
  • Responsive portal
  • Production constraints
MachIFELive product

Design systems · AI-assisted workflow

How I Create Design Systems with AI

I use AI to accelerate the design system process without losing structure, consistency, or judgment. My workflow covers context gathering, foundation extraction, token definition, component building, documentation, and validation.

Read the workflow
  1. 01
    Context

    Reads the codebase, brand material, and precedentI decide what constrains the work and what to ignore

  2. 02
    Foundations

    Extracts scale, rhythm, and ratioI set what the product must protect

  3. 03
    Tokens

    Proposes the DTCG model and aliasesI name them and fix the contract

  4. 04
    Components

    Builds against the token contractI review states, keyboard, and long content

  5. 05
    Validation

    Checks Figma, Storybook, and production for driftI confirm each finding in the running UI

FigmaStorybookReactAngularAstro

Working note · 18 Jul 2026

“A system should leave room for fingerprints.”

Design system

Foundations made visible.

I believe in design systems. Rather than just talking about them, here’s a quick demo of how a governed, token-driven design system keeps components and styles in sync and lets one source of truth drive the entire theme. Every card below is generated from that source, and the component list is checked against the stylesheets at build time — so none of it can describe a system this site does not have. Try re-skinning the site live in the , or open the full system — the ten-step type scale, and the four breakpoints that a build check will fail the site for going outside of.

Colour · 6 semantic

  • background.canvas
  • background.surface
  • text.primary
  • text.secondary
  • text.accent
  • border.strong

Type scale · 10 steps

  • label0.7rem
  • caption0.8rem
  • small0.9rem
  • body1rem
  • lead1.05–1.25rem
  • subhead1.25–1.65rem
  • title1.6–2.5rem
  • heading2.25–3.75rem
  • display2.75–5.5rem
  • hero3.25–8rem
Full specimen

Spacing · 12 steps

  • 050 · 4
  • 100 · 8
  • 150 · 12
  • 200 · 16
  • 250 · 20
  • 300 · 24
  • 400 · 32
  • 500 · 40
  • 600 · 48
  • 800 · 64
  • 1200 · 96
  • 1500 · 120

Components · 12 shared

  • action-link
  • brand-mark
  • screen-artifact
  • foundry-gallery
  • flagship-slideshow
  • theme-switch
  • theme-studio
  • contrast-audit
  • display-type
  • utility-label
  • visually-hidden
  • skip-link
Reveal
900ms · cubic-bezier(0.19, 1, 0.22, 1) · 2.5rem

Method

Define what makes the product distinct. Build a system that protects it.

Protect the character
Consistency should make a product coherent without erasing the choices that make it recognizable.
Carry intent into code
Design decisions should survive implementation as reusable components, tokens, and working behavior.
Keep judgment human
AI agents accelerate research, design, and engineering. I set direction, test the work, and decide what ships.

Open to new work

One person, the whole seam.

Most teams split design systems, product engineering, and art direction across three roles and then spend the rest of the project reconciling them. I have spent twenty years on that seam, and agents have made it something one person can now hold end to end.

Design systems engineer
Tokens, component contracts, governance, documentation, and the production code that keeps them honest.
Product engineer
Definition through shipped interface — flows, states, content, accessibility, and the judgment calls in between.
Frontend engineer
Accessible, responsive interface code — components, state, performance, and the browser behaviour underneath.
Creative technologist
Art direction and interaction ideas built as working software rather than described in a deck.

If any of that is what you are hiring for, I would like to hear about it.

hello@angvince.com