Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/webflow/webflow-skills/figma-to-webflownpx skills add webflow/webflow-skills --skill figma-to-webflowgit clone --depth 1 https://github.com/webflow/webflow-skillsWrote 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/webflow/webflow-skills/figma-to-webflow)<a href="https://agentmods.dev/skills/webflow/webflow-skills/figma-to-webflow"><img src="https://agentmods.dev/badge/skills/webflow/webflow-skills/figma-to-webflow.svg" alt="Measured on agentmods" 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.00132 | $0.02418 |
| Opus 5 | $0.00066 | $0.01209 |
| Sonnet 5 | $0.00026 | $0.00484 |
| Haiku 4.5 | $0.00013 | $0.00242 |
Grade A, and why
webflow-mcp:figma-to-webflow 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 6d 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 — 139 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Figma → Webflow
Translate a Figma design into a live Webflow project: real elements, styles, assets, fonts, and (optionally) custom code + interactions.
Instructions
Follow this order exactly. When a step says to read a reference file, read it before doing that work; those files contain the failure modes for that step.
Non-Negotiable Gates
Treat these as build gates, not suggestions. If you cannot satisfy one, stop and explain the tradeoff instead of silently substituting.
- Bridge gate: Designer Bridge is the default build mode. If selected, provide the Designer launch link (opens Designer with the MCP Bridge App) and wait for the user to open it with that tab foregrounded before bridge-dependent steps. If the bridge disconnects, keep structural work headless and reconnect before snapshots/canvas inspection.
- Native style gate: apply styles with
data_style_tool, never with thedata_whtml_buildercssparam or rawvar()strings. Otherwise styles land in Custom properties instead of native controls. Bind Webflow variables withvariable_as_value. - Visible element gate: build with real Designer-visible elements and native classes. Do not use embed
<style>blocks,::before/::after, or other hidden constructs for normal layout/decorative elements. - Class existence gate: create every class with
data_style_tool create_stylebefore using it in WHTML/element class lists. Webflow can silently drop class names that do not exist yet. - Variables gate: decide the Webflow variable/design-system strategy before creating styles. Do not hard-code repeated colors/type/spacing/radii unless the user explicitly chooses hard-coded output.
- Vector gate: logos, icons, and marks must be inline SVG embeds, not PNG/JPG uploads, unless the user explicitly approves raster fallback.
- Raster quality gate: hero/product/mockup images must use a confirmed 2x source where crispness matters.
- Dashed accent gate: dashed lines, dividers, grids, accents, and underlines must use
repeating-linear-gradient, notborder-style:dashed, unless the user explicitly accepts browser-default dash rhythm. - Navbar gate: custom navbar mobile behavior must be CSS-only, not JavaScript. Use the checkbox/sibling-selector pattern in
references/navbar.md. - Verification gate: never call a build done until you have verified rendered output. If visual verification is blocked, say what is unverified and ask the user to check it.
- Capability gate: do not assert that Webflow or MCP "can't" do something until you have tested the relevant tool path or clearly label it as untested.
- Publish gate: do not publish by default. Offer
.webflow.iopublish only after build/review, and only proceed on explicit user confirmation.
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 6d ago First seen · 139 lines · 132 tokens per session scan A 4606007fb610
webflow-mcp:figma-to-webflow is a skill published in the GitHub repository webflow/webflow-skills (119 stars, last pushed 4d ago), licensed MIT. It adds 132 tokens to every session and 2,418 once invoked, about $0.0007 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-30.
Other skills, from other repositories
dingtalk_channel_connect
Use a headed browser to automatically complete DingTalk channel integration for QwenPaw. Applicable when the user mentions DingTalk, developer console, Client ID, Client Secret, bot, Stream mode, binding or configuring a channel. Supports pausing when a login page is detected and resuming after the user logs in.
当用户需要对PDF文件进行任何操作时，请使用此技能。包括从 PDF 中读取或提取文本/表格、合并多个 PDF、拆分 PDF、旋转页面、添加水印、创建新PDF、填写PDF表单、加密/解密 PDF、提取图片，以及对扫描版 PDF 进行 OCR 使其可搜索。如果用户提到 .pdf 文件或要求生成 PDF，请使用此技能。.
make_plan
For external plan request scenarios, guides the Agent to request a clear, actionable, step-by-step plan from a stronger Agent via listagents and chatwithagent, emphasizing that the plan is executed by the requester, not by the consulted Agent.
new
Create a new project to start development quickly.
oss-upload
Upload local files to Tencent COS (oss.1024code.com CDN) using coscli. Use when user wants to upload a file to CDN/OSS, or deploy static assets.
officecli-word-form
Use this skill to create fillable Word forms (.docx) with real Content Controls (SDT) + legacy FormField checkboxes + MERGEFIELD mail-merge placeholders + document protection. Trigger on: 'fillable form', 'form fields', 'content controls', 'SDT', 'word form', 'fill in', 'only editable fields', 'protect document'…