Convert Figma Design to HTML & CSS with Claude + MCP!
You no longer have to manually convert your Figma designs into code!
In this video, I show you step-by-step how to convert a Figma design to HTML and CSS code using Claude's new MCP (Model Context Protocol) feature.
🎨 In the video, I cover:
Figma → Code conversion process
How does MCP integration work?
How to give Claude the right prompt
Staying connected to the design system
Font Awesome, Google Fonts, and Unsplash integration
💡 This video is specifically for UI/UX designers and those looking to step into the front-end.
👉 After watching, you too will be able to easily convert your own Figma designs into code.
#Figma #Claude #MCP #AI #Frontend #UIDesign #HTML #CSS #designsystem
PROMPT:
You are a designer/designer working on the selected frame in my Figma file. Your task: convert the selected frame to responsive HTML + CSS (clean, semantic, accessible), adhering completely to the design (font, spacing, colors, sizes, alignment, margins, radius, shadows, opacity, text hierarchy, visual proportions, etc.).
Basic rules (must apply):
Export all colors, fonts, and spacing values used in the design as CSS variables (custom properties) (e.g., --color-primary, --space-8, --font-base).
Map all components to semantic HTML elements (e.g., header, nav, main, section, article, button, form, label, ul/li).
Use grid and flexbox for responsive behavior; use rem / clamp() for text sizes; and use percentages and max-width for container widths.
Maintain the design's spacing, alignment, and typography rules as close to pixel-perfect as possible, but apply proportional transformations for responsiveness (e.g., stacked on mobile, inline on desktop).
Accessibility: alt text for all images, aria-label or meaningful text for buttons and links, and contrast controls.
All images and icons will be optimized; provide an asset list and download URLs.
Fallback / source rules (custom):
If you can't automatically generate the icons used in the design, use Font Awesome (v6) first; if the icon isn't available in Font Awesome, fallback to Google Material Icons (Google's icon library). Use i and svg in HTML and show examples of usage.
If the required font isn't automatically generated, add the closest font from Google Fonts and include a font-family replacement (system fonts).
If you can't generate or export actual images (photos), use Unsplash (high-quality) as a placeholder. Provide example Unsplash URLs that embody the spirit of the design.
Output format and delivery (required):
index.html — semantic, clean structure.
styles.css — all styles; CSS variables at the top; example with responsive breakpoints (e.g., 320px, 768px, 1024px).
assets/ folder or downloadable links (icons, image-placeholders).
Coding details (requirements):
Map design tokens to CSS variables (colors, font-sizes, spacing, border-radius, shadow).
Use BEM-like class naming or an open component structure for components (.btn, .card, .header__nav).
Responsive grid: grid-template-columns for desktop; provide media queries with a single column on mobile.
Add responsive image support for images using srcset/sizes.
If a particular component's behavior (hover, active, focus, disabled) is included in the design, provide examples of it in the CSS.
Additional guidance: If you have any design uncertainties (e.g., which image to use or icon variation), first follow the Font Awesome / Material Icons recommendation and provide 2-3 alternative image URLs from Unsplash. Add a short comment (/* comment */) next to each important line so developers understand why you made that decision.
Expected final output: Ready-to-use index.html and styles.css (and asset links), along with a short usage note. The code should be clean, commented, and closely aligned with the design.