Vibe Design

About this plugin

Vibe Design is an AI-powered Figma plugin laser-focused on bridging “ideas → code → live websites” into fully editable design files. Its power comes from three core, practical modes.Three Main Features:AI Chat + HTML Generation & Conversion

Chat with the AI naturally (English/Chinese supported), describe your UI idea — it generates/refines the HTML for you, then instantly converts it into a clean, editable Figma design.

→ Ideal for: brainstorming from scratch, rapid iteration, letting AI polish or complete partial code.

Example prompt: “Create a modern SaaS login page in dark mode with glassmorphism, then turn it into Figma”

Direct HTML to Figma

Paste any HTML + CSS (including inline Tailwind classes) → plugin parses and rebuilds it as real, layered, editable Figma elements.

→ Preserves Auto Layout, text layers, component hierarchy, class naming — not a flat image.

→ Perfect for: bringing legacy projects, open-source components, or quick code snippets directly into Figma for further editing.

Clone Any Website URL

Paste a live webpage URL → plugin intelligently captures structure, layout, and styles, then recreates it as an editable Figma file.

→ Includes spacing, typography, colors — close to pixel-perfect recreation.

→ Great for: competitor analysis, inspiration stealing (with heavy customization), fast remixing of live sites.

Extra Advantages:Tailwind CSS native compatibility — Generated designs align seamlessly with Tailwind dev workflows (consistent spacing, class logic)

Production-grade output — True layers + Auto Layout + constraints, zero rework pain

Reference image upload support for stronger style control

How to use (literally 3 steps):Install & open Vibe Design in Figma, add your API key

Pick your mode:AI chat (describe → generate HTML → convert)

Paste raw HTML code

Enter website URL to clone

Run — in seconds to tens of seconds, a fully remixable design lands on your canvas!

Whether you're starting from pure ideas, reusing code, or cloning live sites, Vibe Design gets you there in one smooth step.

Turn HTML snippets, entire websites, and wild concepts into editable, dev-ready Figma files — design & dev velocity unlocked!

Vibe Design 是一款 AI 驱动的 Figma 设计插件，专注于把“想法 → 代码 → 真实网站”快速桥接到可编辑的设计稿。核心就是三大实用功能，让你告别手动重做和低效复制。三大核心功能：AI 对话生成 + HTML 转换

和 AI 像聊天一样描述需求（支持中英文），AI 会帮你先生成/优化 HTML 代码，然后一键转为专业、可编辑的 Figma 设计稿。

→ 适合：脑洞大开、快速迭代、需要 AI 帮忙润色或补全代码的场景。

示例提示：“帮我做一个现代的 SaaS 登录页，深色模式 + glassmorphism 风格，然后转成 Figma”

直接输入 HTML 转 Figma

粘贴任意 HTML + CSS（或内联 Tailwind 类），插件瞬间解析并生成结构完整、可编辑的 Figma 图层。

→ 保留 Auto Layout、文本层、组件结构、class 命名逻辑，而不是扁平图片。

→ 适合：把旧项目、开源组件、快速抄来的代码直接搬进 Figma 继续改。

一键克隆网站 URL

输入任意网页链接（https://...），插件自动抓取页面结构与样式，智能转换为 Figma 可编辑设计稿。

→ 包含布局、间距、字体、颜色等，接近真实还原。

→ 适合：参考竞品、抄作业、快速复刻灵感站，但想大幅修改。

其他加分项：Tailwind CSS 原生友好 —— 生成的设计天然贴合 Tailwind 开发习惯（类名、间距系统一致）

生产级输出 —— 全是真实图层 + Auto Layout + 约束，改动零阻力

支持参考图片上传，进一步控制风格

使用流程（三步搞定）：在 Figma 插件里打开 Vibe Design，输入 API Key

选你想用的模式：AI 聊天模式（描述 → 生成 HTML → 转设计）

直接粘贴 HTML 代码

输入网站 URL 克隆

点击执行，几秒到几十秒后，完整可魔改的设计稿就出现在画布上了！

无论你是想从零脑暴、复用代码、还是直接“偷”参考站，Vibe Design 都让你一步到位。

把 HTML、网站、想法全部变成 Figma 可交付文件，设计 + 开发效率直接起飞！