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

Selected product systems

Products built as systems.

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

Foundry Series · Self-initiated

Different worlds, built to stay different.

Each is a complete brand — its own palette, typeface, voice, and interaction idea — art-directed, written, and shipped end to end. The series is open, and every new world has to earn its own identity rather than inherit one.

The amplification

Many worlds.One set of instincts.

The interesting problem is not making one striking site. It is governing a growing series of them so each is genuinely its own world, and every one still answers to the same judgment.

15 —Worlds in the series so far
Each with its own palette, typeface, voice, and interaction model
15 —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

Foundry is an open series of independently art-directed sites — separate palettes, typefaces, grids, voices, content models, and interaction ideas, and no shared token values between them. 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, not the palette.

That is the part agents made possible. I direct them 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. The speed is new; the responsibility is not. I frame the problem, set the rules, inspect the evidence, and throw away most of what comes back.

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. The type scale below is generated from that source rather than described, so it cannot claim a scale this site does not use. 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.

Color tokens

  • --bg
  • --surface-2
  • --text
  • --accent
  • --accent-2

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 scale

  • s1 · 4
  • s2 · 8
  • s3 · 16
  • s4 · 32
  • s5 · 64
  • s6 · 120

Primitives

  • stack
  • cluster
  • split
  • card
  • chip
  • tag
  • marquee
  • media
  • visually-hidden

Motion.9s · cubic-bezier(.19, 1, .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