Generate editable website designs in Figma from the terminal
A designer spent 3 days using Claude Code with Figma to generate a band website as an editable file and pick matching images for an e-commerce prototype. ·
Done withClaude CodeClaude
- What they did
- A UX designer set up Claude Code in the terminal with the Claude desktop app linked to project folders. Claude generated websites, including one for a favourite band, and the designer copied them into Figma as editable files. After editing in Figma, the designer sent a Figma link back to Claude, which worked out the changes. For an e-commerce prototype, one terminal prompt made Claude pull in matching product images and generate filters.
- How it went
- Round-tripping worked well, and the same loop made mobile layouts quick. First designs all looked like generic dark themes, and Claude put new pages onto the home page instead of building separate ones. Browser edits were slow.
- Worth knowing
- Make visual edits in Figma and go back to Claude only when finished, because small colour or text changes through prompts were slow.
Try it yourself with Claude Code
Using my Figma connection, generate an editable website design for [band, brand or project name] with a [mood, e.g. dark, gritty, minimal] look. Build the home page and [other pages, e.g. tour, shop] as editable frames, and pick matching images for [e-commerce items or sections]. You are done when every page is in Figma as editable layers and you have listed where the images came from.
Want help getting this working? Join the Vibe Coding Academy ↗ Run by Alex Finn, who also runs this site.
Source: medium.com · Nov 9, 2026 · Submitted by from search gap: 设计
Related use cases
Build a C compiler with a team of parallel agents
Anthropic's engineering write-up on tasking Opus 4.6 agent teams with building a C compiler.
Generate investment analysis from live market data
The poster built a personal wealth advisor in Claude Code that feeds live market data, macro indicators and news into investment analysis.
Delegate browser tasks like flight booking to Manus
Reviewer used Manus for browser tasks such as fetching an email login code and booking flights, finding it slow from clicking through the UI, and preferred Claude.
Produce a track in Ableton Live by talking
An MCP server that lets Codex drive Ableton Live, used to write and mix a full song from chat messages.
Turn a blog post into an animated infographic
A content creator fed a blog post into Gemini Canvas, which produced a coded animated infographic using brand colors and audience details from the chat thread.
Prototype a promo video and design work with bots
An xAI designer used bots to prototype an animated promo, build a playground from the animation spec, and handle Figma and prototype tasks.
Get 5 like this every morning
The best things people got an AI agent to do, each with the prompt to try it.