← EXPERIENCE // 職歴

SENIOR UI/UX ENGINEER

ACME CORP. / 株式会社

FULL-TIME
PERIOD
2024–PRESENT
REF
REF. 004
LOCATION
Berlin, DE
STACK
Vue 3TypeScriptFigmaStorybookNode.js
LINK
https://acme.example.com ↗

Role Overview

Lead responsibility for the front-end architecture across three SaaS product lines. This included establishing the component library (built in Vue 3 + Storybook), defining the token system that spans both the design tooling (Figma) and the production codebase, and coordinating with four product teams to ensure consistency without creating a bottleneck.

The central challenge of the role is negotiating the distance between what a designer specifies and what engineering constraints will permit at scale. Most of that work is invisible — it happens in reviews, in documentation, and in the structure of the component API.

Design System

Built a token-driven design system from scratch, replacing an ad-hoc mix of hardcoded values. The system is structured around three tiers:

  • Global tokens — raw values (colours, type scales, spacing increments)
  • Semantic tokens — contextual mappings (background-default, text-secondary, border-interactive)
  • Component tokens — scoped overrides for specific components

This structure allows theming at the semantic layer without touching component code — a property that matters for the multi-brand product roadmap.

Architecture Decisions

Moved the product teams from a class-based CSS approach to CSS custom properties with a strict BEM-derived naming convention. The initial resistance was significant; the long-term result is that new team members can understand the styling structure without a walkthrough.

Introduced a formal accessibility audit process into the design review cycle. Previously accessibility was handled reactively (in response to bug reports). The shift to proactive auditing during design reduced post-release remediation time by approximately 60%.