Design
Plugin
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.
Plugin Signal60/100Solid
maintained97
capable41
documented25
adopted56
Install on Claude Code
> /plugin marketplace add subframeapp/subframe> /plugin install subframe@subframe
Stats
425
Stars
50
Forks
Active
Maintenance
TypeScript
Language
3d ago
Last commit
2y ago
Created
Repo: subframeapp/subframe
In this plugin
See everything inside What's inside
Skill(4 skills)
/bulk-importBulk-import many components from an existing codebase to Subframe in one CLI batch. Use only when the user explicitly asks to use this exact skill. Available for select teams./designDesign and edit anything in Subframe — pages, components, snippets, design documents, the theme. Also handles deletion of those resources except theme. Always load this skill when taking any action through the Subframe MCP server. This includes building or iterating on UI,/developImplement Subframe designs with business logic. Use after designing with /subframe:design or when given a Subframe URL/page ID./installInstall Subframe into a codebase so you can implement designs locally. Sets up the CLI, syncs components, configures Tailwind and fonts. Only needed when you're ready to write code — you can design without installing.
MCP(2 mcp)
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/
File tree
subframeapp/subframeView on GitHub
.claude-plugin/
marketplace.json
.eslintrc.js
.github/
workflows/
publish-cli.yaml
publish-core.yaml
.gitignore
.npmignore
.npmrc
.nvmrc
.prettierignore
.prettierrc
package-lock.json
package.json
packages/
docs/
.mintignore
CLAUDE.md
concepts/
code-generation.mdx
design-to-code.mdx
exporting-pages.mdx
syncing-components.mdx
docs.json
favicon.png
frameworks/
astro.mdx
manual.mdx
monorepo.mdx
nextjs.mdx
vite.mdx
guides/
accessibility.mdx
cli-automation.mdx
component-docs.mdx
dark-mode.mdx
mcp-server.mdx
publish-to-npm.mdx
skills.mdx
testing.mdx
images/
.gitkeep
adding-business-logic/
component-example-component.png
component-example-page.png
form-example-1.png
ask-ai/
apply-designs.png
ask-ai-mode.png
inline-ask-ai-inspector.png
inline-ask-ai-quick-insert.png
inline-ask-ai.png
personalizing-ai.png
components/
component-docs.png
component-props-example.png
create-component-dialog.png
create-component-existing.png
editing-slots.png
import-from-another-project.png
interaction-states.png
interaction-states.textClipping
linking-to-prop.png
slot-inspector.png
subcomponent-menu.png
sync-component-command.png
variant-default.png
variant-disabled-and-destructive.png
variant-disabled.png
variant-variant.png
concepts/
concept-ask-ai.png
concept-cli.png
concept-components.png
concept-mcp.png
concept-pages.png
concept-projects.png
concept-prototype.png
concept-theme.png
design-mode/
add-comment.png
cmd-k.png
inspector-shortcuts.png
inspector.png
keyboard-shortcuts.png
layers-toggle.png
layers.png
layout-inspector.png
new-layout-dialog.png
overrides.png
page-layouts.png
quick-actions.png
share-dialog.png
tailwind-css-inspector.png
developers/
copy-mcp-link.png
mcp-add-to-cursor-button.png
signin-page-example-annotated.png
signin-page-example.png
editor/
editor-breakpoints.png
editor-collaborators.png
editor-layout.png
editor-modes.png
export-to-bolt/
export-to-bolt.png
export-to-cursor/
export-to-cursor.png
export-to-replit/
export-to-replit.png
frameworks/
monorepo/
subframe-import-example.webp
interactions-dialog-preview.webp
interactions-editor.webp
interactions-panel.png
interactions-panel.webp
logos/
claude.png
cursor.webp
openai.png
pages/
duplicate-page.png
new-page-dialog.png
projects/
new-project-dialog.png
project-settings-entrypoint.png
project-settings.png
prototype-mode/
annotation-as-code.png
annotation-example.png
apply-updates.png
chat-bar.png
interactions-inspector.png
prototype-empty-state.png
quickstart/
quickstart-cursor-init.png
quickstart-design-mode.png
quickstart-mcp-link.png
quickstart-new-project.png
quickstart-prompt-ai.png
quickstart-setup-mcp.png
snippets/
insert-menu.png
sso/
okta/
logo.png
step-1.png
step-2.png
step-3.png
step-4.png
step-5.png
step-6.png
system-prompt-ask-ai.png
theme/
theme-ask-ai.png
theme-ask-ai.webp
theme-border.png
theme-colors.png
theme-corner.png
theme-custom-fonts.png
theme-folders.webp
theme-import-tokens.png
theme-import.webp
theme-presets.png
theme-shadow.png
theme-tailwind-config.png
theme-typography.png
using-subframe-with-ai-agents/
claude-code-create-design.png
claude-code-implement-design.png
version-history/
project-menu.png
version-picker.png
installation.mdx
learn/
admin/
auth-tokens.mdx
managing-team.mdx
pricing-and-plans.mdx
sso/
okta.mdx
ask-ai/
adding-context.mdx
image-to-design.mdx
making-quick-edits.mdx
personalizing-ai.mdx
prompt-to-design.mdx
code-mode/
overview.mdx
components/
importing.mdx
overview.mdx
props-and-slots.mdx
states.mdx
subcomponents.mdx
variants.mdx
concepts.mdx
design-mode/
adding-elements.mdx
comments.mdx
custom-css.mdx
inspector.mdx
keyboard-shortcuts.mdx
layers.mdx
page-layouts.mdx
preview.mdx
quick-actions.mdx
responsive-design.mdx
share-designs.mdx
working-with-stacks.mdx
editor/
overview.mdx
elements/
elements.mdx
faq.mdx
flows/
flows.mdx
guides/
working-with-ai-agents.mdx
introduction.mdx
pages/
pages.mdx
projects/
overview.mdx
project-settings.mdx
version-history.mdx
prototype-mode/
annotations.mdx
click-through-prototypes.mdx
overview.mdx
quickstart.mdx
snippets/
snippets.mdx
theme/
adding-custom-fonts.mdx
customizing-theme.mdx
exporting-theme.mdx
importing-tokens.mdx
overview.mdx
package.json
README.md
snippets/
.gitkeep
button-component-code.mdx
cli-init-command.mdx
cli-sync-all-command.mdx
copy-mcp-link.mdx
mcp-skills-install.mdx
signin-page-code.mdx
signin-page-with-logic.mdx
social-signin-button-code.mdx
style.css
upgrading/
component-directories.mdx
eslint-config-custom/
index.js
package.json
shared/
code-gen-type-helpers.ts
constants.ts
http.ts
logger/
constants.ts
helpers.ts
logger-node.ts
types.ts
package.json
routes.ts
ts-type-helpers.ts
tsconfig.json
type-helpers.ts
types.ts
subframe-cli/
.env.example
.gitignore
babel.config.cjs
bin/
main-sync.js
package.json
README.md
rollup.config.js
src/
__snapshots__/
setup-tailwind.spec.ts.snap
access-token.ts
add-tsconfig-alias.ts
api-endpoints.ts
common.ts
config.ts
constants.ts
flags.ts
import-manifest.ts
import.ts
index.ts
init-project.ts
init-sync.ts
init.ts
install-dependencies.ts
interactive.spec.ts
interactive.ts
logger/
logger-cli.ts
output/
format.ts
output.ts
prompt-helpers.ts
push-component.ts
run-command.ts
setup/
setup-tailwind-v3.ts
setup-tailwind-v4.ts
setup-tailwind.spec.ts
inject-theme-import.ts
prepare-project.ts
sync-components.ts
sync-settings.ts
sync.ts
transforms/
is-export.ts
tailwind.ts
utils/
files.ts
fs.ts
git.ts
package-managers.ts
test/
e2e/
auth.e2e.test.ts
flags.e2e.test.ts
global.e2e.test.ts
harness.ts
import.e2e.test.ts
init.e2e.test.ts
mock-server.ts
push-component.e2e.test.ts
sync.e2e.test.ts
tsconfig.json
vitest.config.ts
vitest.e2e.config.ts
subframe-core/
.gitignore
.npmignore
.nvmrc
babel.config.js
icon-template.js
package-lock.json
package.json
README.md
rollup.config.js
src/
assets/
icons/
final/
feather-a-arrow-down.tsx
feather-a-arrow-up.tsx
feather-a-large-small.tsx
feather-accessibility.tsx
feather-activity-square.tsx
feather-activity.tsx
feather-air-vent.tsx
feather-airplay.tsx
feather-alarm-check.tsx
feather-alarm-clock-off.tsx
feather-alarm-clock.tsx
feather-alarm-minus.tsx
feather-alarm-plus.tsx
feather-alarm-smoke.tsx
feather-album.tsx
feather-alert-circle.tsx
feather-alert-octagon.tsx
feather-alert-triangle.tsx
feather-align-center-horizontal.tsx
feather-align-center-vertical.tsx
feather-align-center.tsx
feather-align-end-horizontal.tsx
feather-align-end-vertical.tsx
feather-align-h-bottom-left.tsx
feather-align-h-bottom-right.tsx
feather-align-h-bottom.tsx
feather-align-h-center.tsx
feather-align-h-left.tsx
feather-align-h-right.tsx
feather-align-h-top-left.tsx
feather-align-h-top-right.tsx
feather-align-h-top.tsx
feather-align-horizontal-distribute-center.tsx
feather-align-horizontal-distribute-end.tsx
feather-align-horizontal-distribute-start.tsx
feather-align-horizontal-justify-center.tsx
feather-align-horizontal-justify-end.tsx
feather-align-horizontal-justify-start.tsx
feather-align-horizontal-space-around.tsx
feather-align-horizontal-space-between.tsx
feather-align-justify.tsx
feather-align-left.tsx
feather-align-right.tsx
feather-align-start-horizontal.tsx
feather-align-start-vertical.tsx
... 1600 moreShowing a partial view of a very large repo.
FAQ
subframe is a Claude Code plugin with 4 hand-picked skills for design work, indexed on Flowy. Install it with the command on its page. It includes bulk-import, design, develop. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is 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.
- How do I install subframe?
- Run these in Claude Code: /plugin marketplace add subframeapp/subframe then /plugin install subframe@subframe. Then prompt normally.
- Does subframe auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is subframe free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.