Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/R0STEFAN/webstudio-ai-agentnpx agentmods add skills/r0stefan/webstudio-ai-agent/webstudio-ai-designerWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/r0stefan/webstudio-ai-agent/webstudio-ai-designer)<a href="https://agentmods.dev/skills/r0stefan/webstudio-ai-agent/webstudio-ai-designer"><img src="https://agentmods.dev/badge/skills/r0stefan/webstudio-ai-agent/webstudio-ai-designer/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/r0stefan/webstudio-ai-agent/webstudio-ai-designer"><img src="https://agentmods.dev/badge/skills/r0stefan/webstudio-ai-agent/webstudio-ai-designer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00055 | $0.04647 |
| Opus 5 | $0.00028 | $0.02323 |
| Sonnet 5 | $0.00011 | $0.00929 |
| Haiku 4.5 | $0.00006 | $0.00465 |
Grade A, and why
webstudio-ai-designer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 346 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Webstudio AI Designer Skill
1. Architecture & Protocol
Webstudio stores the complete source of truth for an entire visual site inside .webstudio/data.json and assets inside .webstudio/assets/.
🚨 CORE DIRECTIVE FOR AI AGENTS:
- 100% MCP Execution: You MUST ALWAYS use the official Webstudio MCP tools (
npx webstudio mcp single-op-call <tool> --input-file <payload.json>) to perform all project operations (creating pages, extracting slots, inserting UI fragments, modifying styles, creating variables, auditing, etc.). - NEVER Edit
.webstudio/data.jsonManually: The schema and immer patch trees are complex. Relying exclusively on native MCP tool execution ensures 100% data integrity and builder compatibility. - JSON-First Payload Pattern (
--input-file): Always save MCP tool arguments into a temporary JSON file (e.g..temp/payload.json) and execute with--input-file. This completely eliminates Windows/POSIX shell escaping, quoting, and length limit issues. - Always Run Locally: All 70+ MCP commands execute locally in <500ms via our local runtime bridge.
The Offline AI Protocol:
[AI Assistant / LLM]
│
▼
[Local Webstudio MCP Tools] ──► mutates local `.webstudio/data.json` via official runtime
│
▼
[`webstudio import --to "<shareLink>"`] ──► commits state to Webstudio Cloud
2. Setting Up Local MCP in Any Project
To enable 100% offline MCP execution locally inside a project:
# 1. Install Webstudio locally in your project folder
npm i webstudio
# 2. Run the patcher for local node_modules
node scripts/setup-local-mcp.mjs --local
3. Complete 70+ Webstudio MCP Tool Dictionary
All tools are executed locally via:
npx webstudio mcp single-op-call <tool-name> --input-file <payload.json>
# Or for small payloads:
npx webstudio mcp single-op-call <tool-name> '<json-payload>'
📄 Pages & Project Routing
list-pages— List all pages in the project.get-page— Get details of a specific page bypageId.get-page-by-path— Get page details by path (e.g.{"path":"/hospital"}).create-page— Create a new page ({"name":"Hospital","path":"/hospital","title":"Hospital"}).update-page— Update page title, description, path, or meta settings.delete-page— Delete a page bypageId.duplicate-page— Clone an existing page.reorder-pages— Change display order of pages.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 346 lines · 55 tokens per session scan A 41ba557b2dcf
webstudio-ai-designer is a skill published in the GitHub repository R0STEFAN/webstudio-ai-agent (0 stars, last pushed today), licensed MIT. It adds 55 tokens to every session and 4,647 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
frontend-ui-engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
excalidraw-architect
Choose and compose the right Excalidraw diagram - architecture, flowchart, sequence, state, ER, swimlane, process, timeline, quadrant, pyramid, venn, loop, gantt, bar, line, scatter, and more - using the excalidraw-architect-mcp server. Use whenever a reader would learn more from a picture than from prose, or when…
ui-designer
Elite UI/UX Design Lead & Frontend Architect. Generates distinctive, non-templated interfaces with opinionated aesthetics, deliberate typography, and exact UX copy. Triggers on UI design, frontend styling, or layout creation.
a11y-audit
When building interactive components, reviewing a PR for accessibility, or fixing a11y lint errors.
layout-audit
Audit the structure and spacing of a localhost page — spacing scale consistency, whether spacing groups related content, container width and line measure, optical alignment, grid versus flex misuse, magic z-index values and overflow. Use when the user mentions spacing, padding or margins, says a layout feels cramped…
micro-interactions
Audit the interaction states of every control on a localhost page — hover, active, focus-visible, disabled, loading, selected, error — plus feedback timing, optimistic updates, destructive-action confirmation, validation timing and mobile touch targets. Use when the user mentions hover or focus states, buttons that…