2026ShippedGlint UII created Glint UI, a library of 354 animated React components: text effects, cursor effects, WebGL backgrounds, UI primitives and mascots. Every component installs with the shadcn CLI as one file you own and can edit.Case study UI/UX design, ready to build
Gabriel Andrei Villanueva designs the screens and flows of websites and web apps in Figma and hands them over ready to build. Because he also builds them, what you approve in the prototype is what ships.
Deliverables
What you get.
User flows
How each kind of visitor gets from landing to the thing they came to do, in the fewest steps.
Screen design
Every page or screen for phone and desktop, in your brand’s colours and type.
Clickable prototype
A Figma prototype you can tap through and share before a line of code is written.
A small design system
Colours, type, spacing and components named and reused, so new screens stay consistent.
Handover
Designs organised for development, or built straight away by the same person.
Process
How it runs.
Each step ends with something you can see and approve.
- Talk it through
What it should do, what it can skip and what matters most to you.
- Written plan
Scope, timeline and price in writing, before any work starts.
- Flows
The journeys that matter most, mapped before any screen is drawn.
- Screens & prototype
Designs for phone and desktop, linked into a prototype you review.
- Revisions
Changes made on the prototype, where they are quick, not in code.
- Handover or build
A ready-to-build file, or the site built from it.
Toolkit
Tools & craft.
Software
- Figma
Craft
- PrototypingClickable flows in Figma, tried before any code is written.
- Design systemsColours, type, spacing and components, named and reused.
- Responsive designEvery screen designed for phone and desktop.
- Accessibility basicsReadable contrast, real headings and labelled form fields.
Proof
Related work.
2026ShippedGlint UII created Glint UI, a library of 354 animated React components: text effects, cursor effects, WebGL backgrounds, UI primitives and mascots. Every component installs with the shadcn CLI as one file you own and can edit.Case study 
OngoingIn progressAvatar LabI am building Avatar Lab, a studio for procedural 2D characters. Sculpt a body, tune the eyes, chain expressions into animations and export the result as SVG, PNG or JSON.Read the case study : Avatar Lab
OngoingIn progressGrowWiseA web app that helps small business owners borrow with confidence, built with Laravel, Inertia and React. It compares loan offers, works out how much a business can safely borrow, tests debt literacy and explains 26 debt terms in plain language.Read the case study : GrowWiseFAQ
Questions, answered.
What people ask before starting UI/UX design.
Why design and prototype before development?
Changes on a prototype take minutes; the same changes in code take days. You see and click the result before paying for the build.
Can the same person design and build?
Yes. Design and development are done by one person, so nothing is lost between the approved design and the finished site.
What do I get at the end?
A Figma file with the screens, the prototype and the reusable components, organised so any developer can build from it.
Do you design for mobile?
Every screen is designed for phone and desktop; the phone version usually comes first because that is where most visitors are.
Not sure which one you need?
Tell me the problem. I will tell you what it takes, what it costs, and whether you need me at all.
- Written quote
- Fixed scope
- Reply within 24 hours