Open Design

Re-composes a finished, registered design for other canvas formats: the same message, copy hierarchy and design system, laid out again for each new size rather than scaled. Use when the user wants a poster or post "in other sizes", "for Instagram and Stories too", "as an A3 print as well", and so on. Returns, per format, instructions (with the master's HTML, that format's canvas rules and re-composition rules), a suggested entry path and the exact arguments to register it with. Writes no design file: write each adaptation yourself, register it with its registerArgs, then preflight and export it with its preset. The master and its adaptations are grouped as one collection (the master is added to a new one if it isn't in one). FLUID designs (data-od-fluid) already reflow to every shape, so for them it returns mode "tune" instead: per shape, instructions to check the master at that shape and fix it in place with @container rules; no new files and no collection.

Adds the diagram runtime to a diagram's HTML entry file, or updates it in place: one inline <script data-od-runtime="diagram"> block, placed before </body>, that lays the diagram out in the browser. It places nodes on a grid by rank and lane, draws right-angle connectors through the gaps between them with arrowheads and labels, boxes groups, and lays out sequence diagrams. The same file then renders identically in the preview, in export, in check_open_design_artifact and in any browser. Call it after writing the diagram markup (the diagram skill's workflow says when); it works before or after register_open_design_artifact and changes nothing else in the file. Never write, copy or edit the runtime yourself. The result restates the markup contract: a container with data-od-diagram (data-direction right|down, or ="sequence"); nodes with data-od-node, data-rank, data-lane, optional data-group and data-od-source; hidden <i data-od-link data-from data-to data-label> links; hidden <i data-od-group data-label> groups; for sequences, data-od-participant elements and hidden <i data-od-message data-from data-to data-label data-kind="return"> messages.

Renders a registered Open Design artifact in a headless browser (an installed Chrome, Edge, or Chromium) and returns what it looks like: screenshots attached as images, plus preflight findings (overflow and clipped text, contrast, text overlap, safe area, broken images/fonts, emoji, QR codes, and horizontal-scroll for pages that scroll sideways). Leaves the artifact and its manifest alone; saves the run's screenshots under .open-design/.checks/ so the user can see them, before and after, in the browser preview's Checks panel or at the listed paths. Call it after creating or substantially editing an artifact and registering it, before telling the user it's done: fix every ERROR, look at the screenshots for what the checks can't measure (balance, hierarchy, crowded or empty areas, text over busy imagery), then re-check — at most two fix rounds; tell the user about anything left. For a 3D design with a review sheet, a clean check isn't the end: get the critique the result asks for, for up to three critique rounds. What it renders: a page without a [data-od-card] at each viewport (default desktop 1440×900 and mobile 390×844, findings tagged by viewport); a card design (poster, social post) at its registered format size; a deck slide by slide (findings tagged by slide, one contact sheet of up to 12 slides — pass slides to see others). Screenshots are JPEG with a long edge of at most 1568 px; maxImages (default 3, max 6) bounds how many are attached, and 0 returns findings only. Returns a 'no-browser' error when no browser is installed: then skip the check and tell the user once that visual checking needs Chrome, Edge or Chromium. For bulk data rows or shape sheets, use export_open_design_artifact with checkOnly instead. A 3D scene that exposes window.odScene.scene, camera and renderer (the 3d-object ready contract) also gets a review sheet, one image showing the overview, close-up, low-angle and wireframe views (placed second), plus 3D evidence (pixel metrics, renderer…

Call when the user picks a direction from an exploration. Records the choice (marked on the comparison page) and returns instructions for the next step: 'build-out' builds the chosen sketch out at full fidelity, 'merge' does the same while taking named aspects from other directions (needs mergeFrom), and 'save-design-system' turns the direction into a reusable custom design system. Writes no design files.

Call after registering an exploration's directions. Refreshes and returns the path of its comparison page (compare.html: every direction side by side, opens in any browser from the file system), lists registered and missing directions, and with contactSheet: true renders a PNG of the comparison with the installed browser. If you can view images, check the contact sheet that the directions really differ before showing the user.

Composes instructions for authoring a brand-new, custom design system as a DESIGN.md file plus a sibling tokens.css following the Open Design token contract. Does NOT write any files. If sourceUrl is given, performs a best-effort extraction of candidate colors/fonts from that page. After writing the files, call set_active_design_system with the returned id. To write ONLY a tokens.css for an existing custom design system (id starting with user:), pass existingDesignSystemId instead of name/brief.

Generates a real, scannable QR code offline as SVG and saves it in a registered artifact's assets/ folder (listed in its manifest's supportingFiles), returning inline SVG markup to paste into the design. Use whenever a design needs a QR code (event sign-up, menu, ticket, download link); never draw a fake or placeholder one. The markup carries data-od-qr, so export preflight decodes the rendered code and checks it. For one code per row of a spreadsheet, mark the slot with data-od-qr-field="<column>" and export with data instead.

Renders a registered Open Design artifact in a headless browser (an installed Chrome, Edge, or Chromium) and writes upload-ready file(s) under the artifact's own exports/ folder. Does not modify the artifact's source files. IMAGES (png/jpeg): use after register_open_design_artifact whenever the user wants an image to post (X, Instagram, Xiaohongshu, a YouTube thumbnail, a poster). Size comes from explicit width/height, else the source skill's aspect hint, else each selected element's box, else 1080×1080. For multi-card designs mark each card with data-od-card and pass selector "[data-od-card]" for one numbered image per card. Pass maxBytes with the platform's upload limit (X 5000000, YouTube thumbnail 2000000, Instagram 8000000) and images are re-encoded as JPEG until they fit. DECKS: format "pptx" gives a PowerPoint file with one full-bleed slide image per slide (pixel-perfect, not editable text); format "pdf" gives one page per slide. Slides are captured at the deck's own measured slide size, at scale 2 by default. Artifacts registered with kind "deck" (or made from an od:deck:* skill) are detected automatically; pass deck: true if a deck was registered as "html". Pass slides (1-based numbers) with format png/jpeg to export just those slides as images. PAGES: format "pdf" on an ordinary page prints it with the browser's print engine (vector, selectable text, A4 unless the page's CSS sets a size). Not for video — HyperFrames videos are rendered with the HyperFrames CLI per the brief's instructions. POSTERS AND PREFLIGHT: page exports run preflight checks (text overflow, safe area, print bleed size, minimum type size, contrast, emoji, image resolution for print, QR codes that don't decode, broken assets) and list findings, errors first; findings never block the export. Pass checkOnly: true to check without writing files, and fix every error before the real export. Pass preset with a format id ("ig-portrait", "story", "a3"…) rather than width/height/selector/maxByte…

Renders a website in an installed Chrome, Edge or Chromium and measures its design system: colour roles from the elements that carry them (page background, cards, text, borders, the primary button and its forced :hover/:active states), declared CSS custom properties, the fonts it loaded, text sizes, radii, spacing, container width and motion. Writes an evidence bundle (evidence.json, screenshots, one crop per role, the logo) under <output folder>/.extract/<site>/ and returns a draft token set on the Open Design token contract, with where each value came from and which tokens nothing measured. Does NOT write DESIGN.md or tokens.css: write both from the draft, keeping measured values as measured (the open-design-design-system-from-url skill has the steps), then save it as a custom design system. Only public http(s) pages; at most 4 pages, 20 seconds each; no logins, cookies or form submissions. A bot check, login wall or empty page comes back as blocked with its screenshot. With no browser installed, falls back to reading the page source and marks the result partial.

Searches Poly Haven (polyhaven.com) for free CC0 3D assets and returns the direct CDN file URLs a three.js page needs: an HDRI (.hdr, for real environment light and reflections), a PBR texture set (diffuse, normal, roughness, AO/roughness/metal JPGs) or a model (.gltf plus its included files). Use it in 3D designs when procedural shapes and RoomEnvironment aren't enough: a stone floor, a wood table, a sky, a lantern, a chair. Each result has its id, name, categories, size in meters for models, a thumbnail, the file URLs at 1k (default) or 2k, the license (CC0: no attribution needed) and a 'Powered by Poly Haven' credit. Load the files straight from their URLs (the CDN allows it) or download them into the design's assets/ for offline use; for a model, map its includes with a LoadingManager URL modifier. Writes nothing. If Poly Haven can't be reached, it says so: fall back to procedural materials.

Finishes a recurring-job run started with start_open_design_job_run. It runs checks that need no browser on the target entry (missing local files, empty data-od-field elements, leftover placeholder text such as {{, TODO or Lorem ipsum, numbers found in no source, and the artifact viewer's size limits for the preview), settles the status (completed only without check errors; needs-review when the job has checks: required and the run had no browser), records outputs not made with their reasons (captures without a browser as skipped: no-browser), writes the run record to the job's run log, and returns a one-paragraph summary plus the remaining steps (commit or push the state branch, a PR, connector deliveries only for a completed run). Refuses, writing nothing, when runId isn't a started run of this job.

Reads back a registered Open Design artifact: its manifest, entry file content, supporting file list, and the user's unaddressed comments from the browser preview or VS Code ('openComments', status open or sent). Each comment names its element (selector, text excerpt, htmlHint, rect) and its note; up to 4 comment screenshots are attached as images, newest first, and every comment's screenshot path is listed. Call it when the user says they left comments; address each one, then pass their ids as resolvedCommentIds to register_open_design_artifact.

Lists available Open Design design systems — brand-inspired visual token sets (palette, typography, spacing, component rules), each with a 'category' and an 'active' flag marking the current active design system, if any. Optionally filter by a free-text query and/or an exact category. MOBILE: category 'Mobile Apps' holds systems adapted from real iOS apps (ids ending in '-ios', e.g. 'spotify-ios'). For phone screens prefer them, even over a same-brand web system ('spotify'), which stays the one for web pages. If a query returns few or no results, call this tool again with a broader query or no arguments at all to browse the full catalog — do NOT search the filesystem, grep, or read any file (this catalog is not stored anywhere as a single readable file such as a content.json, index, or schema file; it exists only inside this server's own runtime and is reachable exclusively through this tool).

Looks up trusted third-party MCP servers (Canva, Figma, Notion, Google Drive, Slack, posting services such as Buffer and Metricool, X's official server) that a workflow step can use instead of a manual handoff. Call it whenever a step would hand work to another service (import into Canva, read a Figma frame, save to Drive, share in Slack, post to a social network). With no arguments it returns the catalog of capabilities and integrations. With capability, integration and/or platform it returns the providers in priority order (official platform server, then official service, then posting services), the tool-name patterns that show each one is installed, the setup steps for this agent, and the consent rules. Check your own tools (including deferred ones) against those patterns: if one is installed, use it by its server-defined tool name. If none is, offer setup once and only proceed after the user says yes; never install silently, never ask for or write API keys. If the user declines, continue with the workflow's manual path. This tool only returns text: it installs nothing and contacts no service.

Lists the card and sticker printers whose upload sizes the kit knows: each one's id, the formats it takes with the exact pixel size, file type and dpi, how it wants card backs, and the page those sizes came from with the date they were checked. Call it when the user names a printer or says the cards are going to a print house; pass the id as printHouse to export_open_design_artifact. When their printer isn't listed, export print images at 300 dpi and tell them to check the size against the printer's upload page. Read-only.

Lists available Open Design skills, design templates, and remixable examples — reusable design-task recipes, rendering styles, and (for 'example' entries) actual starting artifacts bundled with this server. Each result's id is namespaced as 'od:<mode>:<name>' (e.g. 'od:deck:guizang-ppt') — pass this full id as skillId to prepare_open_design_brief or remix_open_design_example. Each result's 'source' field is 'skill', 'design-template', or 'example'. Some results include an 'examplePrompt' — prefer it (or lightly adapt it) over inventing your own brief when it closely fits. A result with remixable: true has an actual rendered starting artifact, bundled inside this server and never a file you can find on disk — prefer remix_open_design_example (which copies it into the workspace for you) over prepare_open_design_brief for those. Optionally filter by a free-text query, an exact mode, an exact source, and/or remixableOnly to see only entries with a rendered starting artifact. SURFACES: when the user names a kind of thing to make — a prototype or landing page, mobile app, slides, document, wireframe, animation, résumé, research synthesis, data report, poster or flier, social post, diagram — call this tool with surface set to that surface's id first (call with surface "list" to see the ids) and pick from its entries; if the surface names a prompt, follow that flow. STUBS: an entry with stub: true only advertises an upstream skill and has no instructions here — never pick one; choose a non-stub entry instead. PAGING: with more than 40 matches the result is { total, offset, nextOffset, modes, note, entries }, 100 compact entries (id, name, one-line summary, mode, source) per page; narrow with mode, source, query or surface for the full entries, or pass nextOffset as offset for the next page. If a query returns few or no results, call this tool again with a broader query or no arguments at all to browse the full catalog — do NOT search the filesystem, grep, or read any file…

Shows a registered Open Design artifact to the user in a live browser preview: an app window of their installed Chrome, Edge or Chromium (else their default browser; else it returns the URL to open). The preview reloads whenever the design's files change. In its Comment mode the user clicks an element to leave a comment with a screenshot; its Send to agent button copies an instruction for them to paste here, and get_open_design_artifact returns the comments. Its Checks panel shows the screenshots of each check_open_design_artifact run, before and after. Call it once per session after the first register_open_design_artifact, unless the user declined; later calls switch the same window to another artifact. Omit entryPath for a list of the workspace's designs. Pass open: false to only get the URL.

Composes instructions for porting a finished Open Design artifact's design into this workspace's actual, existing application as real, idiomatic production code. Does NOT write any files. Directs the model to ground the port in a real existing component and explicitly excludes routing/navigation wiring.

Composes generation instructions for an Open Design artifact by combining the chosen skill's workflow, an optional design system's visual tokens, universal craft rules, and the user's brief. Returns an 'instructions' string you must follow, plus a 'suggestedEntryPath'. Does NOT write any files — after calling it, author the entry file (and any supporting files) yourself with your normal file-editing tools, then call register_open_design_artifact.

Use INSTEAD of prepare_open_design_brief when the user explicitly asks for options, directions, alternatives or several versions of a design. Assigns 2–4 deliberately different directions (visual styles when no design system is active, layout/narrative structures when one is, or labels you pass for a named axis), writes the exploration's plan, and returns sharedInstructions plus one short instructions block, entry path and directionId per direction. Directions are quick sketches; only the one the user picks is built out. Writes no design files: write each direction yourself (follow sharedInstructions + that direction's instructions), register it with explorationId and directionId, then call compare_open_design_exploration. STYLE TILES: with skillId od:design-system:style-tile the directions are compact color + type tiles (default 4, visual axis even with an active design system; axis "custom" with an active system evolves it). Choosing one with next "save-design-system" copies the tile's tokens verbatim.

Publishes a registered Open Design artifact as a live web page, so the user can share a link with teammates or stakeholders. Use when the user asks to share, publish, deploy, host or "get a link" for a design. (For a single file to attach or send, use export_open_design_artifact with format "standalone" instead.) It builds a deploy-ready folder (exports/site/) locally, then returns step-by-step instructions for publishing it with the host's own CLI from your terminal, under the user's own login or a temporary no-account link: netlify-temporary or cloudflare-temporary (no account, about 60 minutes unless claimed), or netlify, vercel, cloudflare-pages or github-pages (the user's own account). It never deploys anything itself and never handles tokens. Without provider, the instructions ask the user to choose. The instructions require the user's explicit yes before anything goes online. With provider claude-artifact (only if you have an Artifact tool: Claude Code or Claude Desktop), it writes the standalone file instead, checks it against the artifact viewer's limits, and returns instructions to publish that file by path with your Artifact tool; the artifact stays private until the user shares it, so there is no confirmation step. After a successful deploy or publish, call this tool again with published: { provider, url, claimUrl?, expiresAt?, siteRef? } to record the link, so the next publish updates the same site or artifact. With claude-artifact, sync: true also carries the design's working files in the page, so it can be restored elsewhere with restore_open_design_artifact; turn it on only after the user agrees.

Gets a finished Open Design artifact into Canva. Called with entryPath alone, it composes instructions and writes nothing. The instructions have you export the artifact (PDF, or PPTX for a deck), check whether the user's Canva MCP server is connected (via list_open_design_integrations), and then: when Canva is connected, let the user choose between an editable import (the export is hosted briefly on a public link with publish_open_design_artifact, then Canva's import-design-from-url converts it into a design, optionally published as a Brand Template after their yes) and a private upload into their Canva Uploads; when it isn't, offer setup once and otherwise give them Canva's manual Import a file steps. For the private upload, call it again with filePath (the export) and uploadUrl (from Canva's create-upload-url): the server then POSTs the file's bytes to that canva.com URL from the machine the file is on, so no terminal is needed, and returns the fileId. Use when the user wants an artifact in Canva, as a Canva design or a Canva template.

Gets finished shop designs into the user's online shop: the product images (and any other design filled per product) from the product list. For shop "shopify" it composes instructions and writes nothing: check whether Shopify's connector is connected (via list_open_design_integrations and your own tools), and if it is, show the product matches first, make the first three updates one at a time with the user's go-ahead, create new products only as drafts, leave price, stock and visibility alone unless asked, attach images only if a connector tool can, and report what changed per product. Otherwise, and for bigcartel, etsy and other shops, it exports each design once per product and writes <design folder>/for-<shop>/: images named <product>-1.png, <product>-2.png…, copy.md with each product's title, price and description, and for Shopify a products.csv in Shopify's import format (unpublished, image links empty), plus the shop's own upload steps to pass on. Cost, margin, supplier, stock and note columns are never used. This tool never contacts the shop.

Composes instructions for translating a Figma frame into a real code artifact with 1:1 visual fidelity. When the user's Figma MCP server is connected (checked via list_open_design_integrations), the instructions use Figma's own get_design_context, get_variable_defs and get_screenshot; no token needed. A Figma personal access token is optional: when one is configured, the frame's structural summary and a rendered image are fetched too and included as ground truth, and it's the fallback when Figma isn't connected. Does NOT write any files — author the entry file yourself with your normal file-editing tools, then call register_open_design_artifact. figmaUrl must be a frame-scoped link (Figma's "Copy link to selection", with node-id), not a bare file link.

Pushes a finished Open Design artifact into Figma as editable layers through the user's Figma MCP server. Renders the artifact in a headless browser and captures its layers (or reuses a capture newer than the file), then writes ready-to-run code parts and image files under the artifact's exports/figma/ and returns instructions: check Figma is connected (list_open_design_integrations), ask the user whether to add to an existing Figma file (a link) or create a new one, load Figma's figma-use guidance, run each part with Figma's use_figma exactly as written, upload the images with upload_assets, then verify with get_screenshot and share the link. Never contacts Figma itself. When Figma isn't connected, the instructions offer setup and otherwise give the OD Figma Import plugin steps. Use when the user wants a design in Figma ("push this to Figma", "get this into Figma", "hand this off to design").

Converts a workspace document (DOCX, PPTX, XLSX, PDF, Markdown, text or CSV) into Markdown under the output directory's sources/ folder, extracts its embedded images, and returns an outline (headings with line ranges and sizes), never the full text. Read the returned markdownPath yourself, by line range, for the sections you need. Cached by content hash. Use it to look into a source before deciding how to use it; prepare_open_design_brief with `sources` calls it for you. PDFs need `pdftotext` (poppler); without it the result says to read the PDF with your own tools.

Recommends 3 to 5 Open Design design systems for a design, ranked the same way every time, each with a one-line reason and its look (light or dark, accent, display type, corner shape). Use it before prepare_open_design_brief when the user hasn't named a design system or a look, no design system is active, and they want a new design (not an edit, remix or export). Fill the profile from the request, the conversation and the workspace; leave out what you don't know. If the result includes `questions`, ask them once, in one message, and accept "you pick" (then use the first recommendation). Otherwise use the first recommendation, say which one you used and that they can switch. Does NOT change the active design system: pass the chosen id to prepare_open_design_brief. Product-named looks (Stripe, Linear…) are recommended only when the user names that product, via likeBrands or the brief.

Call this AFTER you have written an artifact's entry file (and any supporting files) into the workspace with your normal file-editing tools. Validates the artifact and writes its manifest sidecar (<entry>.artifact.json) next to the entry file. Fails clearly if entryPath does not exist yet.

Copies a curated Open Design example artifact (identified by its skillId, which must have remixable: true) into the workspace as a starting point, registers it, and returns instructions to MODIFY the copied file rather than regenerate it from scratch.

Restores an Open Design design from a synced Claude artifact (one published with publish_open_design_artifact, provider claude-artifact and sync: true) into this workspace, so it can be edited and republished here. Use when the user gives a Claude artifact link to pick a design back up on another device or in a new session. First read the artifact with your Artifact tool, which saves the page to a file; pass that file's path (in Claude Desktop with a folder, a path in the connected folder) and the artifact link. It writes the design's files under the output directory, all or nothing, refuses paths that leave it, and doesn't overwrite local files that differ unless overwrite is true. It records the link, so the next preview publish updates the same artifact. Never makes a network request.

Sets (or clears, if designSystemId is omitted/empty) the active Open Design design system, persisted for this workspace. Used automatically by prepare_open_design_brief whenever called without an explicit designSystemId.

Sets the folder Open Design works in for the rest of this session: where designs, manifests and .open-design/config.json are written, and what every workspace-relative path in other tools' results is relative to. Call it once, before any other Open Design tool, when this server can't know the user's folder on its own — in Claude Desktop chats with a connected folder it starts in the user's home folder. Pass the folder's absolute path on the machine this server runs on (in Claude Desktop, the path get_device_info lists under connectedFolders), not the path your own file tools see it under. Afterwards, join the workspace-relative paths other tools return onto your own path for that folder when you read or write files. Not needed in Claude Code, Codex or VS Code, which start the server in the project.

Shows a registered Open Design artifact, or an exploration's directions side by side, or a fluid master's campaign sheet, to the user inline in the conversation, in hosts that render MCP Apps (Claude Desktop Chat). There the user can switch to Comment mode, click an element and leave a comment, then click "Ask Claude to apply", which posts a message here naming the comment ids; export buttons post a request for export_open_design_artifact (the page never downloads). For an exploration, "Take this one" posts the user's pick; confirm the next step with them before calling choose_open_design_direction. A style-tile exploration also offers "Use as design system", which asks directly for next: "save-design-system". With campaign: true (after export_open_design_artifact with campaignSheet: true) it shows every tile of the master's campaign sheet with its errors; "Fix this piece" posts the tile and its errors here. Every host also gets a text result (title, path, open comments, or the campaign tiles); hosts without MCP Apps are told to use open_open_design_preview. In Claude Desktop Chat call it after register_open_design_artifact and after applying comments. Pass entryPath, or explorationId for an exploration.

Starts one run of a recurring Open Design job: a job file at .open-design/jobs/<id>.job.md (YAML frontmatter naming the recipe, period, timezone, mode, target and outputs, then the brief). Call it first whenever a prompt says "Run the Open Design job <path>" (usually a scheduled task), or for the supervised first run after writing a job. It validates the job (listing every problem by field), works out the period key in the job's timezone (2026-10-21, 2026-W43 or 2026-10), and returns skip with a reason when this period already has a completed run and the sources haven't changed: then report that in one line and change nothing. Otherwise it records a started run and returns its runId, the target entry's state (exists, staleSources, the preview link), the run's capabilities (browser, cloud) and the ordered steps to follow, ending with finish_open_design_job_run. In a cloud session it first asks you to check out the job's state branch. Runs stay private: never publish publicly or post to social networks from a job run.