SFMC Magic Builder

In Product Design, many people try to solve theoretical problems without feeling the friction themselves. My approach was pragmatic: If I can’t use UX and AI to optimize my own daily work, how can I design efficient solutions for millions of people?

Magic Builder wasn't born as a portfolio piece; it was a survival tool created while I was managing high-demand email marketing for Serasa (a major Brazilian data company).

Developing for Salesforce Marketing Cloud (SFMC) requires absolute precision. My manual workflow was a massive bottleneck:

• Time-consuming: 80 minutes per email.
• Clean-up: Manually cleaning "junk code" from visual editors.
• High Risk: Manually checking 20+ links per campaign for millions of customers.

I was acting like a "human compiler." My creative energy was being drained by tasks that technology should have solved—but didn't.

My first instinct was to use ChatGPT. I tried custom GPTs and complex prompts, but it revealed the limits of conversational AI:

• Technical Hallucinations: GPT often invented AMPScript syntax, creating code that crashed inside Salesforce.
• Inconsistency: Being a probabilistic model, the HTML structure changed every time. I spent more time reviewing the AI's work than doing it myself.
• Lack of Workflow: A chat is a conversation, not a tool. Copying and pasting code back and forth is just another bottleneck. I needed a precision tool, not a chat window.

I realized that if the tool I needed didn't exist, I had to build it. I started an AI-assisted development cycle:

• Functional Ideation (Lovable): I prototyped the interface focusing on Utility UX. The design had to "disappear" so the function could shine: raw code in, polished code out.
• Precision Engineering (Cursor): I moved the project to Cursor to code rigid business rules. I created sanitization algorithms that AI alone couldn't maintain consistently, ensuring the HTML followed global rendering standards.

The result is sfmc-magic-builder.vercel.app, a high-performance Single Page Application.

• Zero-Friction Interface: A one-click workflow that cleans code, injects logic, and audits assets simultaneously.
• Audit Dashboard: Instead of hunting for errors in the code, the app extracts all links and images into an organized table. This allows for an instant visual scan of protocols (HTTPS) and tracking (UTMs).
• Trust Layer: The site shows a detailed "Processing Log." Knowing exactly what was removed or injected replaces the anxiety of "did it work?" with technical certainty.

The efficiency of the UX + AI + Code triad was measured in real-time:

• Production Time: From 80 minutes to 10 minutes per email (-87.5%).
• Data Quality: Human errors and AI hallucinations were reduced to zero.
• Vercel Performance: Processing happens client-side. This means it's instant and secure (data never leaves the browser).

This project proves that the future of UX Design is technical orchestration. I stopped being a victim of generic tool limits and became the architect of my own solutions. Magic Builder is now the engine that allows me to deliver with startup speed and enterprise quality.