webstudio-builder helps your AI agent design and build directly inside Webstudio. You can ask it to create a UI component, a page section, a complete page, or even a whole website — and the result stays native to Webstudio, so you can continue selecting, styling, and refining everything in the Designer.

You can also use it as a helper to improve an existing Webstudio site while respecting its current visual style, design system, content, layout responsiveness, and reusable components.

What You'll Need #

An AI tool that supports local skills and can run terminal commands
A Webstudio Project that you want the agent to work on
An existing Webstudio connection or a private Builder share link with API access and permissions for the task

That is all you need to provide. The skill tells your agent how to connect to the Project, check its access, and use the latest Webstudio tools. You do not need to install or configure the Webstudio CLI yourself.

Behind the scenes, the agent's environment needs Node.js 22.12 or newer and npm. Most coding agents already provide these; if they are missing, your agent will tell you, and may ask permission to set them up. Technical details on these behind-the-scenes tools are available in the official Webstudio CLI documentation and documentation index.

Install #

The easiest option is to give your AI agent this repository URL and ask it to install the webstudio-builder skill for you:

Please install the webstudio-builder skill from:
https://tangled.org/visioncraft.bsky.social/webstudio-builder

If you prefer to install it manually, clone this repository wherever your AI tool discovers local skills. For a project-only install in tools that read .agents/skills:

mkdir -p .agents/skills
git clone https://tangled.org/visioncraft.bsky.social/webstudio-builder .agents/skills/webstudio-builder

For a global install, use the skills directory supported by your AI tool:

mkdir -p /path/to/global/skills
git clone https://tangled.org/visioncraft.bsky.social/webstudio-builder /path/to/global/skills/webstudio-builder

Restart or refresh the AI tool after installation so the skill is discovered. Pull this repository periodically because both Webstudio and its automation capabilities continue to evolve.

For an existing installation that still points to Codeberg, run this from the installed skill directory:

git remote set-url origin https://tangled.org/visioncraft.bsky.social/webstudio-builder
git pull --ff-only

For contributors using SSH to push, set Tangled's push URL separately:

git remote set-url --push origin git@tangled.org:visioncraft.bsky.social/webstudio-builder

How To Use #

Once the skill is installed, start a conversation with your AI agent and ask it to use webstudio-builder. Describe what you would like it to create or change. If the agent needs a new connection, provide an API-enabled Builder share link privately.

You do not need to install CLI tools, configure an MCP connection, or run any commands yourself. The agent should check its tools, install or update anything it needs, connect to your Project, inspect the existing design, and then work directly in Webstudio.

You can copy and adapt this example prompt:

Use the webstudio-builder skill to work directly in my Webstudio Project.

Please create a responsive pricing page that fits the existing visual style of the site. Before editing, inspect the Project's current pages, components, design tokens, variables, and breakpoints. Keep everything native and editable in Webstudio. Show me the finished result, but do not publish it unless I explicitly approve.

Important: always treat your project's share link like a password — only provide it privately to the agent working on your Project, and do not paste it into public chats, issues, screenshots, or repository files.

What It Helps Your Agent Do #

Connect securely to your Webstudio Project and confirm it has the right access before making changes.
Check for the latest Webstudio tools automatically, without asking you to manage them.
Look through the existing site first, so new work fits its visual language and structure.
Create native pages, sections, components, icons, and content that remain easy to edit in the Designer.
Reuse the Project's colours, typography, spacing, Design Tokens, variables, and reusable components instead of styling every element separately.
Keep page structure clean and easy to understand, without unnecessary wrapper elements.
Create responsive layouts using Webstudio's standard desktop, tablet, and mobile breakpoints unless the design truly needs something different.
Prefer Webstudio's built-in components, interactions, and Animation tools—and CSS techniques—before reaching for custom JavaScript.
Keep interactive and repeated content editable by building it from hidden template elements already present in the Designer.
Add SVG icons directly to the page so you can select, recolour, and style them in Webstudio.
Work with external CMS data, native Content Engine files, Collections, and Forms.
Preview and check the result at different screen sizes before handing it back to you.
Leave publishing, domains, and redirects untouched unless you clearly ask for those changes.

What's Inside #

Most users do not need to read these files—the AI agent uses them as its working guide. They are listed here for contributors and anyone who wants to understand the skill in more detail.

SKILL.md: the agent's main Webstudio workflow
references/connection-and-discovery.md: connecting safely and finding the latest available tools
references/native-authoring.md: creating editable pages, elements, icons, templates, and components
references/design-system.md: colours, typography, spacing, Design Tokens, responsive styles, and breakpoints
references/interactions-and-animation.md: interactions, animation, and when JavaScript is appropriate
references/dynamic-content.md: dynamic content, Collections, Resources, bindings, and actions
references/accessibility-checklist.md: accessibility and responsive design checks
references/verification-and-publishing.md: reviewing work safely before publishing
references/workflows.md: step-by-step recipes for common Webstudio tasks

Contributing #

Issues, improvements, suggestions, bug reports, and contributions are welcome.

Create A Private Test Project #

When making improvements or changes to this skill, forward-test changes against your own disposable Webstudio sandbox — never against a client or production Project.

Create a new Webstudio Project specifically for skill testing.
In Webstudio's Share dialog, create an API-enabled share link with permissions for the workflow you are testing.

Create an ignored local Project directory inside this repository:

mkdir -p .test-projects/my-sandbox
cd .test-projects/my-sandbox

Start the interactive linker with the latest CLI:
```
npx --yes webstudio@latest link
```
Paste the confidential API share link only into the CLI prompt. The CLI saves the credentials in its local user configuration and links the current test directory.

Verify the saved authority before testing:

npx --yes webstudio@latest permissions --json

The repository ignores .test-projects/. Never put a real share link or authToken in tracked files, fixtures, workflow manifests, commits, issues, pull requests, screenshots, logs, or documentation. Use placeholders such as <api-share-link> in examples.

For licensing, see LICENSE.md.

For contacts and enquiries, visit visioncraft.studio.

Clone this repository

Webstudio Builder #