subframe
By subframeapp
Import React/Tailwind components from your project into Subframe to design pixel-perfect UIs with AI variations and visual refinements, then implement them as code with business logic synced directly into your codebase using CLI setup and MCP connections.
npx claudepluginhub subframeapp/subframe --plugin subframeComponent Overview
Component Details
Skills (4)
Design UI pages in Subframe. Use when building new UI, iterating on existing UI, exploring design options, or to get a visual starting point to refine in the Subframe design tool. Don't write UI code directly - design first, then implement with /subframe:develop.
Implement Subframe designs with business logic. Use after designing with /subframe:design or when given a Subframe URL/page ID.
Import an existing design system into Subframe. Discovers component files, stories, and CSS/Tailwind config, then uploads everything to Subframe for processing.
Initialize Subframe in a new or existing project. Sets up the CLI, syncs components, configures Tailwind and fonts.
MCP Servers (2)
README
Subframe
Subframe is a UI design tool featuring a drag-and-drop visual editor, React + Tailwind code export, and AI-powered design and prototyping features.
Packages
@subframe/core: a lightweight wrapper around Radix's headless components. Used by the Subframe design system.@subframe/cli: a CLI tool for syncing your Subframe project with your codebase.
Sites
- Doc site hosted at https://docs.subframe.com/
Similar Plugins
ui-designer
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design
External network access
Connects to servers outside your machine
Help us improve
Share bugs, ideas, or general feedback.