@feimacode/open-design-agent-kit 0.3.0-beta.3 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/assets/claude-skills/article-magazine/SKILL.md +1 -1
  2. package/assets/claude-skills/card-twitter/SKILL.md +1 -1
  3. package/assets/claude-skills/card-xiaohongshu/SKILL.md +1 -1
  4. package/assets/claude-skills/data-report/SKILL.md +1 -1
  5. package/assets/claude-skills/deck-guizang-editorial/SKILL.md +1 -1
  6. package/assets/claude-skills/deck-open-slide-canvas/SKILL.md +1 -1
  7. package/assets/claude-skills/deck-swiss-international/SKILL.md +1 -1
  8. package/assets/claude-skills/doc-kami-parchment/SKILL.md +1 -1
  9. package/assets/claude-skills/frame-data-chart-nyt/SKILL.md +1 -1
  10. package/assets/claude-skills/frame-flowchart-sticky/SKILL.md +1 -1
  11. package/assets/claude-skills/frame-glitch-title/SKILL.md +1 -1
  12. package/assets/claude-skills/frame-light-leak-cinema/SKILL.md +1 -1
  13. package/assets/claude-skills/frame-liquid-bg-hero/SKILL.md +1 -1
  14. package/assets/claude-skills/frame-logo-outro/SKILL.md +1 -1
  15. package/assets/claude-skills/frame-macos-notification/SKILL.md +1 -1
  16. package/assets/claude-skills/guizang-ppt/SKILL.md +1 -1
  17. package/assets/claude-skills/mockup-device-3d/SKILL.md +1 -1
  18. package/assets/claude-skills/open-design/SKILL.md +35 -5
  19. package/assets/claude-skills/open-design-campaign/SKILL.md +19 -0
  20. package/assets/claude-skills/open-design-deck-from-source/SKILL.md +19 -0
  21. package/assets/claude-skills/open-design-design-system-from-url/SKILL.md +81 -0
  22. package/assets/claude-skills/open-design-docs/SKILL.md +19 -0
  23. package/assets/claude-skills/open-design-explore/SKILL.md +19 -0
  24. package/assets/claude-skills/open-design-integrations/SKILL.md +19 -0
  25. package/assets/claude-skills/open-design-new/SKILL.md +27 -4
  26. package/assets/claude-skills/open-design-poster/SKILL.md +20 -1
  27. package/assets/claude-skills/open-design-preview/SKILL.md +19 -0
  28. package/assets/claude-skills/open-design-publish/SKILL.md +19 -0
  29. package/assets/claude-skills/open-design-recurring/SKILL.md +19 -0
  30. package/assets/claude-skills/open-design-social-post/SKILL.md +20 -1
  31. package/assets/claude-skills/poster-hero/SKILL.md +1 -1
  32. package/assets/claude-skills/ppt-keynote/SKILL.md +1 -1
  33. package/assets/claude-skills/resume-modern/SKILL.md +1 -1
  34. package/assets/claude-skills/social-carousel/SKILL.md +1 -1
  35. package/assets/claude-skills/social-reddit-card/SKILL.md +1 -1
  36. package/assets/claude-skills/social-spotify-card/SKILL.md +1 -1
  37. package/assets/claude-skills/social-x-post-card/SKILL.md +1 -1
  38. package/assets/claude-skills/social-youtube-thumbnail/SKILL.md +1 -1
  39. package/assets/claude-skills/vfx-text-cursor/SKILL.md +1 -1
  40. package/assets/claude-skills/video-hyperframes/SKILL.md +1 -1
  41. package/assets/codex-skills/article-magazine/SKILL.md +1 -1
  42. package/assets/codex-skills/card-twitter/SKILL.md +1 -1
  43. package/assets/codex-skills/card-xiaohongshu/SKILL.md +1 -1
  44. package/assets/codex-skills/data-report/SKILL.md +1 -1
  45. package/assets/codex-skills/deck-guizang-editorial/SKILL.md +1 -1
  46. package/assets/codex-skills/deck-open-slide-canvas/SKILL.md +1 -1
  47. package/assets/codex-skills/deck-swiss-international/SKILL.md +1 -1
  48. package/assets/codex-skills/doc-kami-parchment/SKILL.md +1 -1
  49. package/assets/codex-skills/frame-data-chart-nyt/SKILL.md +1 -1
  50. package/assets/codex-skills/frame-flowchart-sticky/SKILL.md +1 -1
  51. package/assets/codex-skills/frame-glitch-title/SKILL.md +1 -1
  52. package/assets/codex-skills/frame-light-leak-cinema/SKILL.md +1 -1
  53. package/assets/codex-skills/frame-liquid-bg-hero/SKILL.md +1 -1
  54. package/assets/codex-skills/frame-logo-outro/SKILL.md +1 -1
  55. package/assets/codex-skills/frame-macos-notification/SKILL.md +1 -1
  56. package/assets/codex-skills/guizang-ppt/SKILL.md +1 -1
  57. package/assets/codex-skills/mockup-device-3d/SKILL.md +1 -1
  58. package/assets/codex-skills/open-design/SKILL.md +35 -5
  59. package/assets/codex-skills/open-design-campaign/SKILL.md +19 -0
  60. package/assets/codex-skills/open-design-deck-from-source/SKILL.md +19 -0
  61. package/assets/codex-skills/open-design-design-system-from-url/SKILL.md +76 -0
  62. package/assets/codex-skills/open-design-docs/SKILL.md +19 -0
  63. package/assets/codex-skills/open-design-explore/SKILL.md +19 -0
  64. package/assets/codex-skills/open-design-integrations/SKILL.md +19 -0
  65. package/assets/codex-skills/open-design-new/SKILL.md +27 -4
  66. package/assets/codex-skills/open-design-poster/SKILL.md +20 -1
  67. package/assets/codex-skills/open-design-preview/SKILL.md +19 -0
  68. package/assets/codex-skills/open-design-publish/SKILL.md +19 -0
  69. package/assets/codex-skills/open-design-recurring/SKILL.md +19 -0
  70. package/assets/codex-skills/open-design-social-post/SKILL.md +20 -1
  71. package/assets/codex-skills/poster-hero/SKILL.md +1 -1
  72. package/assets/codex-skills/ppt-keynote/SKILL.md +1 -1
  73. package/assets/codex-skills/resume-modern/SKILL.md +1 -1
  74. package/assets/codex-skills/social-carousel/SKILL.md +1 -1
  75. package/assets/codex-skills/social-reddit-card/SKILL.md +1 -1
  76. package/assets/codex-skills/social-spotify-card/SKILL.md +1 -1
  77. package/assets/codex-skills/social-x-post-card/SKILL.md +1 -1
  78. package/assets/codex-skills/social-youtube-thumbnail/SKILL.md +1 -1
  79. package/assets/codex-skills/vfx-text-cursor/SKILL.md +1 -1
  80. package/assets/codex-skills/video-hyperframes/SKILL.md +1 -1
  81. package/out/index.js +3046 -1288
  82. package/package.json +2 -2
@@ -10,6 +10,25 @@ Share an Open Design artifact with people who don't have this project open.
10
10
 
11
11
  Request: "$ARGUMENTS" — or, if that is empty, the user's request in this conversation (if it isn't clear, ask the user: "Which design should we share, and how?")
12
12
 
13
+ **How to talk to the user.** Many people using Open Design don't write code, so:
14
+ - Use the user's own words. If they say "artifact", "design tokens" or give a file path, use those terms back; otherwise use the plain words below.
15
+ - Keep the machinery out of replies: no tool names, no ids like `od:prototype:poster-hero`, no internal files (`.artifact.json`, `.comments.json`, `config.json`), and not the words "register", "manifest", "sidecar", "entry" or "surface", unless the user used them first.
16
+ - Explain a print term the first time it comes up, in one short clause, and not again.
17
+ - Say where a file is the way the user would find it ("in your Open Design folder, under seed-swap-flyer"). Give a raw path only where the user can click it (Claude Code, Claude Desktop's Code tab, VS Code) or asks for it.
18
+ - End each reply that finishes a step with one line on what they can do next, with at most two options ("Want it in Instagram sizes too, or is it ready to print?").
19
+
20
+ | Instead of | Say |
21
+ |---|---|
22
+ | artifact, entry, registered | your design, saved |
23
+ | design system, active design system | your style (the first time: "a saved style: colours, fonts and spacing") |
24
+ | surface, skill, template, recipe | kind of design, starting layout, or nothing |
25
+ | workspace, output directory | your folder, your Open Design folder |
26
+ | bleed | print edge ("a few millimetres extra that the printer trims off") |
27
+ | trim size | final size |
28
+ | preflight findings, errors | "I checked it and fixed…", "one thing to look at:" |
29
+ | export | save as PDF, save as an image |
30
+ | inline preview, MCP App | the preview above |
31
+
13
32
  ## 1. Find the artifact
14
33
 
15
34
  If the request names a design, find its entry file (`get_open_design_artifact`, or the `.open-design/` folder). If several match or none is named, ask the user which one. It must be registered; if it isn't, register it first with `register_open_design_artifact`.
@@ -10,6 +10,25 @@ Recurring Open Design jobs: one job file describes what to make each period, and
10
10
 
11
11
  Request: "$ARGUMENTS" — or, if that is empty, the user's request in this conversation (if it isn't clear, ask the user: "What should be rebuilt, from which sources, and how often?")
12
12
 
13
+ **How to talk to the user.** Many people using Open Design don't write code, so:
14
+ - Use the user's own words. If they say "artifact", "design tokens" or give a file path, use those terms back; otherwise use the plain words below.
15
+ - Keep the machinery out of replies: no tool names, no ids like `od:prototype:poster-hero`, no internal files (`.artifact.json`, `.comments.json`, `config.json`), and not the words "register", "manifest", "sidecar", "entry" or "surface", unless the user used them first.
16
+ - Explain a print term the first time it comes up, in one short clause, and not again.
17
+ - Say where a file is the way the user would find it ("in your Open Design folder, under seed-swap-flyer"). Give a raw path only where the user can click it (Claude Code, Claude Desktop's Code tab, VS Code) or asks for it.
18
+ - End each reply that finishes a step with one line on what they can do next, with at most two options ("Want it in Instagram sizes too, or is it ready to print?").
19
+
20
+ | Instead of | Say |
21
+ |---|---|
22
+ | artifact, entry, registered | your design, saved |
23
+ | design system, active design system | your style (the first time: "a saved style: colours, fonts and spacing") |
24
+ | surface, skill, template, recipe | kind of design, starting layout, or nothing |
25
+ | workspace, output directory | your folder, your Open Design folder |
26
+ | bleed | print edge ("a few millimetres extra that the printer trims off") |
27
+ | trim size | final size |
28
+ | preflight findings, errors | "I checked it and fixed…", "one thing to look at:" |
29
+ | export | save as PDF, save as an image |
30
+ | inline preview, MCP App | the preview above |
31
+
13
32
  If the request names a job file (".open-design/jobs/<id>.job.md", usually "Run the Open Design job …"), go to **Run**. Otherwise go to **Set up**.
14
33
 
15
34
  If `start_open_design_job_run` isn't one of your tools (VS Code has no scheduler, so it doesn't offer it), you can still write the job file in **Set up**, but say that scheduled runs need Claude Code or Claude Desktop with the Open Design MCP server, and stop there.
@@ -10,6 +10,25 @@ Design a social media post with Open Design and export files that are ready to u
10
10
 
11
11
  Brief: "$ARGUMENTS" — or, if that is empty, the user's request in this conversation (if it isn't clear, ask the user: "What should the post say, and for which platform?")
12
12
 
13
+ **How to talk to the user.** Many people using Open Design don't write code, so:
14
+ - Use the user's own words. If they say "artifact", "design tokens" or give a file path, use those terms back; otherwise use the plain words below.
15
+ - Keep the machinery out of replies: no tool names, no ids like `od:prototype:poster-hero`, no internal files (`.artifact.json`, `.comments.json`, `config.json`), and not the words "register", "manifest", "sidecar", "entry" or "surface", unless the user used them first.
16
+ - Explain a print term the first time it comes up, in one short clause, and not again.
17
+ - Say where a file is the way the user would find it ("in your Open Design folder, under seed-swap-flyer"). Give a raw path only where the user can click it (Claude Code, Claude Desktop's Code tab, VS Code) or asks for it.
18
+ - End each reply that finishes a step with one line on what they can do next, with at most two options ("Want it in Instagram sizes too, or is it ready to print?").
19
+
20
+ | Instead of | Say |
21
+ |---|---|
22
+ | artifact, entry, registered | your design, saved |
23
+ | design system, active design system | your style (the first time: "a saved style: colours, fonts and spacing") |
24
+ | surface, skill, template, recipe | kind of design, starting layout, or nothing |
25
+ | workspace, output directory | your folder, your Open Design folder |
26
+ | bleed | print edge ("a few millimetres extra that the printer trims off") |
27
+ | trim size | final size |
28
+ | preflight findings, errors | "I checked it and fixed…", "one thing to look at:" |
29
+ | export | save as PDF, save as an image |
30
+ | inline preview, MCP App | the preview above |
31
+
13
32
  ## 1. Pick the platform and format
14
33
 
15
34
  If the brief names a platform or format, use it. Otherwise ask the user to pick one of the rows below before doing anything else. Don't guess.
@@ -31,7 +50,7 @@ For several platforms at once, run steps 2–4 once per format and keep each one
31
50
 
32
51
  ## 2. Generate
33
52
 
34
- Call `prepare_open_design_brief` with the row's `skillId`, the brief, and `format` set to the row's preset id (leave it out for the X post mock and YouTube video). Call `list_open_design_design_systems` first only if the user names a brand or visual direction. For the X post mock, say in the brief that it is one card element.
53
+ Call `prepare_open_design_brief` with the row's `skillId`, the brief, and `format` set to the row's preset id (leave it out for the X post mock and YouTube video). Call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. For the X post mock, say in the brief that it is one card element.
35
54
 
36
55
  Author the files yourself with your own file-editing tools, following the returned instructions, and add these rules for social posts:
37
56
 
@@ -11,4 +11,4 @@ Use the Open Design skill `od:prototype:poster-hero` (Marketing Poster).
11
11
 
12
12
  Brief: "$ARGUMENTS", or if empty: "Use the Marketing Poster template to turn my content into a vertical poster or Moments-style share image with strong visual impact. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
13
13
 
14
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:poster-hero" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
14
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:poster-hero" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -11,4 +11,4 @@ Use the Open Design skill `od:deck:ppt-keynote` (Keynote-style Slides).
11
11
 
12
12
  Brief: "$ARGUMENTS", or if empty: "Use the Keynote-style Slides template to turn my content into Apple Keynote-quality slides with one card per screen and keyboard left/right navigation. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
13
13
 
14
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:ppt-keynote" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
14
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:ppt-keynote" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -11,4 +11,4 @@ Use the Open Design skill `od:prototype:resume-modern` (Modern Resume).
11
11
 
12
12
  Brief: "$ARGUMENTS", or if empty: "Use the Modern Resume template to turn my content into a modern minimal single-page A4 resume ready for print or PDF export. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
13
13
 
14
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:resume-modern" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
14
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:resume-modern" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -11,4 +11,4 @@ Use the Open Design skill `od:prototype:social-carousel` (social-carousel).
11
11
 
12
12
  Brief: "$ARGUMENTS", or if empty: "Design a 3-card cinematic social carousel — ‘onwards.’, ‘to the next one.’, ‘looking ahead.’. 1080×1080 squares, drop-into-Instagram ready."
13
13
 
14
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-carousel" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
14
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-carousel" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -11,4 +11,4 @@ Use the Open Design skill `od:prototype:social-reddit-card` (Reddit Post Card).
11
11
 
12
12
  Brief: "$ARGUMENTS", or if empty: "Use the Reddit Post Card template to turn my content into a realistic Reddit post card with vote rail and comment count for a video overlay or story share. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
13
13
 
14
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-reddit-card" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
14
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-reddit-card" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -11,4 +11,4 @@ Use the Open Design skill `od:prototype:social-spotify-card` (Spotify Now-Playin
11
11
 
12
12
  Brief: "$ARGUMENTS", or if empty: "Use the Spotify Now-Playing Card template to turn my content into a Spotify Now Playing-style card with album art, progress bar, and playback controls for a video overlay or personal homepage. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
13
13
 
14
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-spotify-card" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
14
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-spotify-card" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -11,4 +11,4 @@ Use the Open Design skill `od:prototype:social-x-post-card` (X / Twitter Post Ca
11
11
 
12
12
  Brief: "$ARGUMENTS", or if empty: "Use the X / Twitter Post Card template to turn my content into a realistic X post card with engagement metrics for a video overlay or shareable image card. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
13
13
 
14
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-x-post-card" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
14
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-x-post-card" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -11,4 +11,4 @@ Use the Open Design skill `od:prototype:social-youtube-thumbnail` (YouTube Thumb
11
11
 
12
12
  Brief: "$ARGUMENTS", or if empty: "Use the YouTube Thumbnail template to design a thumbnail for my video. Make the promise of the video readable in under a second: one short hook line, one strong focal subject, high contrast. Use real content from my brief and avoid lorem ipsum or placeholder images."
13
13
 
14
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-youtube-thumbnail" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
14
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-youtube-thumbnail" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -11,4 +11,4 @@ Use the Open Design skill `od:video:vfx-text-cursor` (VFX Text Cursor).
11
11
 
12
12
  Brief: "$ARGUMENTS", or if empty: "Use the VFX Text Cursor template to turn my content into a video-intro quote reveal with cursor light trails, chromatic rays, and directional flares. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
13
13
 
14
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:vfx-text-cursor" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
14
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:vfx-text-cursor" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -11,4 +11,4 @@ Use the Open Design skill `od:video:video-hyperframes` (Hyperframes Video).
11
11
 
12
12
  Brief: "$ARGUMENTS", or if empty: "Use the Hyperframes Video template to turn my content into a Hyperframes / Remotion-compatible continuous frame animation with autoplay support. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
13
13
 
14
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:video-hyperframes" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
14
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:video-hyperframes" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:prototype:article-magazine` (Magazine Article).
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Magazine Article template to turn my content into a Huashu / huashu-md-html-inspired long-form HTML essay. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:article-magazine" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:article-magazine" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:prototype:card-twitter` (Twitter Share Card).
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Twitter Share Card template to turn my content into a Twitter quote or data card designed to pair with a post. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:card-twitter" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:card-twitter" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:prototype:card-xiaohongshu` (Xiaohongshu Card).
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Xiaohongshu Card template to turn my content into a Xiaohongshu-style swipeable knowledge-card carousel. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:card-xiaohongshu" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:card-xiaohongshu" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:prototype:data-report` (Data Visualization Report)
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Data Visualization Report template to turn my CSV, Excel, or JSON data into a polished visual report page. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:data-report" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:data-report" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:deck:deck-guizang-editorial` (Guizang Editorial E-
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Guizang Editorial E-Ink Deck template to turn my content into an editorial magazine x e-ink horizontal deck with 10 layouts and 5 palettes. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:deck-guizang-editorial" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:deck-guizang-editorial" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:deck:deck-open-slide-canvas` (Open-Slide 1920 Canv
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Open-Slide 1920 Canvas Deck template to turn my content into a locked 1920x1080 free-composition deck with React component-level layout. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:deck-open-slide-canvas" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:deck-open-slide-canvas" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:deck:deck-swiss-international` (Swiss Internationa
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Swiss International Deck template to turn my content into a 16-column-grid deck with one saturated accent and 22 locked layouts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:deck-swiss-international" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:deck-swiss-international" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:prototype:doc-kami-parchment` (Kami Parchment Docu
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Kami Parchment Document template to turn my content into a warm parchment document with monochrome ink-blue accents, one serif family, and editorial-grade typography. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:doc-kami-parchment" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:doc-kami-parchment" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:video:frame-data-chart-nyt` (NYT-Style Data Chart
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the NYT-Style Data Chart Frame template to turn my content into a frame with NYT-newsroom typography, staggered reveal animation, and editorial-grade charts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-data-chart-nyt" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-data-chart-nyt" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:video:frame-flowchart-sticky` (Sticky Flowchart Fr
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Sticky Flowchart Frame template to turn my content into a whiteboard-brainstorm frame with SVG curve connectors, sticky-note nodes, and cursor interaction. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-flowchart-sticky" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-flowchart-sticky" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:video:frame-glitch-title` (Glitch Title Frame).
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Glitch Title Frame template to turn my content into a digital-glitch, chromatic-offset, data-corruption title frame for a video transition or cyberpunk hero. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-glitch-title" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-glitch-title" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:video:frame-light-leak-cinema` (Light-Leak Cinemat
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Light-Leak Cinematic Frame template to turn my content into a cinematic opening or chapter card with film light leaks, grain, letterbox framing, and large serif type. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-light-leak-cinema" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-light-leak-cinema" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:video:frame-liquid-bg-hero` (Liquid Background Her
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Liquid Background Hero template to turn my content into a WebGL-style fluid displacement background with a quote overlay for a video intro, landing hero, or poster. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-liquid-bg-hero" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-liquid-bg-hero" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:video:frame-logo-outro` (Logo Outro Frame).
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Logo Outro Frame template to turn my content into a video outro or brand closing frame with segmented logo assembly, glow bloom, and tagline reveal. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-logo-outro" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-logo-outro" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:video:frame-macos-notification` (macOS Notificatio
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the macOS Notification Banner template to turn my content into a realistic macOS notification banner for a video overlay or product teaser. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-macos-notification" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-macos-notification" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:deck:guizang-ppt` (Write a Brand-to-Revenue Story
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Create \"Write a Brand-to-Revenue Story like a Growth Strategy Lead\" as a Marketing and GTM deck in the Guizang Ppt visual system. Scene: annual-marketing-plan. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce a commercial-grade slide plan, written slides, visual direction, speaker-ready structure, and critic pass against this rubric: can the plan connect creative choices to measurable growth."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:guizang-ppt" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:guizang-ppt" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -9,4 +9,4 @@ Use the Open Design skill `od:prototype:mockup-device-3d` (Device 3D Showcase).
9
9
 
10
10
  Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Device 3D Showcase template to turn my content into a static iPhone and MacBook 3D-style showcase with real HTML embedded on the screens. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
11
11
 
12
- Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:mockup-device-3d" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
12
+ Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:mockup-device-3d" and this brief — call `list_open_design_design_systems` first if the user names a brand or visual direction, or `recommend_open_design_design_systems` if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.
@@ -13,21 +13,49 @@ A small, curated subset of skills/templates also has its own explicit `/open-des
13
13
 
14
14
  All Open Design content (skill/template text, design system tokens, example briefs) is delivered to you as plain text through the MCP tool calls below — never as a file path. You never need to, and should not, browse or search for Open Design's own files anywhere on disk; `list_open_design_skills` and `prepare_open_design_brief` already return everything you need as plain text.
15
15
 
16
+ <!-- voice:start -->
17
+ **How to talk to the user.** Many people using Open Design don't write code, so:
18
+ - Use the user's own words. If they say "artifact", "design tokens" or give a file path, use those terms back; otherwise use the plain words below.
19
+ - Keep the machinery out of replies: no tool names, no ids like `od:prototype:poster-hero`, no internal files (`.artifact.json`, `.comments.json`, `config.json`), and not the words "register", "manifest", "sidecar", "entry" or "surface", unless the user used them first.
20
+ - Explain a print term the first time it comes up, in one short clause, and not again.
21
+ - Say where a file is the way the user would find it ("in your Open Design folder, under seed-swap-flyer"). Give a raw path only where the user can click it (Claude Code, Claude Desktop's Code tab, VS Code) or asks for it.
22
+ - End each reply that finishes a step with one line on what they can do next, with at most two options ("Want it in Instagram sizes too, or is it ready to print?").
23
+
24
+ | Instead of | Say |
25
+ |---|---|
26
+ | artifact, entry, registered | your design, saved |
27
+ | design system, active design system | your style (the first time: "a saved style: colours, fonts and spacing") |
28
+ | surface, skill, template, recipe | kind of design, starting layout, or nothing |
29
+ | workspace, output directory | your folder, your Open Design folder |
30
+ | bleed | print edge ("a few millimetres extra that the printer trims off") |
31
+ | trim size | final size |
32
+ | preflight findings, errors | "I checked it and fixed…", "one thing to look at:" |
33
+ | export | save as PDF, save as an image |
34
+ | inline preview, MCP App | the preview above |
35
+ <!-- voice:end -->
36
+
16
37
  Follow this flow:
17
38
 
18
39
  0. **Check the tools are wired up.** This skill does nothing on its own — every step below calls a tool the `open-design` MCP server provides. If `list_open_design_skills` (or any other tool named below) isn't available to you right now, the server hasn't been registered in this project yet. Set it up, then retry from step 1:
19
40
  - **Claude Code:** run `npx @feimacode/open-design-agent-kit init --tools claude` in the project root, or `claude mcp add open-design -- npx -y @feimacode/open-design-agent-kit-mcp`.
20
41
  - **Codex CLI:** run `npx @feimacode/open-design-agent-kit init --tools codex` in the project root.
21
42
  - **Any other MCP-capable agent** (Cursor, etc.): register `npx -y @feimacode/open-design-agent-kit-mcp` as a stdio MCP server using this agent's own MCP config mechanism.
22
- - **Claude Desktop Chat or claude.ai** (no Open Design tools in the chat): don't make anything yet. Tell the user what's missing: connect a folder to the chat (Claude Desktop, with the Open Design plugin installed), or install the Open Design desktop extension (`open-design-<version>.mcpb` from the project's GitHub releases) to use it in Claude Desktop without a folder. Only if they want to go ahead anyway, make one self-contained HTML page and publish it with your own Artifact tool, and say it skips Open Design's design systems, checks and exports.
43
+ - **Claude Desktop Chat or claude.ai** (no Open Design tools in the chat): don't make anything yet. Welcome the user in plain words, in this shape:
44
+ > Open Design can't save or check designs in this chat yet. Two ways to fix that:
45
+ > 1. **Connect a folder:** make a folder called "Open Design" (in Documents, for example), then click **+** in this chat, choose **Add folder** and pick it.
46
+ > 2. **Install the Open Design extension for Claude Desktop:** download it from https://github.com/feimacode/open-design-agent-kit/releases/latest, double-click the file, then start a new chat.
47
+ >
48
+ > What's the design for?
49
+
50
+ Don't name file types, packages, commands or tools in it. Offer the goals from step 1 below as examples of what they can say ("promote an event", "show an idea", "get hired"). Only if they want to go ahead without either, make one self-contained HTML page and publish it with your own Artifact tool, and say it can't use saved styles, checks or saving as PDF and images.
23
51
 
24
52
  Run the command yourself if you have shell access; otherwise tell the user the exact command to run and wait for their confirmation before continuing. Skip this step entirely once the tools are available.
25
53
 
26
- **In Claude Desktop** (a chat or Cowork session with a folder the user connected), the server runs on the user's machine and starts in their home folder, and your file tools see the folder under a different path. Before any other Open Design tool, call `set_open_design_workspace` with the folder's path on the user's machine (the one `get_device_info` lists under `connectedFolders`). Every path other tools return is relative to that folder: join it onto your own path for the folder when you read or write files. If a tool says it would be working in the home folder, this is what it's asking for.
54
+ **In Claude Desktop** (a chat or Cowork session with a folder the user connected), the server runs on the user's machine and starts in their home folder, and your file tools see the folder under a different path. Before any other Open Design tool, call `set_open_design_workspace` with the folder's path on the user's machine (the one `get_device_info` lists under `connectedFolders`). Every path other tools return is relative to that folder: join it onto your own path for the folder when you read or write files, and when you attach or show a file with your own tools, give the full path: a relative one resolves against your shell's current folder, which moves when you `cd`. If a tool says it would be working in the home folder, this is what it's asking for. The first time you set the folder in a chat, tell the user in one sentence where their designs will be saved (the folder's name and the `Open Design` folder inside it) and that they can open it any time; don't repeat it for later designs.
27
55
 
28
- **In Claude Desktop Chat with no folder** (`use_open_design_managed_workspace` is in your tools), your own file tools, if you have any, can't reach the server's files. Call `use_open_design_managed_workspace` first with a short name for the design, and tell the user the folder's absolute path from its result (under `~/Open Design/` by default), so they can open it. Then save every design file with `write_open_design_file` (the whole file each time, under the output directory) instead of your own file tools, and register, check and export as usual. Show the design with `show_open_design_artifact` after each round; don't keep a per-round Claude artifact preview here. The managed folder is the source of truth: to edit, send the full new file through `write_open_design_file`. If the chat has a connected folder, use `set_open_design_workspace` instead.
56
+ **In Claude Desktop Chat with no folder** (`use_open_design_managed_workspace` is in your tools), your own file tools, if you have any, can't reach the server's files. Call `use_open_design_managed_workspace` first with a short name for the design, and tell the user once, in one sentence, the folder's absolute path from its result (under `~/Documents/Open Design/` by default), so they can open it. Then save every design file with `write_open_design_file` (the whole file each time, under the output directory) instead of your own file tools, and register, check and export as usual. Show the design with `show_open_design_artifact` after each round; don't keep a per-round Claude artifact preview here. The managed folder is the source of truth: to edit, send the full new file through `write_open_design_file`. If the chat has a connected folder, use `set_open_design_workspace` instead.
29
57
  1. Call `list_open_design_skills` (optionally with a `query` and/or an exact `mode`) to find a skill or design template that matches what the user wants. Pick the best match by name/description/triggers, and prefer a result's `examplePrompt` (adapted to the user's specifics) over inventing your own brief when one is present and closely fits.
30
- 2. There is an **active design system**, persisted per project (a local `.open-design/config.json` file). If the user mentions a brand, company, industry, or visual style that differs from what's active, call `list_open_design_design_systems` (optionally with a `query` and/or an exact `category` — call with no arguments first to see categories, and check each result's `active` flag) to find the right one, and pass its id explicitly to `prepare_open_design_brief` — doing so also makes it the new active one going forward, so you don't need to re-specify it on later requests in this project. For **phone screens** (the Mobile app surface, or a brief like "a budgeting app that feels like Monzo"), look in the `Mobile Apps` category first, with the app's name as `query`: those systems are adapted from the real iOS apps (tab bars, sheets, iOS point sizes). Use `<app>-ios` (e.g. `spotify-ios`) for phone screens even when a web system of the same brand exists (`spotify`); the web one stays the right choice for web pages. If the user hasn't mentioned any direction, just omit `designSystemId` from `prepare_open_design_brief` and it will silently use whatever is currently active (or none). Only call `set_active_design_system` directly when the user wants to pin a look before generating anything ("let's use the Starbucks look from now on").
58
+ 2. There is an **active design system**, persisted per project (a local `.open-design/config.json` file). If the user mentions a brand, company, industry, or visual style that differs from what's active, call `list_open_design_design_systems` (optionally with a `query` and/or an exact `category` — call with no arguments first to see categories, and check each result's `active` flag) to find the right one, and pass its id explicitly to `prepare_open_design_brief` — doing so also makes it the new active one going forward, so you don't need to re-specify it on later requests in this project. For **phone screens** (the Mobile app surface, or a brief like "a budgeting app that feels like Monzo"), look in the `Mobile Apps` category first, with the app's name as `query`: those systems are adapted from the real iOS apps (tab bars, sheets, iOS point sizes). Use `<app>-ios` (e.g. `spotify-ios`) for phone screens even when a web system of the same brand exists (`spotify`); the web one stays the right choice for web pages. If the user hasn't mentioned any direction and one is active, just omit `designSystemId` from `prepare_open_design_brief` and it will use the active one. **If none is active and the user hasn't named a direction, recommend one** before preparing a new design (not for an edit, a remix or an export): call `recommend_open_design_design_systems` with what you know from the request, the conversation and the workspace (`industries`, `moods`, `theme`, `surface`, `likeBrands`, `brief`), leaving out what you don't know. If its result has `questions`, ask them once, in one message, as short multiple-choice options (use your host's question tool if it has one), and accept "you pick"; then call it again with the answers. Show the shortlist: where `show_open_design_design_systems` is in your tools, pass it the recommended `ids`; elsewhere, a short numbered list with each name and its `reason`. Don't wait for a pick unless you asked questions: go ahead with the first recommendation, pass its id to `prepare_open_design_brief`, and say which style you used and that they can pick another. If `recommend_open_design_design_systems` isn't in your tools, use `list_open_design_design_systems` instead, or go without one. Only call `set_active_design_system` directly when the user wants to pin a look before generating anything ("let's use the Starbucks look from now on").
31
59
  3. Call `prepare_open_design_brief` with the chosen `skillId`, optional `designSystemId` (per step 2), and the user's `brief` (their request, in their own words). This returns `instructions` to follow, a `suggestedEntryPath`, and the `designSystemId`/`designSystemName` actually used (whether explicit or defaulted from active) — mention which one it was if it wasn't obvious from the conversation. It does NOT write any files.
32
60
  4. Follow the returned `instructions` and author the artifact's entry file (plus any supporting files) yourself, using your own file-editing tools. Do not look for a separate tool to write the design content.
33
61
  5. Call `register_open_design_artifact` with the entry path, a `kind`, a `title`, and any `supportingFiles`, so the artifact is recognized and gets its manifest sidecar written.
@@ -39,6 +67,8 @@ Follow this flow:
39
67
 
40
68
  **Picking by eye in Claude Desktop Chat.** Two more tools are listed only where the host shows MCP Apps inline, so use them only when they are in your tool list: `show_open_design_examples` shows the remixable examples as a gallery of live previews (filter by `query`, `mode` or `surface`), and `show_open_design_design_systems` shows design systems as tiles (pass `ids` for a shortlist). Use them when the user wants to choose a starting example or a brand look and hasn't named one. Picks arrive as chat messages naming the tool to call: "Remix this" means `remix_open_design_example` with that skillId (ask what to make first if the user hasn't said); "Use this design system" means `set_active_design_system` with that id. Elsewhere, keep to `list_open_design_skills` and `list_open_design_design_systems`.
41
69
 
70
+ When a request says **what the design is for but not what to make** ("help me promote our seed swap", "something to get a UX job"), or is too vague to tell, call `list_open_design_skills` with `surface: "list"`: its `goals` are plain-language aims (Promote an event, Show an idea, Get hired…). Take the goal that fits, or show the goals (label and description) and ask one question, "What's it for?". Then call it with `goal` set to that id and continue with the surface marked `default`, asking which one only when the request doesn't settle it and the goal leads to several. Don't show the user the list of surfaces unless they ask what kinds of thing you can make.
71
+
42
72
  When a request 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, 3D object), call `list_open_design_skills` with `surface` set to that kind first (`surface: "list"` shows the ids). Pick from its entries, ask only the surface's questions the request doesn't answer, and follow the surface's prompt when it names one. A request for one specific template or style still goes straight to it. Never pick an entry marked `stub: true`: it only advertises an upstream skill and has no instructions here.
43
73
 
44
74
  For **engineering documents** (an RFC, ADR, postmortem, PR explainer or changelog page), use the matching skill (`od:prototype:rfc`, `adr`, `postmortem`, `pr-explainer`, `changelog-page`). Gather the facts yourself first, from git (`git log`, `git diff`, `gh pr view` when available) and the files involved, and register what you read as `sources`. Never invent incident facts, dates or numbers: ask for them. To turn a **folder of Markdown docs** into pages, follow the docs flow (load the `open-design-docs` skill): one page per file, one template for the set, and on a re-run only the pages whose Markdown changed.
@@ -60,7 +90,7 @@ Generated artifacts land under the project's Open Design output directory (defau
60
90
 
61
91
  **Comments from the preview.** When the user says they left comments (or pastes the preview's "Apply my comments" instruction, or the inline preview posts it), call `get_open_design_artifact` for that entry. Its `openComments` lists each comment's note and the element it points at (`selector`, `text`, `htmlHint`, `rect`); screenshots of up to 4 commented elements are attached as images, and every comment's `screenshot` path is listed. Change only those elements, with your own file-editing tools, then call `register_open_design_artifact` again with the comments' ids as `resolvedCommentIds` so their pins leave the preview, and run the check as in step 6. In Claude Desktop Chat, then call `show_open_design_artifact` again so the user sees the result.
62
92
 
63
- If the user wants to start from or riff on an existing example rather than build something new, prefer `remix_open_design_example` (skillId must have a non-empty `exampleArtifactPath`) over `prepare_open_design_brief` — it copies a working starting artifact into the project and tells you to modify it rather than regenerate from scratch. See [references/remixable-examples.md](references/remixable-examples.md) for the full list of what's available to remix, grouped by mode — check it before calling `list_open_design_skills` with `remixableOnly: true` if a quick skim already answers the question.
93
+ If the user wants to start from or riff on an existing example rather than build something new, prefer `remix_open_design_example` (skillId must be an entry with `remixable: true`) over `prepare_open_design_brief` — it copies a working starting artifact into the project and tells you to modify it rather than regenerate from scratch. See [references/remixable-examples.md](references/remixable-examples.md) for the full list of what's available to remix, grouped by mode — check it before calling `list_open_design_skills` with `remixableOnly: true` if a quick skim already answers the question.
64
94
 
65
95
  If the user wants a brand/style that isn't one of the ~150 bundled design systems ("use our own brand colors", "match our website", "set up a custom design system for..."), call `create_open_design_design_system` with a `name`, a `brief` describing the brand, and an optional `sourceUrl` if they gave you a website to match. It returns `instructions` for writing a new `DESIGN.md` yourself (same file shape as every bundled design system) plus, when a `sourceUrl` was given, a best-effort extracted starting palette/font list to incorporate — treat that as a rough starting point, not ground truth. It does NOT write any files. After writing the file, call `set_active_design_system` with the returned `id` — there's no separate "register" step for design systems; a written `DESIGN.md` is immediately selectable, the same way generated artifacts are immediately visible once written.
66
96
 
@@ -9,6 +9,25 @@ Build a campaign with Open Design: one message, one visual system, every channel
9
9
 
10
10
  Brief: the rest of the user's message (if there is none, ask the user: "What is the campaign for, which channels, and which languages?")
11
11
 
12
+ **How to talk to the user.** Many people using Open Design don't write code, so:
13
+ - Use the user's own words. If they say "artifact", "design tokens" or give a file path, use those terms back; otherwise use the plain words below.
14
+ - Keep the machinery out of replies: no tool names, no ids like `od:prototype:poster-hero`, no internal files (`.artifact.json`, `.comments.json`, `config.json`), and not the words "register", "manifest", "sidecar", "entry" or "surface", unless the user used them first.
15
+ - Explain a print term the first time it comes up, in one short clause, and not again.
16
+ - Say where a file is the way the user would find it ("in your Open Design folder, under seed-swap-flyer"). Give a raw path only where the user can click it (Claude Code, Claude Desktop's Code tab, VS Code) or asks for it.
17
+ - End each reply that finishes a step with one line on what they can do next, with at most two options ("Want it in Instagram sizes too, or is it ready to print?").
18
+
19
+ | Instead of | Say |
20
+ |---|---|
21
+ | artifact, entry, registered | your design, saved |
22
+ | design system, active design system | your style (the first time: "a saved style: colours, fonts and spacing") |
23
+ | surface, skill, template, recipe | kind of design, starting layout, or nothing |
24
+ | workspace, output directory | your folder, your Open Design folder |
25
+ | bleed | print edge ("a few millimetres extra that the printer trims off") |
26
+ | trim size | final size |
27
+ | preflight findings, errors | "I checked it and fixed…", "one thing to look at:" |
28
+ | export | save as PDF, save as an image |
29
+ | inline preview, MCP App | the preview above |
30
+
12
31
  ## 1. Agree the copy deck
13
32
 
14
33
  Before designing anything, agree the words with the user. Draft them from the brief and show them as a short table:
@@ -9,6 +9,25 @@ Build a deck (or a one-pager) from existing documents with Open Design, storylin
9
9
 
10
10
  Request: the rest of the user's message (if there is none, ask the user: "Which document should the deck be built from, and for whom?")
11
11
 
12
+ **How to talk to the user.** Many people using Open Design don't write code, so:
13
+ - Use the user's own words. If they say "artifact", "design tokens" or give a file path, use those terms back; otherwise use the plain words below.
14
+ - Keep the machinery out of replies: no tool names, no ids like `od:prototype:poster-hero`, no internal files (`.artifact.json`, `.comments.json`, `config.json`), and not the words "register", "manifest", "sidecar", "entry" or "surface", unless the user used them first.
15
+ - Explain a print term the first time it comes up, in one short clause, and not again.
16
+ - Say where a file is the way the user would find it ("in your Open Design folder, under seed-swap-flyer"). Give a raw path only where the user can click it (Claude Code, Claude Desktop's Code tab, VS Code) or asks for it.
17
+ - End each reply that finishes a step with one line on what they can do next, with at most two options ("Want it in Instagram sizes too, or is it ready to print?").
18
+
19
+ | Instead of | Say |
20
+ |---|---|
21
+ | artifact, entry, registered | your design, saved |
22
+ | design system, active design system | your style (the first time: "a saved style: colours, fonts and spacing") |
23
+ | surface, skill, template, recipe | kind of design, starting layout, or nothing |
24
+ | workspace, output directory | your folder, your Open Design folder |
25
+ | bleed | print edge ("a few millimetres extra that the printer trims off") |
26
+ | trim size | final size |
27
+ | preflight findings, errors | "I checked it and fixed…", "one thing to look at:" |
28
+ | export | save as PDF, save as an image |
29
+ | inline preview, MCP App | the preview above |
30
+
12
31
  ## 1. Find the sources
13
32
 
14
33
  Identify the workspace files the request is based on. If it names none, ask which documents to use before doing anything else. Repository files count: `CHANGELOG.md` for a release deck, `docs/adr/*.md` for an architecture review, a metrics CSV or spreadsheet for a board update. Use up to 10 files; for a folder, pick the relevant files.
@@ -0,0 +1,76 @@
1
+ ---
2
+ name: open-design-design-system-from-url
3
+ description: Make a design system from a website — measure its real colours, fonts, spacing and button states in a browser, write DESIGN.md and tokens.css that agree, and check the result side by side with the site before saving — use whenever the user wants a design system, brand kit, theme or tokens taken from a website or URL ("make a design system from stripe.com", "match our site's look", "extract the brand from this page"), even if they don't mention Open Design
4
+ ---
5
+
6
+ <!-- generated:open-design-agent-kit -->
7
+
8
+ Make an Open Design design system from a website: measure the rendered site, write `DESIGN.md` and `tokens.css` from one set of measurements, and check the result against the site before saving it.
9
+
10
+ Request: the rest of the user's message (if there is none, ask the user: "Which website should the design system come from?")
11
+
12
+ **How to talk to the user.** Many people using Open Design don't write code, so:
13
+ - Use the user's own words. If they say "artifact", "design tokens" or give a file path, use those terms back; otherwise use the plain words below.
14
+ - Keep the machinery out of replies: no tool names, no ids like `od:prototype:poster-hero`, no internal files (`.artifact.json`, `.comments.json`, `config.json`), and not the words "register", "manifest", "sidecar", "entry" or "surface", unless the user used them first.
15
+ - Explain a print term the first time it comes up, in one short clause, and not again.
16
+ - Say where a file is the way the user would find it ("in your Open Design folder, under seed-swap-flyer"). Give a raw path only where the user can click it (Claude Code, Claude Desktop's Code tab, VS Code) or asks for it.
17
+ - End each reply that finishes a step with one line on what they can do next, with at most two options ("Want it in Instagram sizes too, or is it ready to print?").
18
+
19
+ | Instead of | Say |
20
+ |---|---|
21
+ | artifact, entry, registered | your design, saved |
22
+ | design system, active design system | your style (the first time: "a saved style: colours, fonts and spacing") |
23
+ | surface, skill, template, recipe | kind of design, starting layout, or nothing |
24
+ | workspace, output directory | your folder, your Open Design folder |
25
+ | bleed | print edge ("a few millimetres extra that the printer trims off") |
26
+ | trim size | final size |
27
+ | preflight findings, errors | "I checked it and fixed…", "one thing to look at:" |
28
+ | export | save as PDF, save as an image |
29
+ | inline preview, MCP App | the preview above |
30
+
31
+ ## 1. Ask only what's missing
32
+
33
+ Three things decide the run. Take each from the request when it says so, and ask only about the ones it leaves open, in one message:
34
+
35
+ 1. **The address** (and, optionally, up to 3 more pages on the same site, such as a pricing or product page).
36
+ 2. **Light, dark or both.** Default to light if the user doesn't care.
37
+ 3. **Their own brand, or a reference?** For a reference site the design system is named "<Name>-inspired" and no logos or images are copied.
38
+
39
+ If the request already answers all three ("make a dark design system from https://example.com, it's our brand"), ask nothing and go straight on.
40
+
41
+ ## 2. Measure the site
42
+
43
+ Call `extract_open_design_design_system` with `url`, `extraUrls` if there are any, and `theme`.
44
+
45
+ - **`ok`**: you get a `draft` (contract tokens, a `[data-theme="dark"]` set only if the site has a dark theme), `sources` saying which element each value came from, the `unmeasured` tokens, and the screenshot. Look at the screenshot and the role crops in the evidence bundle before writing anything.
46
+ - **`partial`** (no browser installed): only candidate colours and fonts from the page source. Tell the user, show the candidates, and ask them to confirm the brand colour and font, or to install Chrome for a full measurement.
47
+ - **`blocked`**: show the user the screenshot and the reason. Ask for the site's CSS, a screenshot of the page they mean, or another public page. Don't retry the same page.
48
+ - An invalid-args error (a private address, an extra page on another site): tell the user what was refused and why.
49
+
50
+ If the user asked for dark and the result notes that no dark theme was found, say so. Don't invent dark values.
51
+
52
+ ## 3. Write both files from the draft
53
+
54
+ Call `create_open_design_design_system` with a `name` (for a reference site, "<Name>-inspired") and a `brief` describing the site in a sentence. Don't pass `sourceUrl`: you have better measurements already. It returns the `suggestedEntryPath`, the `id` and the token contract.
55
+
56
+ Write `DESIGN.md` at `suggestedEntryPath` and `tokens.css` beside it, **both from the same draft**:
57
+
58
+ - **`tokens.css`**: start from `draftCss`. Keep every measured value exactly as measured. For an `unmeasured` token, leave it out so the contract fallback applies, or derive it from measured ones (a `color-mix()` of `--accent` for a missing hover); never make one up, and don't fill two steps with the same value.
59
+ - **Sanity-check each role against the screenshot first.** If a measured value plainly can't be that role (text that would be unreadable on `--bg`, a hairline as a spacing step), drop it and say so; don't write prose to explain it away.
60
+ - **`DESIGN.md`**: the values it names (primary colour, surface, text, the font families, the type scale) must be the same values as `tokens.css`. Write the prose (atmosphere, layout, components, voice, do and don't) from the screenshots. For a reference site, say near the top that it is inspired by the site and name it.
61
+ - **Marks**: for the user's own brand, copy the files in the result's `marks` into an `assets/` folder beside `DESIGN.md` and mention them there. For a reference site, copy none.
62
+
63
+ ## 4. Review it side by side
64
+
65
+ Write a review page next to the design system as `review.html`, and register it with `register_open_design_artifact`. One page, two columns:
66
+
67
+ - **Left, "The site":** the desktop screenshot from the evidence bundle (an `<img>` with a relative path to it), cropped with `object-fit: cover` to the top 900px.
68
+ - **Right, "The design system":** a sample page that uses only the new `tokens.css` (`<link rel="stylesheet">` to it, or its `:root` block inlined): a hero with a heading and a primary and secondary button, a card with text, and a form row with a label, an input and a button.
69
+
70
+ Call `check_open_design_artifact` on it. Compare the two columns yourself (colours, font, button shape, density), fix anything that's clearly off, then show the user the review and ask whether it matches.
71
+
72
+ Apply what the user says ("the buttons are rounder on the site" → raise the radius tokens) in both files, rebuild the review and check again. Stop after **two rounds** of fixes: save then, and list anything still open.
73
+
74
+ ## 5. Save
75
+
76
+ Call `set_active_design_system` with the returned `id` if the user wants to design with it now (offer it). Tell the user the design system's id and where its files are, and that the measurements are kept in the evidence bundle.