Using AI
how I work
I have thought a lot about the best way to use AI, and I built my own methods and workflows: prompt templates, an AI project folder, MCP servers, API keys and homemade tools, from ideation all the way to deployment. Each project sheet says what was done with AI and what I did myself.
How I work
-
Design system first
I give the images, the logo and visual references to an artificial intelligence, describing the look I want in detail until I get the right style. Since AI does the programming, this step gives me a lot of control over the visuals. I redo it several times if needed, because it affects the whole structure of the site.
-
Evolving templates
I made my own prompt template for new websites. With Claude’s help, I also built my AI project folder template: the skills, instructions and steps the agents follow so every project meets industry standards. When a mistake happens, I fix it in my system once and for all, and it never comes back in the next projects.
-
Custom-built systems
I connect agents to my software with MCP servers: with Figma’s, they read my mock-up directly, without me having to describe every detail. I also build AI models into my own applications with API keys, like the Gemini API in Goals and in Sonde, a website analysis tool I created.
-
What I check
AI agents write the code and help with debugging, but the visual direction, the structure, gathering content from clients, validation and deployment stay under my control. Deployment happens on Firebase, with an automated process.
My tools
-
Anthropic’s coding agent, which I use to code and debug my sites, from my prompt and instruction templates.
-
OpenAI’s coding agent: like the other agents, it writes code and helps with debugging, under my direction.
-
Google’s AI model, which I integrate into my applications through the Gemini API: Goals uses it to analyze daily check-ins.
-
AI-assisted development environment in which I programmed and debugged the Goals application.
-
OpenAI’s conversational assistant, one of the tools in my workflow.
-
AI agent platform specialized in creating ads and brand visuals.
-
Figma feature that generates interactive prototypes from written instructions.
-
MCP servers (Model Context Protocol) connect AI agents to other software. I use Figma’s so the agents work directly from my mock-ups, without images or specs to give them.
AI in this portfolio
Tools
Claude Code (Anthropic), the Figma MCP server and Gemini (Google, through Vertex AI).
Uses
With the Figma MCP server, Claude Code’s agents rebuilt the site directly from my mock-up, without me giving them images or specs; I then fixed the small mistakes. I also used Claude Code to build the animations from my briefs, add the project sheets, write the automated tests and put the site online. It even helped me create the animations in my presentation video, by writing scripts for After Effects. Gemini answers the questions in the chat, from a file drawn from the site’s content.
Done by me
The Figma mock-up (layout, typography, colours and components), the animation briefs and their references, the choice of projects and content, my case studies, and the system that guides the agents: my prompt template and my AI project folder, built with Claude’s help.
Checked by me
The rendering of every section at different screen sizes, the differences from my mock-up, and the corrections requested throughout the project (typos, sizes, animations). Every release went online with my approval.