frameground

Generate N alternative designs of a frame so the user can compare them side by side on the canvas. Use when the user wants options for a screen before committing.

Create or update an HTML frame on the Frameground canvas. Use when the user asks to create a screen, page, component, or frame for their app.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Port an existing app's screens into a Frameground project as one frame per screen so they can be redesigned. Use when the user wants to bring an existing codebase into Frameground.

Generate AI-curated design tweak suggestions (palette / typography variants) for a Frameground project. Drops three named variants into the project's suggestions drawer where the user can preview and apply them with one click.