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 skills add sologovision/flato-design-mcp --skill flato-design-mcp-guidegit clone --depth 1 https://github.com/sologovision/flato-design-mcpWrote 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/sologovision/flato-design-mcp/flato-design-mcp-guide)<a href="https://agentmods.dev/skills/sologovision/flato-design-mcp/flato-design-mcp-guide"><img src="https://agentmods.dev/badge/skills/sologovision/flato-design-mcp/flato-design-mcp-guide/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/sologovision/flato-design-mcp/flato-design-mcp-guide"><img src="https://agentmods.dev/badge/skills/sologovision/flato-design-mcp/flato-design-mcp-guide.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.00062 | $0.01317 |
| Opus 5 | $0.00031 | $0.00659 |
| Sonnet 5 | $0.00012 | $0.00263 |
| Haiku 4.5 | $0.00006 | $0.00132 |
Grade A, and why
flato-design-mcp-guide 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 12d 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 — 151 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Flato Design MCP Guide
Use this skill whenever the user wants an AI agent to operate a Flato design through MCP.
Flato is an editable visual design canvas. The MCP server gives agents tools, resources, prompts, project targeting, image capabilities, and feedback. It is not a hidden one-shot design agent. The agent must read current Flato context explicitly and then call concrete MCP tools.
Account And Plan Boundaries
A Flato account is required for OAuth. A paid Flato subscription is not required to install, connect, or start using Flato Design MCP.
Do not tell users they must subscribe before connecting. If an MCP response says a feature is limited by plan, usage, export, workspace, or credits, report that specific limitation and suggest the next available path.
Required Bootstrap
Before any design write:
- Read Flato MCP resources when the host exposes resource reading.
- Read
flato://canvas/fundamentals-v1, or callflato_get_canvas_fundamentalsas a fallback. - Call
flato_whoami. - Establish a target project:
- New design: call
flato_create_project. - Existing editor/project URL: call
flato_use_project. - Share URL: call
flato_use_share_linkto create an editable copy.
- New design: call
- If the response says the live editor is needed, open
editorUrlwhen the host supports URL opening. Otherwise ask the user to open it. - Poll
flato_get_project_statusuntilcanWrite=true. - Call
flato_get_design_contextbefore each create or edit sequence.
Do not call write tools until canWrite=true.
Targeting Rules
- Prefer
projectIdfor saved projects. - Use
clientIdonly when targeting a specific live editor tab. - Use
draftIdfor an unsaved/editorcanvas. - Never guess
pageIdorblockId. - Use ids returned by a fresh
flato_get_design_contextorflato_get_state. - Selection is only a call-time snapshot. Re-read context before a selection-dependent edit.
Write Rules
- Create pages with
flato_create_pages. - Update existing pages or blocks with
flato_update_pages. - Use
updateBlocks[].blockIdfor existing blocks andcreateBlocksfor new blocks. - Change canvas size, grid, padding, page/global background defaults, or scope
with
flato_update_canvas. - Set reusable project CSS with
flato_set_global_style. CSS must be scoped under.Canvas. - Delete blocks with
flato_delete_block. - Switch, duplicate, delete, or move pages with
flato_page_operation. - Use
flato_make_backupbefore risky broad edits.
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.
- 12d ago First seen · 151 lines · 62 tokens per session scan A f41aafe58821
flato-design-mcp-guide is a skill published in the GitHub repository sologovision/flato-design-mcp (2 stars, last pushed 2mo ago), licensed MIT. It adds 62 tokens to every session and 1,317 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
better-design
Build, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating…
unship
Compare agent-made alternatives in a local browser preview with Unship. Use for comparison setup, iteration, Canvas, selection, cleanup, and Unship installation or update troubleshooting.
figma-ios-playbook
Entry point for Figma → iOS UIKit/Swift code in this repo. Three-phase workflow: phase 1 runs figma-ios-preload-data to produce a unified data package; phase 2 (this playbook) consumes it via linked specialized skills (MK tokens, iOS 12, node conventions, SnapKit layout) to emit baseline UI code — visual/layout…
figma-ios-vector-vs-code
A guide for deciding whether a Figma vector should be drawn with iOS code or downloaded as an image asset. It keeps text, components, icons, and list-like content as separate, editable elements when needed.
figma-ios-hierarchy-preservation
Maps Figma node hierarchy (FRAME/GROUP/INSTANCE) to UIKit UIView containers, preserving parent-child relationships, addSubview order, and coordinate system. Decides which nodes become UIView containers vs leaf views, and how to read relative/absolute coordinates from the data package. Use when generating UIKit code…
figma-ios-listview-recognition
A workflow for deciding whether a Figma design node should become a UICollectionView in an iOS app. UICollectionView is Apple's component for displaying repeated items in a scrollable, reusable list or grid.