Use Claude Code to draft editable website layouts in Figma
A UX designer used Claude Code and Figma to turn terminal prompts into editable site mockups, then refined them by bouncing changes back and forth.
- What they did
- A UX designer linked Claude Code in the terminal to the Claude desktop app and pointed it at their project folders. They asked it to create website concepts, including a site for their favourite band, then copied the output into Figma so it could be edited as layers. Once they had changed the design in Figma, they shared the Figma link back with Claude so it could interpret the updates. For an e-commerce prototype, a single prompt also got Claude to find fitting product images and add filters.
- How it went
- The back-and-forth workflow was effective, and it also sped up mobile layout work. Early versions tended to default to generic dark looks, and Claude sometimes placed new pages inside the home page instead of making separate ones. Editing in the browser was slow.
- Tips
- Do the visual tweaking in Figma first, then return to Claude when the design direction is settled. Use prompts that clearly separate the home page from other pages, and ask for source details for any images before you approve anything that could affect publishing or rights.
Try it yourself with Claude Code
I’m using Claude Code connected to Figma. Create an editable website concept for [project name] with a [style or mood] feel. Make separate editable frames for the home page and [other pages], and include [specific elements]. For any images or assets, choose ones that match the brief and tell me where they came from. If you think any step would overwrite, publish, delete, or send anything, stop and ask for my approval first. When you’re finished, give me a short checklist of what I should review in Figma before I make further edits.
Fill in the [brackets]. Agents can make mistakes, so review anything before it is sent, paid or deleted.
Get 3 agent uses like this every morning
With the day's top AI news. Free, and one click to unsubscribe.
Related agent uses
Edit a keynote take into two finished video formats
Andreas Fuchs used Claude Code to convert one keynote recording into a polished edit with captions, graphics, branding, music, and both widescreen and vertical exports.
Set up a company workflow with specialized Claude Code agents
They split company work across Claude Code agents for product, design, engineering, and marketing, with a human still steering the overall direction.
Analyze a piano clip for tempo and structure
Claude Code installed audio tools, then analyzed a short MP3 and wrote a report on tempo, form, and stems.
Ask Claude to script Blender tools and motion setups
A Blender animator used Claude to write custom tools, interface tweaks, and a scale visualization tied to sound waves.
Build a balloon creature simulator for a light sculpture
They used Claude Code to make a Go-based balloon physics simulator with a web front end for a Burning Man totem.
Run a shared video edit with coding agents
Kino let Luke and Donald work with coding agents on one video timeline at the same time.