# Introduction

Skins adds the features your web apps are missing, like a column, a total or a button, without
waiting for their vendor. Each change is a **skin**: a small layer of CSS, HTML and JavaScript that
the Skins browser extension applies to the app, in your browser. The website itself, and what anyone
else sees, never changes.

## How it works

1. **Show bryo, the AI agent inside Skins, what you want to change.** Record the app with the Skins
   extension as you use it. The recording becomes a safe copy of the app, where changes are built
   and tested before they reach the real one.
2. **Shape the change in Studio.** Open the recording in Studio, in the Skins web app. Point at what
   you want changed and discuss it with bryo. Review what it builds, iterate until you're happy,
   then publish.
3. **Use it on the real website.** Back on the website, open the Skins side panel: your new skin is
   there, switched on, and you can switch it off and on.

Try it here, with a pretend invoices app:

<iframe class="demo-film" src="/how/guided-demo.html" title="Try Skins: record an app, ask bryo for a change in Studio, publish it, and switch it on and off" loading="lazy"></iframe>

## Where to start

- **Try it:** [Install](/docs/install/) the extension, then make a [recording](/docs/recording/).
- **Build skins with your own coding agent, or by hand:** [MCP server](/docs/mcp/) and
  [Skin format](/docs/skin-format/).
- **Evaluate Skins for your team:** [Privacy and security](/docs/privacy/).