Luigui Calderin Portfolio
This portfolio is not just the result — it is also a project in itself. It documents the design process behind my professional presentation: from visual identity to platform migration, with AI as a supporting tool at every stage.
01 - Identity
AI as a starting point, judgment as the filter
The first drafts were generated with Figma Make. AI helped explore quickly, but everything that made the cut was the result of an editing process guided by personal judgment: adjusting, reordering, redesigning, and redefining.
Figma Make with prompts for building the portfolio
40% AI
The visual foundation of the portfolio was built using Figma Make as a generative tool.
60% manual
Every element was adjusted, reordered, and redefined with personal and professional judgment.
02 - System
A design system for a one-person 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 obtain tokens, primitive variables are defined first — the base color values — followed by semantic variables, which assign each a role within the system. A good practice is to keep styles directly connected to these variables: that way, any change to the base value propagates automatically throughout the entire system.
Primitive color tokens — system foundation
Semantic color tokens
Color variables linked to color styles
Dark mode
Not all portfolios have a defined dark mode. Establishing both modes from the design system in Figma ensured that the light-to-dark switch was consistent across the entire interface, with user accessibility and preference in mind.
Portfolio home in light and dark mode
Component documentation
The Button component — the most widely used in any system — was documented following the conventions of design systems I have worked with. With precise prompt instructions, Claude generated the base structure in a frame; from there, the work was to refine and correct what the tool could not resolve on its own. 95% of the system was built manually — the documentation was the exception, but with clear judgment about what to ask and how to evaluate the result.
Button component documentation
03 - Build
From Figma to Webflow
A basic knowledge of HTML and CSS, combined with experience using no-code tools, made it possible to approach the build manually. Through the "Figma to Webflow" plugin, variables were transferred directly, bringing fonts, colors, and spacing already defined. For parts requiring code — the light/dark toggle, animations, and hover effects — Claude was used via the Webflow MCP, solving each technical need without leaving the workflow.
Portfolio workspace in Webflow
50% AI
Light/dark mode, hover effects, microinteractions, and text corrections with AI as an assistant.
50% manual
Base structure, divs, containers, headings, pages, and the entire build itself.
Although the domain moved to Framer, the portfolio remains published on its .webflow.io domain — where the result of the work done on this platform can be verified. It can be seen here.
04 - Launch
Moving to Framer
Exploring alternatives, Framer stood out as a more agile and visual option. The migration meant rebuilding from scratch, but the result justified the effort. It is a highly practical platform for those looking to achieve striking transitions without diving deep into code.
Portfolio workspace in Framer
As a takeaway from this project: AI is a tool — it supports productivity, speeds up mechanical processes, but it should never be a dependency. Using AI to design without knowing how to design, or using AI to code without understanding code, is like learning to drive an automatic car with no idea how to drive a manual — the day you only have a manual, you're stuck. Same with AI: if one day you can't use it, you won't be able to do anything at all.
05 - Conclusions
Lessons from this project
01
AI doesn't replace judgment, it accelerates it
Figma Make was useful for exploring possibilities quickly. Without clear judgment about 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 with every iteration. Every global change took seconds.
03
Switching platforms has a cost and a gain
Moving from Webflow to Framer meant rebuilding, but also learning a tool that is now part of the workflow.
AI is a tool: it speeds up processes, reduces friction, and boosts productivity, but it should never become indispensable to get the work done. Designing with AI without having design judgment, or coding with AI without understanding the code, is like learning to drive only in an automatic car: manual transmission is the foundation — those who master it can drive any vehicle, but those who only know automatic are limited the day they have to drive a manual. This portfolio was built with AI as support, never as a substitute for judgment.
