# Vibe Design

> AI-powered Figma plugin that converts HTML code, web URLs, and AI prompts into fully editable Figma designs with preserved layers, styles, and auto-layout.

## What is Vibe Design?

Vibe Design (vibe2design.com) is a SaaS platform and Figma plugin that bridges the gap between code and design. It allows designers and developers to instantly convert:

- **HTML / URL → Figma**: Paste any URL or HTML code and get fully editable Figma layers (not a flat image)
- **AI Prompt → UI Design**: Describe your interface in natural language, get a pixel-perfect Figma design in seconds
- **Tailwind CSS → Figma**: Native support for Tailwind utility classes, resulting in perfectly organized components

Unlike competing tools that import web pages as static images, Vibe Design preserves the full DOM structure, class names, and Figma Auto-layout — making designs immediately ready for handoff.

## Key Features

- Convert any website or HTML snippet to editable Figma layers
- AI prompt-to-design generation (powered by OpenRouter / multiple LLMs)
- Tailwind CSS native support
- Reference image upload for style matching
- Preserves auto-layout, text styles, and color variables
- Credit-based usage system with flexible pricing
- Chrome extension (Web2Figma) for one-click capture

## Core Links

- [Homepage](https://vibe2design.com)
- [Figma Plugin](https://www.figma.com/community/plugin/1597089912594855032/vibe-design)
- [Chrome Extension](https://chromewebstore.google.com/detail/web2figma/janidblopdmkibjlcalcfjedmicfgboi)
- [Design Gallery](https://vibe2design.com/design)
- [Blog](https://vibe2design.com/blog)
- [Pricing](https://vibe2design.com/#pricing)
- [Full knowledge document](https://vibe2design.com/llms-full.txt)

## Blog Articles

- [How to Use Vibe Design Figma Plugin](https://vibe2design.com/blog/figma-plugin)
- [Creating Product Videos with Remotion](https://vibe2design.com/blog/remotion-product-video)

## About the Creator

Vibe Design is built and maintained by [@maqibin](https://x.com/maqibin) (GitHub: [maqi1520](https://github.com/maqi1520)), an indie developer focused on design-developer workflow tools.

## Contact

- Email: hello@vibe2design.com
- Twitter/X: https://x.com/maqibin
- GitHub: https://github.com/maqi1520