Check connected plugins
/pluginsUse this to confirm Figma MCP is available in Claude Code.
Vibe-designExternal creator
Figma and Claude Code for UI design
A workflow breakdown where Claude Code uses Figma MCP to generate UI screens, apply a design system, and move the result into code.
Short summary
The video shows a workflow where Claude Code works with Figma files through MCP, not only with source code.
The key value is using a real design system instead of generating a random polished screen.
For the Opten audience, this is a strong vibe-design example: a human sets direction while an agent composes UI from existing components.
What to take
Figma MCP is more useful when a published component library is connected.
Slash commands speed up generation, but quality depends on file structure and layer naming.
It is better to shape the design in Figma before moving it to code.
Commands and settings
Generate a design
/figma generate-designSlash command for generating a layout in Figma.
Prompts
Design system analysis
Analyze this design system file and explain which components, variables, and patterns should be used before generating new screens.Use this before generation so the agent relies on real components.
Files and links
Pitfalls
Poor layer naming can hurt the generated result.
Without a connected design system, the agent will improvise instead of using components.
The Figma result still needs visual review before implementation.