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.
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.
Subframe is a UI design tool featuring a drag-and-drop visual editor, React + Tailwind code export, and AI-powered design and prototyping features.
@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.External network access
Connects to servers outside your machine
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub subframeapp/subframe --plugin subframeA test plugin with fun skills. Currently includes get_best_dog.
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
Production-grade frontend interfaces that avoid generic AI aesthetics. Based on Anthropic's Frontend Designer Skill with bold creative commitment.
Generate distinct UI design variations, collect feedback, synthesize the best elements, and produce implementation plans
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
AI-powered generative UI with Thesys - create React components from natural language.
Design Director for complete apps, sites, and SaaS. Multi-stack support (React/shadcn, Laravel/Livewire Flux, Swift/SwiftUI). Identity System, page layouts, motion system, palette generator, design audit. Anti-AI-Slop, WCAG 2.2, Gemini Design MCP.