Open Design
Design skills, design systems and artifact tools: landing pages, decks, prototypes, posters, more.
Connector by feimacode · GitHub account verified by the MCP Registry
Install
Works with Claude Code, Codex, VS Code, Cursor, Windsurf, Claude Desktop. Read the repository before you give any tool access to your data.
npx agentmarket install connector/feimacode-open-design
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: ui-design, presentations
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this server can do and what it asks for, from its tool list, install config and code. Checked Oct 25, 2026.
- Tools
- 16 read · 22 write · 1 delete · 1 not yet classified
- Secrets
- 1 (API keys, tokens or passwords)
- Install scripts
- None found
- Runs as
- Node.js package
Tools by what they do 40
Read from the source code; the running server may list different tools.
Read 16 · Look things up without changing anything.
adapt_open_design_artifactcheck_open_design_artifactextract_open_design_design_systemfind_open_design_3d_assetsget_open_design_artifactget_open_design_preview_statelist_open_design_design_systemslist_open_design_integrationslist_open_design_print_houseslist_open_design_skillsopen_open_design_previewread_open_design_source
Show 4 more tools
recommend_open_design_design_systemsshow_open_design_artifactshow_open_design_design_systemsshow_open_design_examples
Write 22 · Create, change, send or run things.
add_open_design_diagram_runtimechoose_open_design_directioncompare_open_design_explorationcreate_open_design_design_systemcreate_open_design_qr_codefinish_open_design_job_runport_open_design_artifact_to_appprepare_open_design_briefprepare_open_design_explorationpublish_open_design_artifactpublish_open_design_artifact_to_canvapublish_open_design_artifact_to_shop
Show 10 more tools
pull_open_design_figma_framepush_open_design_artifact_to_figmaregister_open_design_artifactremix_open_design_examplerestore_open_design_artifactset_active_design_systemset_open_design_workspacestart_open_design_job_runuse_open_design_managed_workspacewrite_open_design_file
Delete 1 · Delete, drop, revoke or wipe things.
save_open_design_comment
Not yet classified 1 · We could not tell from the name and description.
export_open_design_artifact
Secrets and settings it asks for
Secrets: values you paste in that let it act as you.
OPEN_DESIGN_FIGMA_TOKEN
Network hosts it talks to 2
claude.ai· found in codegithub.com· found in code
Files it touches
- Your home directory (~)
- Any path the agent passes to its tools
Tools (40)
Read from the source code; the running server may differ. Descriptions are the server’s own words; hidden characters are shown as [U+…].
adapt_open_design_artifactRe-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 i…
add_open_design_diagram_runtimeAdds 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 …
check_open_design_artifactRenders 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 editi…
choose_open_design_directionCall 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.
compare_open_design_explorationCall 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.
create_open_design_design_systemComposes 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.
create_open_design_qr_codeGenerates 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.
export_open_design_artifactRenders 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]"…
extract_open_design_design_systemRenders 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. …
find_open_design_3d_assetsSearches 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 'Pow…
finish_open_design_job_runFinishes 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 re…
get_open_design_artifactReads 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.
get_open_design_preview_stateUsed by the Open Design preview page only: a view's data (the design with its comments and check screenshots, an exploration, a page of examples, design-system tiles, a campaign sheet), or one example's or design system's preview.
list_open_design_design_systemsLists 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…
list_open_design_integrationsLooks 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 servic…
Show 25 more tools
list_open_design_print_housesLists 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.
list_open_design_skillsLists 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 remixab…
open_open_design_previewShows 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…
port_open_design_artifact_to_appComposes 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.
prepare_open_design_briefComposes 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.
prepare_open_design_explorationUse 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 sharedInstr…
publish_open_design_artifactPublishes 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 minu…
publish_open_design_artifact_to_canvaGets 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 t…
publish_open_design_artifact_to_shopGets 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. Otherwi…
pull_open_design_figma_frameComposes 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-ed…
push_open_design_artifact_to_figmaPushes 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, …
read_open_design_sourceConverts 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.
recommend_open_design_design_systemsRecommends 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). Otherw…
register_open_design_artifactCall 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.
remix_open_design_exampleCopies 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.
restore_open_design_artifactRestores 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 p…
save_open_design_commentUsed by the Open Design preview page only: creates or edits one comment (merged by id) or deletes one, in the artifact's comments sidecar.
set_active_design_systemSets (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.
set_open_design_workspaceSets 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. Afte…
show_open_design_artifactShows 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_dire…
show_open_design_design_systemsShows Open Design design systems to the user inline as tiles (palette swatches, fonts, active mark), in hosts that render MCP Apps (Claude Desktop Chat); opening a tile shows its Visualize page. "Use this design system" posts a message here naming the id; then call set_active_design_system with it. Pass ids for a shortlist (shown in that order), or query and category to filter. Only listed to hosts that render MCP Apps; elsewhere use list_open_design_design_systems.
show_open_design_examplesShows the remixable Open Design examples to the user inline as a gallery of live previews, in hosts that render MCP Apps (Claude Desktop Chat), so they can pick a starting point by eye. "Remix this" posts a message here naming the example's skillId; then call remix_open_design_example with it (ask what to make first if the user hasn't said). The page copies nothing itself. Filter with query, mode or surface (a surface id, as list_open_design_skills takes). Only listed to hosts that render MCP Apps; elsewhere use list_open_design_skills with remixableOnly: true.
start_open_design_job_runStarts 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 th…
use_open_design_managed_workspaceFor a Claude Desktop chat with NO connected folder only, where your own file tools (if any) can't reach this server's files: creates, or reopens, a folder this server keeps for the design (under ~/Open Design/ unless configured otherwise) and makes it the workspace for the rest of the session. Call it once, before other Open Design tools, then save every design file with write_open_design_file instead of your own file tools. Tell the user the folder's absolute path from the result, so they can open it. Pass the same name in a later chat to continue the same design. If the chat has a connected …
write_open_design_fileSaves one design file you wrote into the folder use_open_design_managed_workspace opened, exactly as given, and returns its path, size and SHA-256. Only works in that folder: anywhere else, write files with your own file-editing tools. Pass the whole file each time (to edit, send the full new version). path is workspace-relative and must be under the output directory, e.g. ".open-design/coffee-poster/coffee-poster.html". Allowed: .html .htm .css .js .mjs .json .svg .md .txt .csv as text, and .png .jpg .jpeg .webp .gif .woff .woff2 as base64 with encoding "base64"; at most 5 MiB. Manifests, com…
Signals
- Stars
- 4
- Forks
- 0
- Open issues
- 0
- Weekly downloads
- 244
- Last commit (this folder)
- Oct 24, 2026 (5 days ago)
- Last release
- Oct 24, 2026 (5 days ago)
- Last package publish
- Oct 24, 2026 (5 days ago)
From GitHub (fetched Oct 24, 2026) and the package registry.
Details
- Registry name
io.github.feimacode/open-design- Version
- 0.3.0
- Auth
- API key
- Packages
- npm @feimacode/open-design-agent-kit-mcp
- License
- MIT
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
Cite this page
Open Design MCP server. Agent Mart. https://agentmart.dev/connectors/feimacode-open-design (last updated 2026-10-24)