subframe
Visual UI design, React code export, and component syncing
All Skills in This Repository (3)
Pure Emerald Level Indicators
SubframeAppdesign
Generate AI-driven design variants for Subframe UI pages.
SubframeAppdevelop
Implement Subframe designs into production pages with business logic.
SubframeAppsetup
Initialize Subframe CLI in projects with Node.js and Tailwind.
Frequently Asked Questions
FAQPage SchemaHow to install Subframe?▼
Run `npx skills add SubframeApp/subframe --all -g -y` in your terminal to install all skills in this suite globally.
How to convert designs into React code?▼
Design pages visually in Subframe, then use the develop skill to fetch the design and sync production-ready React and Tailwind components into your codebase.
Does Subframe work with Next.js, Vite, and Astro?▼
Yes. The install skill scaffolds or configures projects for Next.js, Vite, and Astro, including Tailwind setup, fonts, and import aliases.
Can I use Subframe without installing it locally?▼
Yes. You can design pages and components directly against a cloud Subframe project, and only install locally when you are ready to implement the designs in code.
Will syncing overwrite my custom component changes?▼
No. Add a sync-disable comment to your wrapper files to keep custom logic safe while still receiving design updates to the generated component files.
Related Repositories in Design & Creative
View All in Design & Creative→
nextlevelbuilderui-ux-pro-max-skill
AI design intelligence for professional UI, brands, and presentations
shadcn-uiui
Build and customize beautiful React component libraries with AI
nexu-ioopen-design
Open-source AI design studio for decks, prototypes, images, and video