Design Engineer — Rio de Janeiro
You can count on me to solve problems with design and code — taking your idea off paper and turning it into a product built entirely around your needs. Team player, supercharged by AI: today I go from a rough sketch to a published app on my own. Design and engineering, one pair of hands, for nearly 30 years.
Available Remote · UTC−3 · PT / EN
Scroll
Selected cases
Game Center, live standings and player stats — approved Figma to a token-based module library.
A year of solo trial and error that turned coding assistants into a calibrated delivery harness.
A clinical diary for the 24-hour Holter exam — designed, coded and shipped solo.
that I have worked with at some point in nearly 30 years
Testimonials
Five voices, twenty years apart, one recurring phrase: “team player”.
Say oi
01 — Selected work
Client work commissioned through OPTEN AG (Switzerland), products of my own — and the design work that built the foundation: Petrobras, Eleva, ODGO.
Hover a row — case preview follows the cursor
via OPTEN AG · Mar — May 2026
A national sports federation runs a large public platform: editorial pages, club and league information, and a Game Center where fans follow schedules, results, standings, lineups and player stats during the season. I work on the redesign as a frontend engineer — a design is approved in Figma, and it needs to become real, accessible, fast and maintainable software.
I read the approved Figma file closely — spacing, type, tokens, states, motion — and build it as a frontend engineer: markup, SCSS, TypeScript behaviour, rendered inside server-side views. Game Center, live standings with home/away toggles, team calendars and playoff views, the club finder, player and team statistics. When a layout would break with real data — long club names, missing logos, deferred games — I resolve it in the spirit of the design, as part of the build.
Umbraco v17 on .NET 10; editors compose pages from Block Grid modules, each a strongly typed Razor view. The frontend is vanilla TypeScript and SCSS — no SPA framework — with BEMIT naming over design tokens as CSS custom properties. Interactivity is progressive enhancement with HTMX: filters, search and pagination swap rendered partials in place, so pages keep working and stay shareable. Live game data flows over SignalR.
Focus states, tab order, ARIA and real contrast aren’t in the Figma file — they’re engineering decisions I make while building, checked against WCAG.
Modules like the sponsor slider ship with a harness: the component mounted in isolation and exercised across its real-world states — sponsor counts, container widths, breakpoints — so behaviour is verified before it ever reaches a page.
Every change runs through plan → work → review. A pre-push hook builds the solution and runs the unit tests; a Playwright end-to-end suite exercises the Game Center flows against the PR’s preview deployment before anything merges.
An active redesign, delivered feature by feature: approved designs turned into tested, accessible components built to hold up under live match data — with a frontend conventions doc the team builds on.
Self-directed R&D · 2025 — 2026
A year shipping production code with AI coding assistants inside a live Swiss agency engagement — no mandate, no budget line, no playbook. Every model upgrade raised the ceiling on what was possible, but the failure modes stayed constant: scope drift, degrading sessions, siloed agents, plausible work that failed senior review. Midway through, the thesis inverted — the bottleneck was orchestration, not intelligence. I stopped optimizing model choice and engineered the layer around it. The industry now has a name for that layer: the harness.
The agent touches files outside the ticket, “improves” code nobody asked for, and forgets conventions mid-session. The fix was unglamorous: a persistent instruction set — a CLAUDE.md versioned with the project — encoding conventions, guardrails and scope discipline, refined every time a failure revealed a missing rule. Prompt-region stability: boring, and responsible for the single largest drop in convention violations I measured all year.
Sessions slow down and quality drops as context bloats — full interaction history plus large injected files, until the signal drowns. The intervention: session grounding. A SessionStart hook injects a small set of curated, checkpointed context files instead of accumulated history. The hard-won lesson is a trade-off: injected context must be small and stable, or the grounding mechanism itself becomes the bloat.
Parallel agents fail in a specific way: each completes its task correctly in isolation, and the results don’t compose, because no agent knows what the others learned. The pattern that fixed it: subagents run in fully isolated contexts and return only distilled summaries to an orchestrating agent. Context stays bounded per agent; knowledge still flows laterally through the synthesis step.
The core of the work: five domain-specific review agents encoding the agency’s conventions — markup semantics, CSS architecture, backend patterns, accessibility, scope discipline. The loop that trained them: implement, agents review, senior review catches what remains, every correction saved as structured feedback, agents updated, repeat. Each cycle the gap shrank — measured, not felt — until the flagship reviewer reached 11/11 agreement with the senior’s real PR corrections. Not testimonial approval; empirical calibration.
In July 2026, researchers published “The Harness Effect”: same enterprise scenarios, same prompts, same six models — only the orchestration layer changed. Roughly 38% fewer tokens, 41% lower cost, 44% less execution time, quality statistically unchanged. Their vocabulary retroactively described this year: token maxing was my degradation problem before session grounding; harness leverage matched what I saw at every model upgrade. The layer I had been building had a name.
Harness engineering is interface design. Deciding what context an agent sees is information architecture. Guardrails and scope discipline are constraint design. The flywheel is a usability loop — observe failure, adjust the system, measure again. Nearly thirty years of design practice turned out to be directly load-bearing for a problem that looks, from the outside, like pure engineering.
A calibrated delivery harness, portable across stacks and model vendors: a versioned instruction set, session grounding over checkpointed context, subagents composing through synthesis, and review agents trained by a feedback flywheel against real senior outcomes.
via OPTEN AG · Sep 2025 — Feb 2026
A voice-first wholesale ordering app: buyers speak an order and it becomes matched catalog line items. Six months of UI work — drawer navigation, multi-step checkout with animated states, a 60fps voice recorder with upload queue and retry logic, DE/EN internationalisation.
A wholesale buyer walks the warehouse and orders dozens of line items — each with a unit, a quantity and a variant. Typing that into a phone, one field at a time, is the slowest possible interface for the job. Speaking it is the fastest: the app’s entire premise is that the buyer talks the way they already talk to a sales rep, and the software does the transcription and matching work.
The pipeline is four steps, and the design problem is that the buyer must trust all four. My job on the frontend was to keep every stage visible and correctable: what was heard, what was matched, what quantity was inferred. Nothing is auto-submitted — the final step is always an editable order the buyer confirms.
A voice recorder that stutters destroys confidence in the whole product, so the capture UI runs its waveform and timer at 60fps, driven by native animation rather than React state. Around it sits the unglamorous work: microphone permission flows on both platforms, an upload queue that survives the app going to background, and retry logic for the weak signal you get inside a warehouse. A failed upload never loses a recording.
The order flow is multi-step by design — review the matched items, adjust quantities, pick delivery, confirm — with animated transitions that keep the buyer oriented about where they are and what is still ahead. Navigation is a drawer, so the catalog, the current order and past orders stay one gesture apart. Every screen holds up with a long product name and a missing image, because the real catalog has plenty of both.
React Native with Expo, delivering iOS, Android and web from a single codebase with the same design language on all three. Full DE/EN internationalisation, since the buyers and the sales organisation don’t share a language. Six months from empty repository to a working app in the client’s hands.
Full working app on iOS, Android and web from a single codebase, same design language on all three.
Alexander built the mobile experience for an AI-powered B2B voice-ordering app end to end — voice capture, permissions, the order list and detail views — and turned a complex spec into a clean, working app.
via OPTEN AG · Jan — Mar 2026
A TV production workflow tool for a national sports league: dashboard overview and match detail views with six spec-aligned tabs, built against an agreed JSON data contract so frontend and backend could move in parallel. Plus admin UI refinement on legacy ASP.NET.
This platform is not fan-facing. Its users are the people who put matches on television: the crew planning cameras, feeds, commentary positions and delivery windows for a national league’s season. That audience changes every design decision — density over decoration, everything scannable at a glance, and no interaction that costs an extra click on a match day.
The information architecture settled into two levels. A dashboard gives the season-wide overview: what is scheduled, what is at risk, what needs a decision today. A match detail view holds six tabs, each aligned to a section of the client’s production spec, so the crew navigates the tool with the same vocabulary they already use in their documents. The tabs share one layout skeleton, which keeps the density consistent and the code small.
The backend did not exist yet, and waiting for it would have cost the whole timeline. So the first deliverable was not a screen — it was an agreed JSON data contract, negotiated with the backend team and frozen before either side started. I built every view against mocks that matched that shape exactly; when the real endpoints arrived, they dropped in without reworking a single view. Three months from kickoff to a frontend the crew could use.
Alongside the new Angular frontend sat an existing ASP.NET admin interface — functional, and visually a decade behind the product it now belonged to. I refined it in place rather than proposing a rewrite nobody had budget for: tightened spacing and hierarchy, aligned controls to the new design language, and fixed the interactions that made routine admin work slower than it needed to be. Unglamorous work, and the fastest available improvement to the crew’s actual day.
Frontend delivered against the contract — real endpoints dropped in without reworking the views.
via OPTEN AG · Jul — Sep 2025
A customer portal assembled from a reusable component library I built: ~15 components — sortable tables, slide-in sidenav, tabbed button groups, phone input, dropdown filters, modals — composed into 10+ sections, admin and client views. Mock-first workflow decoupled frontend from backend timing.
The brief looked like ten-plus screens: customer lists, document archives, profile management, admin views. Built screen by screen, that becomes ten-plus sets of one-off table code and ten-plus interpretations of the same design system. So I inverted it — the deliverable was a component library first, and every section became an assembly of parts that already existed.
Roughly fifteen components carried the whole portal: sortable data tables, a slide-in sidenav, tabbed button groups, dropdown filters, modals, pagination, a phone input with country handling. Each was built once, against the design system, responsive by default — so a fix to the table improved every section using it, and consistency stopped being a review conversation.
The backend was on its own schedule, so the frontend built against mock data shaped like the agreed responses. It kept both teams moving in parallel and forced the components to be honest about states — empty, loading, error, one row, two hundred rows — because the mock could produce all of them on demand, long before a real endpoint could.
Two audiences share the codebase: staff administering accounts and customers using their own. Same library, same interaction grammar, different permissions and density — which meant the admin side inherited the polish of the customer-facing side for free, instead of ending up as the usual neglected back office.
15-component library powering 10+ portal sections from one design system.
For a Swiss customer portal, Alexander delivered the administration platform: a collapsible sidebar, a reusable data table, and the customer, documents and profile views — all mobile-responsive and true to the design system.
via OPTEN AG · Jul 2025
A workplace-safety heatmap for an industrial client: incidents mapped by zone so safety leads see where accidents cluster. I translated the Figma design system into working Angular components — buttons, modals, reactive forms with a map position picker — faithful to tokens and interaction specs.
An industrial client records workplace incidents, and the records only matter if a safety lead can see a pattern in them. The interface answers one question at a glance — which zones are hurting people — by mapping incidents to physical locations as heat and clusters, so the intensity is read before any number is.
A data-dense map view is easy to make loud and hard to make readable. The heat scale carries the signal with a single hue, clusters get an explicit boundary rather than another colour, and the surrounding UI stays quiet so nothing competes with the map. It holds up responsively — the same view works on a laptop in an office and a tablet on the floor.
The visual design arrived as a Figma design system, and my job was fidelity: buttons with every specified state, modals, reactive forms including a map position picker for placing an incident precisely. Tokens and interaction specs implemented as given, not reinterpreted — when a design system is delivered that carefully, the useful contribution is discipline, not opinion.
CSV export. The map answers where, but the reporting lives in spreadsheets and regulator paperwork, so getting the data back out was a first-class requirement rather than an afterthought bolted to a menu.
Design system implemented one-to-one: every specified state wired, CSV export included.
Alexander implemented an interactive heat- and cluster-map view — data-dense, responsive, and faithful to the intended visual design.
via OPTEN AG · Sep 2025
A streaming chat interface for a wholesale distributor’s staff: responses render as they arrive, with reactions and file attachments. State managed with Angular Signals — the UI is a function of the conversation — and overlays centralised through CDK Overlay, responsive down to mobile.
An assistant that answers a wholesale distributor’s staff has to feel like it is thinking out loud — responses render as they arrive rather than appearing complete after a wait. The engineering consequence is that the view re-renders constantly while the user is still reading, so every layout decision has to survive text growing underneath it: no jumping scroll position, no reflowing action buttons, no flicker on the message being written.
State lives in Angular Signals: messages, streaming status, attachments, reactions. The view derives from them instead of being synchronised with them, which removes the entire class of bug where a chat looks stale until you click something. Services stay fully decoupled from the components, so the transport can change without the interface knowing.
Chat interfaces accumulate floating things — context menus, a lightbox for attachments, the sidebar with chat groups, create and delete flows. Handled ad hoc, they fight each other over stacking, focus and dismissal. Centralising them through CDK Overlay gave one set of rules for positioning and closing, which is why the interaction semantics stay predictable no matter how the user got there.
Staff use this between other tasks, often on a phone, so the narrow layout was the starting point rather than a late compression of the desktop one — touch targets, reachable actions, and a sidebar that becomes a gesture instead of a permanent column.
Streaming chat shipped with signal-based state and fully decoupled services.
Alexander built a full chat interface — chat groups, context menus, lightbox, sidebar interactions, creating and deleting chats — with careful attention to interaction semantics and mobile-first behaviour.
via OPTEN AG · Feb — Mar 2026
CMS modules for a building-materials manufacturer: grid and carousel layouts sharing one base partial, content fallbacks so half-filled modules still render cleanly, promotional variants with deferred video embeds — and responsive page previews so editors see every breakpoint before publishing.
A CMS module is not finished when it renders the designed content. It is finished when a marketing editor, in a hurry, fills half the fields and publishes anyway — and the page still looks intentional. For a building-materials manufacturer with a large catalogue and a small content team, that scenario is the normal case, not the edge case.
Grid, carousel and promotional layouts share a single base partial, so spacing, typography and responsive behaviour are defined once. Content fallbacks live in that base: a missing image collapses to a layout that still balances, absent text shortens the module instead of leaving a hole. The promotional variant defers its video embed until interaction, so a marketing module never costs the page its load time.
Editors got responsive page previews — every breakpoint visible before anything goes live. It removes the publish-then-check-on-your-phone loop, and with it most of the layout tickets that loop generates.
Umbraco 17 with Razor, composed through BlockListBuilder so modules stay editor-assemblable rather than developer-assembled. The measure of success is negative: no support request that starts with “the page broke when I left the field empty”.
Editors can’t break a layout by leaving a field empty — fallbacks live at the component level.
Own product · 2025
A clinical diary for the 24-hour Holter cardiac exam. The patient taps when a symptom hits; it gets timestamped straight to the doctor’s dashboard. Designed, built and shipped solo — full-stack PWA.
A Holter exam records the heart for 24 hours — but the symptoms live in the patient’s memory. The classic protocol is a paper diary: note the time, note the feeling, hope the watch was right. Correlating that with the recording afterwards is guesswork.
The person using this app may be mid-palpitation. So the interface is one action: tap when a symptom hits. The time is recorded automatically — nothing to write, nothing to remember — and the doctor receives the exam’s full timeline, start to finish. Health data handled per LGPD, access restricted to the doctor.
Vanilla JavaScript, Supabase, Vercel — a full-stack PWA with no framework overhead, installable on the patient’s phone. Designed, built and shipped solo: the same hands did the UX, the interface and the backend.
Live on Vercel.
Own product · 2025 — ongoing
Snap the fuel pump display — Claude Vision reads liters, price and total. No manual input. A mobile app with AI-powered OCR, designed and built solo end to end.
Fuel-tracking apps die at the pump: liters, price per liter, total — three numbers typed on a forecourt with a queue behind you. The data is already on the pump’s display; the friction is the form.
Snap the pump display and Claude Vision reads liters, price and total straight from the photo. No manual input — the fill-up becomes a structured log entry in one gesture.
React Native with Expo, Claude API for the vision layer — an AI-powered OCR flow designed and built solo, end to end.
In development.
Own product · 2025 — ongoing
A SaaS that turns rough ideas into structured prompts. Full-stack on Cloudflare Workers at near-zero infrastructure cost — design, code, billing, all same hands.
Most people know what they want from an AI — they just can’t structure it. PromptNinja takes a rough idea and returns a structured, reusable prompt: the thinking made explicit, ready to run.
Hono on Cloudflare Workers with D1 at the edge and Stripe for billing — a full SaaS that runs at near-zero infrastructure cost. No servers to keep warm; the margin is in the architecture.
In development.
Petrobras · 2012 — 2014
Replaced every people-finding tool across Petrobras worldwide with a single search interface. Reduced building access time from 4 minutes to 90 seconds — and became the first fully accessible application in the company’s history, tested with visually impaired users.
Petrobras ran multiple people-finding tools around the world — different systems depending on building, region and role. The brief had three explicit goals: replace them all with a single light, intuitive application; cut visitor access time — about 4 minutes from reception to authorisation — in half; and unify all workforce data into one secure Single Source of Truth.
Sixteen professionals across multiple teams, 2012–2014. I was the designer responsible for UX, UI, prototyping and UX strategy. We benchmarked every internal locator against the search engines people already used daily — Google, Bing, Yahoo, DuckDuckGo — and mapped eight user groups, from floor and lobby receptionists to fully blind employees, with personas, empathy maps and journeys. The project stayed under NDA until October 2022, so what survives is what successive personal backups preserved.
Research surfaced two candidate models. The more effective one — a single search field combining terms — was set aside for v1 as too innovative for a workforce about to lose every familiar tool in 90 days. The multi-field version shipped first, deliberately: users adjusted to the idea of one locator, and v1 stayed behind as the fallback.
The single field arrived in v2: type “Alexander Rio de Janeiro” and the photo list resolves the rest. Up to 20 combinable terms — name fragments, sector, occupation, CPF, CNPJ — made anyone locatable instantly. Autocomplete was deliberately dropped: CPF and phone-number collisions made it unworkable. And the new stack was fully compatible with JAWS — tested by fully blind users, W3C, WAI-ARIA and WCAG compliant, in three languages: the first fully accessible application in the company’s history.
The most critical profile — the lobby receptionist clearing building access — went from about 4 minutes to 90 seconds per visitor, effectively ending peak-hour queues. Consolidation saved roughly USD 5M a year in licences, maintenance teams and missed transfers. Underneath it all, the workforce database (BDFTP) became the company’s single source of truth for people data, running 24/7.
~$5M in annual savings between licences, maintenance teams and lost transfers. Access time standardised at 90 seconds worldwide. Accessibility went from afterthought to precedent.
Eleva Educação · 2019 — 2021
A video platform redesigned in 2 weeks during the COVID-19 lockdown, plus Avaliação Formativa — a weekly assessment system where teachers track results, identify difficulty areas and deliver personalized online tutoring.
Canal Eleva serves video lessons to students across the Eleva Educação schools, behind the group’s unified login. Version 1 — built before I joined — had digitised nearly every grade, and that archive is what carried remote classes when COVID-19 closed the schools. My work was version 2: a technology upgrade to Angular 9/10 and .NET Core, and a redesign whose process took two weeks inside a one-month project.
Rather than spend the window pushing pixels, I started with interviews: three students, a teacher and a help-desk analyst who supported the platform. The finding was specific — the platform wasn’t precise at locating the video matching that day’s class, which made studying at home unattractive. Students even avoided their phones; not because of video quality, but because of the experience of finding the right lesson.
Asked which platforms they admired and why, users pointed at the big streaming services and their ease of use. That set the bar for the benchmarking, guided the wireframes, and framed feasibility conversations with the developers. One deliberate scope call: emphasise what everyone sees first — the student-facing Canal Eleva — instead of building the video-admin side simultaneously.
With Fibo — Eleva’s new design system — providing ready components, paper sketches translated into Figma almost immediately and went straight in front of users and stakeholders, with feedback collected live in a single session and via prototype links afterwards. That loop is what compressed a redesign into two weeks without skipping validation.
Alongside the video platform, a weekly assessment system: teachers track results, identify difficulty areas and deliver personalized online tutoring — turning a broadcast tool into a feedback loop between teacher and student.
User satisfaction up, measured via NPS. Canal Eleva became the internal case at Eleva Educação for speed of implementation, technology upgrade and cloud savings — and both platforms served 120k students through the lockdown.
Cidadania Já · 2021 — 2022
An immigration planning platform. I led UX and research from discovery through to an investor-ready MVP — problem framing, flows, prototypes, validation.
That was the CEO’s bold claim: as disruptive for immigration as Airbnb was for lodging. Odgo is a free platform helping Brazilians plan their move — Portugal first, then Italy, then anywhere. You register, take a quick quiz that identifies your profile — moving with family, skilled worker, student — and the planner lays out everything needed to get there.
As Senior UX Lead I ran the UX/Research team — three designers, working in parallel with a five-person product team and a full-time CEO. Research was already done when I arrived, so the work started at design synthesis: connecting the interview data to design ideas and compressing it into one concise problem statement.
The deadline was hard: twelve weeks to launch a beta validated with real people and real data, because that demo was the investment case. Ideation ran as short daily collaborative sessions — pair-designing — through wireframes, micro-interaction simulations, a mood board, and the brand and style guide. The style-guide components let the team jump from low-fi straight to hi-fi prototypes; UX ran one-week sprints against the developers’ two, and the time gained became weekly quality workshops.
To make the MVP buildable — and approvable — Odgo was split into four parts: login, the profile-definition quiz, task groups, and the knowledge base. Hotjar tracked real navigation after launch, and the improvements followed what users actually did.
Launched after 12 weeks (Sep–Dec 2021) as the MVP that qualified the startup to raise investment — built to keep changing based on research and user-perceived value.
03 — Lab
Little things I build to think out loud — where a design idea and a few lines of code meet.
AI · Security
A ReAct agent that hunts OWASP vulnerabilities in Python code — 14 deterministic patterns for instant findings, then a local LLM with RAG over the OWASP knowledge base for context and fixes. Runs fully offline on Ollama.
Angular · Utility
Pick your canton, your year and your workdays — and see which Swiss public holidays actually land on them, color-coded past / today / future. Angular 19 with Signals, settings persisted locally, holidays from the OpenHolidays API.
Typography · DX
A template for choosing the typography of a web application — pairings side by side, in real layouts, before a single component is styled.
Just for fun
The snake, remixed — the classic rebuilt from scratch in vanilla JavaScript, because some ideas you only understand by coding them yourself.
DX · Just for fun
Ultimate Mega Power — a VS Code theme in light and dark, “for the most powerful geeks and nerds of the planet”. Published on the marketplace.
02 — About
29y Web design since 1997
A multidisciplinary designer and software engineer. I take an idea from zero to a working product — from design all the way to code — with agile teams or solo.
1997 — 2001
First pixels, first code — interfaces and the code behind them, learned side by side.
Golden Web Award · iBest
2001 — 2006
Timelines, easing, inertia — the animation instincts that still drive my UI work.
Adobe Certified Instructor — since 2005
2006 — 2015
Big-company years — shipping at scale, hands-on through shifting stacks.
Petrobras · LOPE — ~$5M/year saved
2014 — 2018
My first company — entrepreneurship, first products, hard lessons. It failed; the learning shipped with me.
Brazilian Navy · Kawasaki · own studio
2019 — 2025
The turn from designer to developer — Eleva, ODGO, CESAR. Same hands, both crafts.
120k students served
2025 — Present
From rough sketch to published app, solo — faster than ever, same standards.
12 projects · 12 months · 5 stacks
01
No handoff, nothing lost in translation — I ship exactly what I design.
02
Easing and inertia from the Flash years, applied to product interfaces.
03
Tools that make my hands faster — never a replacement for craft.
04
A design is not finished until it is running in production.
“Quite simply, someone you can count on — loyal, honest, always on time. Add a sunny, positive character, and you have not only a valuable contributor but a joy to have on the team.”
04 — Contact
Available Remote · UTC−3 · PT / EN
