# Vibe Design — Full Knowledge Document **Version**: 1.0 **Last Updated**: 2026-05 **Domain**: https://vibe2design.com **Contact**: hello@vibe2design.com --- ## Overview Vibe Design is an AI-powered Figma plugin and SaaS platform that converts HTML code, web URLs, and natural language prompts into fully editable Figma designs. The core value proposition is speed and fidelity: instead of manually recreating a web design in Figma, users can import it in seconds with all layers, styles, and auto-layout intact. The platform serves two primary audiences: 1. **Designers** who want to import and iterate on existing web designs inside Figma 2. **Developers** who want to quickly prototype UI mockups using AI prompts or existing HTML/Tailwind code --- ## Product: Figma Plugin **Name**: Vibe Design **Category**: Figma Community Plugin **Install URL**: https://www.figma.com/community/plugin/1597089912594855032/vibe-design **Pricing**: Freemium (free credits on sign-up, credit packs available) ### Core Capabilities #### 1. HTML / URL to Figma (Web2Figma) - Paste any public URL or raw HTML/CSS snippet - Plugin fetches the page and converts the DOM into Figma layers - Preserves: text layers, shape layers, images, color fills, font families, border radius, shadows, auto-layout (Flexbox → Figma Auto Layout), and component grouping - Result is **fully editable** — not a screenshot or flattened image - Supports Tailwind CSS class names, which map to Figma design tokens #### 2. AI Prompt to Design - Describe a UI component or full-page layout in natural language (English or Chinese) - Powered by multiple LLMs via OpenRouter (including GPT-4o, Claude, and others) - AI generates an HTML/CSS intermediate representation, then converts it to Figma - Optional: upload a reference image to guide the style #### 3. Chrome Extension (Web2Figma) - Install URL: https://chromewebstore.google.com/detail/web2figma/janidblopdmkibjlcalcfjedmicfgboi - One-click capture of any webpage you are currently viewing in Chrome - Sends the page directly to the Figma plugin for conversion - Works with protected/authenticated pages visible in your browser ### What Makes Vibe Design Different | Feature | Vibe Design | Typical competitors | |---------|-------------|---------------------| | Import result | Fully editable layers | Flattened image | | Auto-layout | Preserved (Flexbox → Figma) | Lost | | Text layers | Editable text | Rasterized text | | Tailwind support | Native | None | | AI prompt-to-design | Yes | Varies | | Reference image | Yes | Rarely | | Chrome extension | Yes | Sometimes | --- ## Product: SaaS Platform **URL**: https://vibe2design.com **Tech Stack**: Next.js 16 (App Router), PostgreSQL, Prisma ORM, Better Auth, TanStack React Query, Radix UI, Tailwind CSS, next-intl ### User Account Features - Sign in with GitHub or Google OAuth - Credit/points system (earned on signup, purchasable in packs) - Credits expire using FIFO consumption — oldest credits used first - API key management for programmatic plugin access - Design history and public sharing ### Pricing Model - **Free tier**: Credits included on sign-up (enough to try all features) - **Credit packs**: One-time purchase via WeChat Pay or PayPal - No subscription required — pay as you go - Enterprise/API access available via API keys ### Supported Payment Methods - WeChat Pay (微信支付) — primarily for Chinese users - PayPal — for international users --- ## Design Gallery **URL**: https://vibe2design.com/design **Description**: A public gallery of AI-generated and imported designs created by Vibe Design users. Designs can be made public or kept private. Each design links to its Figma source. --- ## Blog **URL**: https://vibe2design.com/blog Publishes tutorials, use cases, and technical articles about design-developer workflows, Figma plugins, and AI-assisted design. ### Published Articles - **How to Use the Vibe Design Figma Plugin** URL: https://vibe2design.com/blog/figma-plugin Step-by-step guide covering installation, credit usage, HTML import, and AI prompt generation. - **Creating Product Videos with Remotion** URL: https://vibe2design.com/blog/remotion-product-video Technical tutorial on programmatic video creation using React and Remotion, relevant for design teams automating marketing assets. --- ## Internationalization The platform supports two languages: - **English** (default): https://vibe2design.com - **Chinese (Simplified)**: https://vibe2design.com/zh All marketing pages, blog posts, and the dashboard UI are available in both languages. --- ## Technical Architecture - **Framework**: Next.js 16 with App Router and React Server Components - **Database**: PostgreSQL with Prisma ORM - **Authentication**: Better Auth with GitHub and Google OAuth - **AI Integration**: OpenRouter (supports multiple LLM providers) - **Payments**: WeChat Pay API, PayPal REST API - **Deployment**: Vercel ### API Access Developers can integrate Vibe Design via API keys: - Bearer token format: `sk-[hash]` - Endpoints: `/api/v1/designs`, `/api/v1/credits`, `/api/v1/user` - Rate limited per API key --- ## Use Cases 1. **Rapid prototyping**: Describe a landing page in natural language → get Figma mockup in seconds 2. **Competitive analysis**: Import competitor websites into Figma for design study 3. **Design handoff reversal**: Convert delivered HTML back to Figma for design system updates 4. **Tailwind component library**: Convert Tailwind UI components into Figma component libraries 5. **Client presentations**: Quickly create Figma mockups from brief text descriptions --- ## Frequently Asked Questions (Semantic Q&A) **Q: Can Vibe Design import any website?** A: Yes, any publicly accessible URL. For authenticated pages, use the Chrome extension which captures the page as rendered in your logged-in browser session. **Q: Is the imported design editable?** A: Yes. Unlike tools that produce screenshots, Vibe Design produces fully editable Figma layers including text, shapes, fills, and auto-layout groups. **Q: Does it support Tailwind CSS?** A: Yes. Tailwind utility classes are natively understood and mapped to appropriate Figma design properties including colors, spacing, typography, and border radius. **Q: How does the credit system work?** A: Each design generation or import consumes credits. Credits are included free on signup. Additional credits can be purchased as one-time packs (no subscription). Credits expire and are consumed oldest-first (FIFO). **Q: Is there a free plan?** A: Yes. New users receive free credits upon signup that allow full feature access without any payment. **Q: What AI models power the prompt-to-design feature?** A: Multiple models are available through OpenRouter integration, including GPT-4o and Claude. The plugin selects the best model for UI generation tasks. **Q: Can I use Vibe Design programmatically?** A: Yes. API keys are available in the dashboard. The API follows REST conventions at `/api/v1/`. --- ## Competitive Landscape Vibe Design competes in the "code to design" and "AI UI generation" space alongside: - **Anima** — HTML to Figma, but produces less editable output - **Locofy** — Design to code (opposite direction), different use case - **Builder.io / Visual Copilot** — Code import, enterprise-focused - **Galileo AI / Uizard** — AI UI generation, no HTML import Vibe Design's differentiation: fully editable layers + Tailwind-native + AI prompts + URL import in a single plugin. --- ## Creator Information **Developer**: Ma Qi Bin (马奇斌) **Twitter/X**: https://x.com/maqibin **GitHub**: https://github.com/maqi1520 **Email**: hello@vibe2design.com Indie developer focused on design-developer workflow tooling. Also known for open-source projects related to developer productivity. --- ## Machine-Readable Data - **llms.txt** (overview): https://vibe2design.com/llms.txt - **llms-full.txt** (this document): https://vibe2design.com/llms-full.txt - **Sitemap**: https://vibe2design.com/sitemap.xml - **Profile API**: https://vibe2design.com/api/geo/profile - **Features API**: https://vibe2design.com/api/geo/features