Luigui Calderin Portfolio
This portfolio is both the deliverable and the case study. It documents how I designed my professional calling card end to end: visual identity, a custom design system, build and migration across platforms, using AI as a support tool —never as a substitute for judgment— at every stage.
01 - Identity
AI as a starting point, judgment as the filter
The first drafts came out of Figma Make. AI helped me explore fast, but nothing stayed as-is: every screen went through a deliberate editing process —adjust, reorder, redesign and redefine— until it answered an intent, not a generic template.
Figma Make with prompts for building the portfolio
40% AI
Initial exploration of the visual base with Figma Make as a generative tool.
60% manual
Hierarchy, refinement and final definition with my own design judgment.
02 - System
A design system for your own portfolio
Building a design system for a portfolio might seem excessive, but it was the opportunity to demonstrate technical judgment. Foundations, components, color variables, and dark mode were all defined.
Foundations defined for the portfolio
Button-type components
From variables to tokens
To get to tokens, I first define the primitive variables —the base color values— and then the semantic ones, which give each value a role within the system. The good practice: keep styles connected to those variables, so a change in the base value propagates on its own across the whole interface.
Primitive color tokens — system foundation
Semantic color tokens
Color variables linked to color styles
Dark mode
Not every portfolio defines a dark mode. Setting light and dark from the system —and not as a last-minute patch— kept the switch consistent across the whole interface, caring for contrast and respecting the user's preference.
Portfolio home in light and dark mode
Component documentation
I documented the Button component —the most used in any system— following the conventions of the design systems I've worked with. With a precise prompt, Claude generated the base structure in a frame; from there on, the work was refining and fixing what the tool didn't resolve on its own. Almost the entire system was built by hand; the documentation was the exception, and even then with clear judgment about what to ask for and how to evaluate the result.
Button component documentation
03 - Build
From Figma to Webflow
A working base of HTML and CSS, plus experience with no-code tools, is what let me build by hand. With the Figma to Webflow plugin I transferred the variables directly, bringing fonts, colors and sizes already defined. For what required code —the light/dark toggle, animations and hover— I used Claude from the Webflow MCP, solving each technical need without leaving the workflow.
Portfolio workspace in Webflow
50% AI
Light/dark toggle, hover, microinteractions and text tweaks, with AI as an assistant.
50% manual
Structure, containers, headings, pages and the overall build.
Although the domain migrated to Framer, the portfolio is still published on its .webflow.io domain, where the result of this stage can be verified. It can be seen here.
04 - Launch
Moving to Framer
Exploring alternatives, Framer showed up as a more agile and visual option. Migrating meant rebuilding from scratch, but the result justified it: it's especially handy for achieving polished transitions without diving fully into code.
Portfolio workspace in Framer
05 - Conclusions
Lessons from this project
01
AI doesn't replace judgment, it accelerates it
Figma Make was useful for exploring fast. Without a clear sense of what to keep and what to discard, the result would have been generic.
02
A well-built design system saves real time
What seemed excessive for a personal project proved its value in every iteration: global changes propagated in seconds, not hours.
03
Switching platforms has a cost and a gain
Moving from Webflow to Framer meant rebuilding, but also adding to my workflow a tool I now use regularly.
AI is a tool: it speeds up processes, reduces friction and boosts productivity, but it shouldn't become indispensable in order to work. Designing with AI without design judgment, or coding with AI without understanding the code, is like learning to drive only an automatic: the manual transmission is the foundation —whoever masters it can drive any vehicle, but whoever only knows the automatic is stuck the day they face a manual. This portfolio was built with AI as support, never as a substitute for judgment.
