Claude Code + Salesforce: Turn a Hand-Drawn Sketch into a Lightning Record Page

0:00 One drop updates the whole page

Watch: I drag a deal to Closed Won, and every number on this page updates. Hi, I'm Cédric from Avonni. I gave Claude Code a sketch, and it built this Salesforce record page. Live data, no code. In this tutorial, I'll show you exactly how, from the sketch to the page.

0:19 The sketch

The sales team sketched what they want on each account. Three numbers at the top. A board of the deals, one column per stage. And a donut, with the amount at each stage. Drop a card on another stage, and everything refreshes.

0:34 The prompt

All you need is the Avonni Experience Components package, and the Avonni Agent Skills in Claude Code. The setup video is in the description. In an empty folder, with the sketch in it, here's the whole prompt. Here's a sketch of the Account record page our sales reps want. Build it as an Avonni Dynamic Component that shows each account's own data, and activate it: I'll drop it on the Account record page myself in Lightning App Builder. Make it clean and polished: generous spacing between every block, nothing cramped. Claude reads the sketch, loads the Avonni skill, and checks the Avonni documentation for each component, so it doesn't guess a single setting. The Salesforce side, the fields, the filters, the deploy, it already knows. Before building anything, it shows a plan, box by box. We say: looks good, build it and activate it. It writes the component, deploys it, and activates it.

1:32 The boss adds a box

Then the boss adds a box: a map of the account's contacts. Same conversation, one message with the new sketch. Claude adds a card next to the donut, with a pin at each contact's mailing address, zooms on the pins, and activates a version two.

1:48 Put it on the page

Where it shows is our call. In Lightning App Builder, create an Account record page with a full-width template. Search for AX dash: these are the Avonni components for App Builder. Drag AX - Dynamic Component onto the page, pick the component Claude built, and check Display as Card. It's free on the AppExchange, with ten production licenses. Save, activate, and assign it as the org default.

2:16 The test

Let's open an account. Three hundred twelve thousand five hundred dollars in the pipeline, five open deals. The route optimization deal just closed. We drag it to Closed Won. The stage is saved. The open pipeline drops to two hundred seventeen thousand five hundred, won this year jumps to two hundred sixty-nine thousand, and four deals are left open. Below, the donut follows, and the map pins every contact. Side by side with the sketch, that's the page we asked for.

2:48 Why not standard, or code?

Could a standard page do this? No: there's no Kanban on a record page, and standard components can't refresh each other after a drop. And Claude could write it all in code, but then you own that code, through three Salesforce releases a year. With Avonni, Claude only writes the configuration. The components are maintained for you, and you can change any setting yourself in the Component Builder.

3:13 Recap

So: one sketch, one prompt, a working record page. One more message for the map, and one drop updates the whole page. The links are in the description. Thanks for watching!

3:26 Next step

Next, watch how to set up the Avonni Agent Skills in Claude Code, and turn your own sketch into a page.