aicoolies logo
Plasmic logo

Plasmic

Visual builder for React with headless CMS

Share
freemiumOpen Source
Visit Website →

Plasmic is a visual page builder and design tool that integrates directly into existing codebases, letting teams create and manage web pages with a Figma-like canvas while keeping production code under version control. Non-developers can ship marketing pages and CMS content, while engineers expose React components for visual editing. Supports Next.js, Gatsby, Remix, and any React framework.

Plasmic is a visual page builder and design tool that integrates directly into existing codebases, allowing teams to create and manage web pages and components without requiring code changes for every visual update. It solves the problem of bottlenecked development workflows where designers and content teams depend on engineers for every page edit, layout change, or content update. Plasmic lets non-developers visually create pages using real components from the codebase while developers maintain full control over the component library and architecture.

Plasmic offers a powerful visual editor that works with production React components, supporting frameworks like Next.js, Gatsby, and plain React applications. It features drag-and-drop page building, responsive design controls, a built-in CMS for structured content, A/B testing capabilities, dynamic data binding, and support for both headless and hosted deployment modes. Developers register their components in Plasmic and non-technical users can assemble pages using those components, ensuring design consistency while enabling independent content management.

Plasmic is ideal for marketing teams, content editors, and developers at companies that need to ship landing pages, blog posts, and promotional content at scale without engineering bottlenecks. It is particularly valuable for e-commerce sites, SaaS marketing pages, and content-heavy applications where the frequency of visual updates outpaces development capacity. Plasmic integrates with existing React codebases through its SDK, works with headless CMSes like Contentful and Sanity, and supports deployment to Vercel, Netlify, and other hosting platforms.

Pricing

Free / Starter $49/mo / Scale $199/mo / Enterprise custom

Platforms

Web-based

Categories

Tags

Use Cases

Alternatives

Related Tools

OpenUI logo

OpenUI

Open-source UI generation from natural-language prompts

OpenUI is an Apache-2.0 design-to-code tool from W&B that turns natural-language interface prompts into live HTML previews and frontend code. Teams can run it locally or with Docker, connect OpenAI, Groq, LiteLLM-compatible providers, or Ollama, and export generated UI toward React, Svelte, Web Components, and related workflows. It fits rapid UI mockups where developers want editable code instead of screenshots.

open-sourceOpen SourceTelemetry

Figma MCP Server

Official remote MCP server for design-to-code and write-to-canvas Figma workflows.

Figma MCP Server is Figma’s official remote Model Context Protocol surface for design-to-code agents. It gives supported clients structured design context, variables, components, selected-frame code context, Code Connect mappings, and beta write-to-canvas tools for creating or updating native Figma frames from an MCP client while keeping the workflow tied to Figma files.

freemiumTelemetry
OpenPencil logo

OpenPencil

AI-native open-source design editor and Figma alternative

OpenPencil is an AI-native, open-source design editor for teams that want a Figma-like canvas with source-visible code and experimental AI design workflows. It is best framed as OpenPencil by the open-pencil project, separate from the same-name ZSeven-W repo, and useful for early UI prototyping, design-to-code exploration, and open-source visual editing pilots.

open-sourceOpen Source

Talk to Figma MCP

Read/write MCP bridge between AI coding agents and Figma

Talk to Figma MCP is an MIT-licensed bridge from Grab that connects Cursor, Claude Code, and other MCP-capable agents to Figma through a local MCP server, WebSocket bridge, and Figma plugin. Unlike read-only context servers, it can inspect selections, create or modify nodes, update text in bulk, and automate design operations, so teams should review permissions before enabling write access.

open-sourceOpen SourceTelemetry
Figma Context MCP logo

Figma Context MCP

MCP server that gives coding agents structured Figma context for design-to-code work

Figma Context MCP is an MCP server for giving coding agents structured access to Figma design context during implementation. Instead of copying screenshots or hand-written design specs into prompts, teams can expose layout, component, and context information to agents such as Cursor, Claude Code, and other MCP-compatible coding workflows. It is a strong design-to-code bridge for teams trying to reduce hallucinated UI details and tighten handoff between designers and AI-assisted developers.

open-sourceOpen SourceTelemetry

screenshot-to-code

Convert any screenshot or mockup into clean frontend code with AI vision.

screenshot-to-code is an open-source tool that converts screenshots, mockups, and Figma designs into clean, functional HTML, Tailwind CSS, React, or Vue code using AI vision models. Powered by GPT-4V, Claude, and Gemini, it supports video-to-code and iterative editing workflows, making it a rapid scaffolding tool for frontend developers who want to skip the pixel-translation step entirely.

open-sourceOpen Source