ux/ui design + ai engineering

I design interfaces and then I build them. One person, no handoff.

Working with AI coding agents from first sketch to production.

based in brazil working worldwide open to roles and freelance

about 01

design that leaves the mockup

I work as a UX/UI designer and I also build what I design. Research and interface on one side, working code on the other, with agents like Claude Code and Codex CLI running the engineering with me. The point is not speed. It is that the person deciding how something should feel is the same person putting it in production.

Trained in design, with a PhD in psychology: I design for how people actually think. The building part I learned by doing it.

selected work 02

projects where the research, the design and the build were the same job.

/ 004 · doctoral research from families to a parental guidance service

/ 003 a landing page that sells without pressure

/ 002 · under NDA practice management for nutritionists

/ 001 · under NDA clinic management for psychologists

clinic software

Wireframe, not a screenshot. The real screens are under NDA, so the layout is redrawn in my own visual language.

Management software for psychology clinics. I designed the new financial module, where session, charge and payment meet, and built the prototype around that flow.

problem

The financial area was the part of the product the clinic trusted least. Sessions, charges and receipts sat in separate screens, so the real accounting kept happening in a spreadsheet outside the software.

research

Billing and receiving rules, the dependencies between modules, accessibility, the design system and Apple's Human Interface Guidelines, all read before the first screen was drawn.

solution

One screen that answers the question the clinic actually asks: who has paid and who has not. Two indicators up front, how much I generated and how much came in, numbers before charts, plain words where the product used accounting jargon, and advanced options only when they are needed.

the system

I kept three things apart: the status of a session, the decision to charge and the payment itself, each in the module that owns it. States, exceptions and reversals were modeled so agenda and financial tell the same story, which is why the prototype includes the modules the money flows through, not only the financial screens.

where ai came in

Codex as the build partner, so every iteration ran as code in the browser instead of static screens. I also wrote skills, reusable routines for AI agents, to review structure, interface and visual consistency against traceable criteria, with data protection built in and a person making the final call.

delivered

Navigable prototypes, checks with synthetic scenarios and documentation for development that ties the design intent to the rules needed to build it. A financial module the clinic reads at a glance.

open the interactive prototype password

The real product running in the browser, with name and brand removed and fictional data. Ask me for the password.

/ 002 · under NDA practice management for nutritionists

nutrition software

Wireframe, not a screenshot. The real screens are under NDA, so the layout is redrawn in my own visual language.

A different product from the same holding: management software for nutritionists. I designed its financial module from scratch, around the way a nutrition practice actually charges.

problem

Nutritionists do not charge by session. Plans, packages and recurring follow-ups break the session logic, so the psychology module could not be reused. The financial screens had to start from how a nutrition practice makes money.

solution

Money organised by when it arrives instead of by appointment: pending, due today, this week, each with its own total. The plan or package shows on every line, so a recurring charge reads as recurring, and what left the account sits next to what came in.

where ai came in

Claude Code as the build partner from the first sketch. Each flow went from idea to clickable code inside the same working session, so reviews happened on a running screen, not on a drawing.

result

A financial module specific to nutrition practices, with its own design system and its own logic, designed from scratch and delivered as a working prototype.

open the interactive prototype password

The real product running in the browser, with name and brand removed and fictional data. Ask me for the password.

/ 003 a landing page that sells without pressure

cria psi

The pre-launch page, running here as it ran live. Move the cursor across the sky. The button opens the official page.

A landing page for an online course. Everything except the course itself is my work: the research, the copy, the design, the motion and the build.

see it live ↗

problem

The audience is psychologists and psychology students who want to create content but distrust anything that sounds like marketing. A page with countdowns and "last spots" would contradict the course itself, which teaches showing up online ethically and as yourself.

research

I started from the doubts people bring before buying: whether they need to be posting already, whether students fit, how much of their life they have to expose, what happens when they freeze. Those questions set the order of the page and became its FAQ.

copy

Written in the teacher's own voice, informal and direct, and honest about what the course is not. One section says plainly who it is for and what nobody will find there, and the closing promises no pressure and no last spots.

design and motion

The course map is a constellation: each star opens a module, by cursor or keyboard. Testimonials arrive as a vertical video feed, one per screen, the way this audience already watches them. Photos of the teacher assemble into a mosaic as you scroll. Every movement has a job, and all of it respects reduced motion.

where ai came in

Started in Codex and built mostly with Claude Code. Every animation was written as code and tuned live in the browser on desktop, tablet and phone, so timing and triggers changed in minutes, not in rounds of handoff.

result

In production as the course's official page, together with the starry pre-launch page for the launch workshop, the one running above.

/ 004 · doctoral research from families to a parental guidance service

propap

A parental guidance program for Brazilian families, built from what the families themselves brought. My doctoral research, run as discovery.

01
evidence
A demand shows up in the records of the families, in their own words.
02
reading
Content analysis turns that demand into a pattern instead of an anecdote.
03
decision
The program changes: a module moves, an order changes, a wording is rewritten.
04
material
The decision becomes a page in the manual and a sheet the family takes home.

problem

Most parental guidance programs in use here were designed somewhere else, for other routines and other households. The intervention had to answer the demands and the context of Brazilian families.

my contribution

I ran the investigation and shaped the program: which questions to ask, how to read the answers, and what the service would become. Collection and coding were shared with collaborators, and the thesis records who did what.

research

Document analysis of 49 families for the range of demands, content analysis to organise them into categories, and an in depth study with two mothers to see how one demand actually plays out at home.

decisions

Nothing entered the program because it sounded good. Two chains are documented end to end, from the family record to the printed material.

delivery

A modular program with a manual and support materials for each session. Everything shown here is an excerpt, with no data that identifies a family.

results and limits

The program exists and the studies show where it holds. Field validation at scale was still ahead, and the work says so rather than claiming more.

quantitative side

A systematic review and the adaptation of the MAPS instrument sit next to this: measurement, psychometrics and reading whether a tool is worth trusting.

/ exploration · v3 a training log for people who lift

load over time

The proposal running here as it runs on its own. The phone on the right is live: tap a set and it logs the previous load, then starts the rest timer. Written in Portuguese, the language the app speaks.

A strength log I design and build for myself. The third pass is not a redraw. It is what the visual system becomes after reading how people train, what they log between sets, and which apps they keep.

the question

Am I lifting more than last month? Whatever does not answer that gets out of the way, including the parts a fitness app usually adds to look friendly.

research

Two or three taps per set is the ceiling before someone changes apps. The median user stops at nineteen weeks, and the first four weeks decide who stays. Nine products were read for the one thing each of them does well enough to borrow.

what changed

Eleven changes, each tied to a finding. Marking a set copies the load from last time, so a set that repeats costs one tap. Load moves by plus and minus in the step of the real equipment, never through the system keyboard. The workout screen turns to ink, because it is read at arm's length in a dark gym.

the rule

Inversion is the only special effect, so it always means something: rest inverts the screen, a record inverts the pill. No second accent, no confetti, no mascot, no score nobody can explain.

explorations 03

Prototypes I build for myself. Less case study, more sketchbook.

A strength log built around one honest question: am I lifting more than last month? The third pass rebuilds the visual system out of research on who lifts and which training apps they keep.

this portfolio

The page you are reading. One HTML file, written with Claude Code while type, spacing and motion were decided on the real page, not in a mockup. No framework, no template. The NDA prototypes are encrypted in place, so the work shows without naming the client.

contact 04

let's talk

For roles, freelance or just to compare notes on designing with AI.

gncauduro@gmail.com

gio cauduro one person, design to deploy