design · subframeapp — Claude Code skill for Subframe: what it does, how to install

What design does

The skill kicks in when the deliverable has to end up in Subframe rather than a code branch. It starts by working out what stays and what changes: the agent reads the real content of an existing page and looks at how it renders. For a website or codebase reference it pulls source and screenshots through the host's tools. A written description on its own is thin ground for rebuilding a screen.

Then comes the smallest operation that does the job: edit a page or snippet where it sits, clone it for an exact repeat, or generate something new. Source files and images go into the brief with a note on what to keep and what to alter, since the generator never sees the chat. Missing primitives get built before anything references them. Subframe tooling has to be reachable, otherwise the steps have nowhere to run.

When the work lands, the agent screenshots the result and checks it against the reference: lower sections, responsive layouts, states. A small tweak to shipped UI is often faster straight in code, unless the project keeps its designs in Subframe. Theme changes go through existing tokens instead of fresh near-duplicates.