anastasiia-suhanek

// Anastasiia Sukhanek · design engineerАнастасия Суханек · дизайн-инженер

I design in Figma and ship it in codeПроектирую в Figma и довожу до кода

Tokens, React components, Storybook with accessibility tests and AI agents that write and translate the copy

Токены, React-компоненты, Storybook с тестами доступности и AI-агенты, которые пишут и переводят тексты

● open to design engineer roles● открыта к предложениям на роль дизайн-инженера 8 years in design8 лет в дизайне Prague · remoteПрага · удалённо

Also asДругие ракурсы Product designer →Продуктовый дизайнер → Design systems →Дизайн-системы → Showreel →Шоурил →

~/design-system $ npm run tokens
✓ tokens.json → tokens.css   # primitives → semantic
~/design-system $ npx vitest --run
✓ 21/21 stories pass axe     # caught 3.98:1 contrast → fixed to 5.3:1
~/portfolio $ python3 build.py
✓ dist/ → GitHub Pages        # this site

01 / workработы

A design system, agents, a prototype and this siteДизайн-система, агенты, прототип и этот сайт

  1. 01

    Design system in codeДизайн-система в коде

    Components from a fintech design system rebuilt in React and TypeScript with Claude Code. Tokens live in one JSON and generate CSS, props mirror the Figma component properties. Every story runs axe: the tests caught a contrast bug and a loading button with no accessible name – neither was visible in Figma

    Компоненты финтех-дизайн-системы, пересобранные на React и TypeScript с Claude Code. Токены лежат в одном JSON и генерируют CSS, пропсы повторяют свойства компонентов в Figma. Каждая story проходит axe: тесты поймали ошибку контраста и кнопку загрузки без доступного имени — в Figma не было видно ни того, ни другого

    reacttypescriptstorybookvitestaxemcp
    Storybook ↗GitHub ↗Figma ↗
    21/21stories pass a11ystories без ошибок a11y
  2. 02

    AI agents for UX copy and localisationAI-агенты для текстов и локализации

    Built with the head of design on Claude. The agents write to our editorial rules, check and translate every string into 13 languages and put them straight into the iOS and Android code as a branch ready to merge. The team dropped Phrase after that

    Собрали на Claude вместе с хедом дизайна. Агенты пишут по нашей редполитике, проверяют и переводят каждую строку на 13 языков и кладут строки сразу в код iOS и Android — веткой, готовой к мерджу. После этого команда отказалась от Phrase

    claudeagentsi18ngit
    Read in the Cards case →Подробнее в кейсе про карты →
    ×41 day → ~2 hours per featureдень → ~2 часа на фичу
  3. 03

    A clickable prototype in plain JavaScriptКликабельный прототип на чистом JavaScript

    The whole Cards flow runs in the browser: issue, top up, card details, freeze. Screens slide, sheets rise and states cross-fade like in the app, and a scripted demo plays it for anyone who won’t click

    Весь сценарий карт работает в браузере: выпуск, пополнение, данные карты, заморозка. Экраны сдвигаются, шторки поднимаются, состояния сменяются, как в приложении, а для тех, кто не хочет кликать, есть демо, которое проигрывается само

    javascriptcssprototyping
    Try it →Попробовать →
    15screens, one scriptэкранов, один скрипт
  4. 04

    This portfolioЭто портфолио

    Built with Claude Code: static HTML, CSS and JS on a 4 px grid, two languages in one page, self-hosted fonts. A Python build strips dev-only styles, reserves every image’s box so the page doesn’t jump, fixes Russian line breaks and cache-busts assets before pushing to GitHub Pages

    Собрано с Claude Code: статичные HTML, CSS и JS на сетке 4 px, два языка на одной странице, свои шрифты. Сборка на Python вырезает dev-стили, резервирует место под картинки, чтобы страница не прыгала, не оставляет предлоги в конце строки и сбрасывает кэш ассетов перед публикацией на GitHub Pages

    htmlcsspythongithub-pages
    EN/RUone source, two languagesодин исходник, два языка

02 / stackстек

What I work withС чем работаю

design

  • Figma, Variables
  • Component propertiesСвойства компонентов
  • Auto layout
  • PrototypingПрототипирование

code

  • HTML, CSS, JavaScript
  • React, TypeScript
  • Storybook, Vitest, axe
  • Git, GitHub

ai

  • Claude Code
  • Claude agents for copyАгенты Claude для текстов
  • Figma MCP
  • Storybook MCP

I’m a designer who codes, not a front-end engineer. I build prototypes, design-system components and small tools, and production code goes through review with the developers

Я дизайнер, который пишет код, а не фронтенд-разработчик. Собираю прототипы, компоненты дизайн-системы и небольшие инструменты, а продакшн-код проходит ревью у разработчиков

03 / productпродукт

Product resultsРезультаты в продукте

−54%verification questions to supportвопросов про верификацию в поддержкуKYC → ×3.3×3,3senders top up the wallet on Androidотправителей пополняют кошелёк на AndroidTop up → ×2active senders open the Cards tabактивных отправителей открывают «Карты»Cards →
All cases on the main portfolio →Все кейсы в основном портфолио →

04 / contactконтакты

Get in touchНапишите мне

Looking for a design engineer or product designer role, where design and code sit close

Ищу роль дизайн-инженера или продуктового дизайнера там, где дизайн и код рядом