@feimacode/open-design-agent-kit 0.3.0-beta.3 → 0.4.0-beta.1
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.
- package/assets/claude-skills/{deck-guizang-editorial → od-deck-deck-guizang-editorial}/SKILL.md +1 -1
- package/assets/claude-skills/{deck-open-slide-canvas → od-deck-deck-open-slide-canvas}/SKILL.md +1 -1
- package/assets/claude-skills/{deck-swiss-international → od-deck-deck-swiss-international}/SKILL.md +1 -1
- package/assets/claude-skills/{guizang-ppt → od-deck-guizang-ppt}/SKILL.md +1 -1
- package/assets/claude-skills/{ppt-keynote → od-deck-ppt-keynote}/SKILL.md +1 -1
- package/assets/claude-skills/{article-magazine → od-prototype-article-magazine}/SKILL.md +1 -1
- package/assets/claude-skills/{card-twitter → od-prototype-card-twitter}/SKILL.md +1 -1
- package/assets/claude-skills/{card-xiaohongshu → od-prototype-card-xiaohongshu}/SKILL.md +1 -1
- package/assets/claude-skills/{data-report → od-prototype-data-report}/SKILL.md +1 -1
- package/assets/claude-skills/{doc-kami-parchment → od-prototype-doc-kami-parchment}/SKILL.md +1 -1
- package/assets/claude-skills/{mockup-device-3d → od-prototype-mockup-device-3d}/SKILL.md +1 -1
- package/assets/claude-skills/{poster-hero → od-prototype-poster-hero}/SKILL.md +1 -1
- package/assets/claude-skills/{resume-modern → od-prototype-resume-modern}/SKILL.md +1 -1
- package/assets/claude-skills/{social-carousel → od-prototype-social-carousel}/SKILL.md +1 -1
- package/assets/claude-skills/{social-reddit-card → od-prototype-social-reddit-card}/SKILL.md +1 -1
- package/assets/claude-skills/{social-spotify-card → od-prototype-social-spotify-card}/SKILL.md +1 -1
- package/assets/claude-skills/{social-x-post-card → od-prototype-social-x-post-card}/SKILL.md +1 -1
- package/assets/claude-skills/{social-youtube-thumbnail → od-prototype-social-youtube-thumbnail}/SKILL.md +1 -1
- package/assets/claude-skills/{frame-data-chart-nyt → od-video-frame-data-chart-nyt}/SKILL.md +1 -1
- package/assets/claude-skills/{frame-flowchart-sticky → od-video-frame-flowchart-sticky}/SKILL.md +1 -1
- package/assets/claude-skills/{frame-glitch-title → od-video-frame-glitch-title}/SKILL.md +1 -1
- package/assets/claude-skills/{frame-light-leak-cinema → od-video-frame-light-leak-cinema}/SKILL.md +1 -1
- package/assets/claude-skills/{frame-liquid-bg-hero → od-video-frame-liquid-bg-hero}/SKILL.md +1 -1
- package/assets/claude-skills/{frame-logo-outro → od-video-frame-logo-outro}/SKILL.md +1 -1
- package/assets/claude-skills/{frame-macos-notification → od-video-frame-macos-notification}/SKILL.md +1 -1
- package/assets/claude-skills/{vfx-text-cursor → od-video-vfx-text-cursor}/SKILL.md +1 -1
- package/assets/claude-skills/{video-hyperframes → od-video-video-hyperframes}/SKILL.md +1 -1
- package/assets/claude-skills/open-design/SKILL.md +48 -10
- package/assets/claude-skills/open-design-campaign/SKILL.md +19 -0
- package/assets/claude-skills/open-design-critique/SKILL.md +95 -0
- package/assets/claude-skills/open-design-deck-from-source/SKILL.md +19 -0
- package/assets/claude-skills/open-design-design-system-from-url/SKILL.md +81 -0
- package/assets/claude-skills/open-design-docs/SKILL.md +19 -0
- package/assets/claude-skills/open-design-explore/SKILL.md +23 -0
- package/assets/claude-skills/open-design-integrations/SKILL.md +19 -0
- package/assets/claude-skills/open-design-new/SKILL.md +37 -5
- package/assets/claude-skills/open-design-poster/SKILL.md +20 -1
- package/assets/claude-skills/open-design-preview/SKILL.md +22 -0
- package/assets/claude-skills/open-design-publish/SKILL.md +19 -0
- package/assets/claude-skills/open-design-recurring/SKILL.md +19 -0
- package/assets/claude-skills/open-design-social-post/SKILL.md +20 -1
- package/assets/codex-skills/article-magazine/SKILL.md +1 -1
- package/assets/codex-skills/card-twitter/SKILL.md +1 -1
- package/assets/codex-skills/card-xiaohongshu/SKILL.md +1 -1
- package/assets/codex-skills/data-report/SKILL.md +1 -1
- package/assets/codex-skills/deck-guizang-editorial/SKILL.md +1 -1
- package/assets/codex-skills/deck-open-slide-canvas/SKILL.md +1 -1
- package/assets/codex-skills/deck-swiss-international/SKILL.md +1 -1
- package/assets/codex-skills/doc-kami-parchment/SKILL.md +1 -1
- package/assets/codex-skills/frame-data-chart-nyt/SKILL.md +1 -1
- package/assets/codex-skills/frame-flowchart-sticky/SKILL.md +1 -1
- package/assets/codex-skills/frame-glitch-title/SKILL.md +1 -1
- package/assets/codex-skills/frame-light-leak-cinema/SKILL.md +1 -1
- package/assets/codex-skills/frame-liquid-bg-hero/SKILL.md +1 -1
- package/assets/codex-skills/frame-logo-outro/SKILL.md +1 -1
- package/assets/codex-skills/frame-macos-notification/SKILL.md +1 -1
- package/assets/codex-skills/guizang-ppt/SKILL.md +1 -1
- package/assets/codex-skills/mockup-device-3d/SKILL.md +1 -1
- package/assets/codex-skills/open-design/SKILL.md +48 -10
- package/assets/codex-skills/open-design-campaign/SKILL.md +19 -0
- package/assets/codex-skills/open-design-critique/SKILL.md +94 -0
- package/assets/codex-skills/open-design-deck-from-source/SKILL.md +19 -0
- package/assets/codex-skills/open-design-design-system-from-url/SKILL.md +76 -0
- package/assets/codex-skills/open-design-docs/SKILL.md +19 -0
- package/assets/codex-skills/open-design-explore/SKILL.md +19 -0
- package/assets/codex-skills/open-design-integrations/SKILL.md +19 -0
- package/assets/codex-skills/open-design-new/SKILL.md +31 -5
- package/assets/codex-skills/open-design-poster/SKILL.md +20 -1
- package/assets/codex-skills/open-design-preview/SKILL.md +19 -0
- package/assets/codex-skills/open-design-publish/SKILL.md +19 -0
- package/assets/codex-skills/open-design-recurring/SKILL.md +19 -0
- package/assets/codex-skills/open-design-social-post/SKILL.md +20 -1
- package/assets/codex-skills/poster-hero/SKILL.md +1 -1
- package/assets/codex-skills/ppt-keynote/SKILL.md +1 -1
- package/assets/codex-skills/resume-modern/SKILL.md +1 -1
- package/assets/codex-skills/social-carousel/SKILL.md +1 -1
- package/assets/codex-skills/social-reddit-card/SKILL.md +1 -1
- package/assets/codex-skills/social-spotify-card/SKILL.md +1 -1
- package/assets/codex-skills/social-x-post-card/SKILL.md +1 -1
- package/assets/codex-skills/social-youtube-thumbnail/SKILL.md +1 -1
- package/assets/codex-skills/vfx-text-cursor/SKILL.md +1 -1
- package/assets/codex-skills/video-hyperframes/SKILL.md +1 -1
- package/out/index.js +4243 -1699
- package/out/preview/mcp-app.js +110 -87
- package/out/preview/shell.js +24 -24
- package/package.json +2 -2
package/assets/claude-skills/{deck-guizang-editorial → od-deck-deck-guizang-editorial}/SKILL.md
RENAMED
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:deck:deck-guizang-editorial` (Guizang Editorial E-
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
package/assets/claude-skills/{deck-open-slide-canvas → od-deck-deck-open-slide-canvas}/SKILL.md
RENAMED
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:deck:deck-open-slide-canvas` (Open-Slide 1920 Canv
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
package/assets/claude-skills/{deck-swiss-international → od-deck-deck-swiss-international}/SKILL.md
RENAMED
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:deck:deck-swiss-international` (Swiss Internationa
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:deck:guizang-ppt` (Write a Brand-to-Revenue Story
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
|
@@ -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
|
|
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:article-magazine` (Magazine Article).
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:prototype:card-twitter` (Twitter Share Card).
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:prototype:card-xiaohongshu` (Xiaohongshu Card).
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:prototype:data-report` (Data Visualization Report)
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
package/assets/claude-skills/{doc-kami-parchment → od-prototype-doc-kami-parchment}/SKILL.md
RENAMED
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:prototype:doc-kami-parchment` (Kami Parchment Docu
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:prototype:mockup-device-3d` (Device 3D Showcase).
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
|
@@ -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
|
|
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: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
|
|
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
|
|
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`.
|
package/assets/claude-skills/{social-reddit-card → od-prototype-social-reddit-card}/SKILL.md
RENAMED
|
@@ -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
|
|
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`.
|
package/assets/claude-skills/{social-spotify-card → od-prototype-social-spotify-card}/SKILL.md
RENAMED
|
@@ -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
|
|
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`.
|
package/assets/claude-skills/{social-x-post-card → od-prototype-social-x-post-card}/SKILL.md
RENAMED
|
@@ -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
|
|
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
|
|
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`.
|
package/assets/claude-skills/{frame-data-chart-nyt → od-video-frame-data-chart-nyt}/SKILL.md
RENAMED
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:video:frame-data-chart-nyt` (NYT-Style Data Chart
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
package/assets/claude-skills/{frame-flowchart-sticky → od-video-frame-flowchart-sticky}/SKILL.md
RENAMED
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:video:frame-flowchart-sticky` (Sticky Flowchart Fr
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:video:frame-glitch-title` (Glitch Title Frame).
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
package/assets/claude-skills/{frame-light-leak-cinema → od-video-frame-light-leak-cinema}/SKILL.md
RENAMED
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:video:frame-light-leak-cinema` (Light-Leak Cinemat
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
package/assets/claude-skills/{frame-liquid-bg-hero → od-video-frame-liquid-bg-hero}/SKILL.md
RENAMED
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:video:frame-liquid-bg-hero` (Liquid Background Her
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:video:frame-logo-outro` (Logo Outro Frame).
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
package/assets/claude-skills/{frame-macos-notification → od-video-frame-macos-notification}/SKILL.md
RENAMED
|
@@ -11,4 +11,4 @@ Use the Open Design skill `od:video:frame-macos-notification` (macOS Notificatio
|
|
|
11
11
|
|
|
12
12
|
Brief: "$ARGUMENTS", or if empty: "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."
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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`.
|
|
@@ -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
|
|
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
|
|
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`.
|
|
@@ -11,32 +11,66 @@ A small, curated subset of skills/templates also has its own explicit `/open-des
|
|
|
11
11
|
|
|
12
12
|
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.
|
|
13
13
|
|
|
14
|
+
<!-- voice:start -->
|
|
15
|
+
**How to talk to the user.** Many people using Open Design don't write code, so:
|
|
16
|
+
- 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.
|
|
17
|
+
- 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.
|
|
18
|
+
- Explain a print term the first time it comes up, in one short clause, and not again.
|
|
19
|
+
- 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.
|
|
20
|
+
- 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?").
|
|
21
|
+
|
|
22
|
+
| Instead of | Say |
|
|
23
|
+
|---|---|
|
|
24
|
+
| artifact, entry, registered | your design, saved |
|
|
25
|
+
| design system, active design system | your style (the first time: "a saved style: colours, fonts and spacing") |
|
|
26
|
+
| surface, skill, template, recipe | kind of design, starting layout, or nothing |
|
|
27
|
+
| workspace, output directory | your folder, your Open Design folder |
|
|
28
|
+
| bleed | print edge ("a few millimetres extra that the printer trims off") |
|
|
29
|
+
| trim size | final size |
|
|
30
|
+
| preflight findings, errors | "I checked it and fixed…", "one thing to look at:" |
|
|
31
|
+
| export | save as PDF, save as an image |
|
|
32
|
+
| inline preview, MCP App | the preview above |
|
|
33
|
+
<!-- voice:end -->
|
|
34
|
+
|
|
14
35
|
Follow this flow:
|
|
15
36
|
|
|
16
37
|
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:
|
|
17
38
|
- **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`.
|
|
18
39
|
- **Codex CLI:** run `npx @feimacode/open-design-agent-kit init --tools codex` in the project root.
|
|
19
40
|
- **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.
|
|
20
|
-
- **Claude Desktop Chat or claude.ai** (no Open Design tools in the chat): don't make anything yet.
|
|
41
|
+
- **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:
|
|
42
|
+
> Open Design can't save or check designs in this chat yet. Two ways to fix that:
|
|
43
|
+
> 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.
|
|
44
|
+
> 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.
|
|
45
|
+
>
|
|
46
|
+
> What's the design for?
|
|
47
|
+
|
|
48
|
+
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.
|
|
21
49
|
|
|
22
50
|
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.
|
|
23
51
|
|
|
24
|
-
**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
|
|
52
|
+
**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.
|
|
25
53
|
|
|
26
|
-
**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`
|
|
54
|
+
**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` once; later rounds update that inline copy by itself. 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.
|
|
27
55
|
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.
|
|
28
|
-
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
|
|
56
|
+
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, as short multiple-choice options: through `show_open_design_questions` where it is in your tools, else in one message (or your host's question tool if it has one), and accept "you pick"; then call it again with the answers. Ask them in the same message as any surface questions, three in total at most. 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").
|
|
29
57
|
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.
|
|
30
58
|
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.
|
|
31
59
|
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.
|
|
32
|
-
6. Call `check_open_design_artifact` with the entry path before telling the user it's done (after creating an artifact, and again after a substantial edit). It renders the artifact and returns screenshots plus preflight findings: fix every **error**, then look at the screenshots for what the checks can't measure — balance, hierarchy, crowded or empty areas, text over busy imagery — and fix what's clearly wrong. Re-check after fixing, but stop after two fix rounds and tell the user about anything left. **3D designs are the exception:** when the check returns a 3D review sheet, a clean check isn't the end. Get the critique the check result asks for (the `3d-object` skill's scorecard, from a subagent where your host has one), then fix, re-check and re-critique for up to three critique rounds, which replace the two-fix-round limit. Don't describe the screenshots to the user unless they ask: each run's screenshots are saved for them, and the browser preview's Checks panel shows them before and after (the result also lists the saved paths). If it returns `no-browser`, skip checking and tell the user once that visual checks need Chrome, Edge or Chromium installed.
|
|
60
|
+
6. Call `check_open_design_artifact` with the entry path before telling the user it's done (after creating an artifact, and again after a substantial edit). It renders the artifact and returns screenshots plus preflight findings: fix every **error**, then look at the screenshots for what the checks can't measure — balance, hierarchy, crowded or empty areas, text over busy imagery — and fix what's clearly wrong. Taste warnings (`slop-glow`, `card-row`, `uniform-surface`, `type-scale`, `intent`) are worth a look: fix them unless the brief or the design system asks for that look, and never add `data-od-allow` only to silence one. Re-check after fixing, but stop after two fix rounds and tell the user about anything left. **Then get a second look** before you call it done: once the checks are clean or the fix rounds are spent, run the `open-design-critique` skill, which has a fresh critic judge the latest check run against the brief and the design system on purpose and hierarchy, typography, colour and contrast, layout and rhythm, copy, states, and fit, so build with those in mind. One critique round: on `polish`, apply its fixes once, register and re-check, then report done without another critique; on `rework`, tell the user what's wrong and ask before rebuilding; on `ship`, it's done. The brief or design system wins over a finding against a look it asks for, and the user can ask for another opinion at any time or say they don't want one. **3D designs are the exception:** when the check returns a 3D review sheet, a clean check isn't the end. Get the critique the check result asks for (the `3d-object` skill's scorecard, from a subagent where your host has one), then fix, re-check and re-critique for up to three critique rounds, which replace the two-fix-round limit and the second look above. Don't describe the screenshots to the user unless they ask: each run's screenshots are saved for them, and the browser preview's Checks panel shows them before and after (the result also lists the saved paths). If it returns `no-browser`, skip checking and tell the user once that visual checks need Chrome, Edge or Chromium installed.
|
|
33
61
|
7. Optionally call `get_open_design_artifact` to confirm what was written before telling the user it's done.
|
|
34
62
|
8. After the first artifact you register in a session, call `open_open_design_preview` with its entry path, unless the user said they don't want it, so they can see it. It opens a live browser preview that reloads whenever the file changes, so don't call it again after edits; call it again only to switch to another artifact. Mention that they can click **Comment** in the preview to leave comments on elements.
|
|
35
63
|
|
|
36
|
-
**In Claude Desktop
|
|
64
|
+
**In Claude Desktop's Code tab** (its preview tool, named like `preview_start`, is in your tools), use the Browser pane instead of a separate window: the first time you show a design in the session, call `set_up_open_design_browser_pane` (once per project; tell the user once, in one sentence, that you added a preview entry to `.claude/launch.json`), then start the `open-design-preview` configuration it names with that preview tool. The pane opens on the newest registered design and reloads when its files change. For a later design, reload the pane if your preview tools can, or tell the user it's in the pane's list. If the pane can't start, fall back to `open_open_design_preview`.
|
|
65
|
+
|
|
66
|
+
**In Claude Desktop Chat** (a chat conversation, not the Code tab or a terminal), call `show_open_design_artifact` with the entry path instead: it shows the design inline in the conversation, where the user can comment and click **Ask Claude to apply**. Call it once per design, after its first `register_open_design_artifact`: that copy follows later edits and applied comments by itself, so don't show the same design again unless the user asks. The register result says which applies. If its result says the host doesn't show MCP Apps, fall back to `open_open_design_preview` as above. Its export buttons post a request in the chat: run `export_open_design_artifact` with the format named and tell the user the path. For an exploration, pass `explorationId` to show the directions side by side; when the user picks one with **Take this one**, ask which next step they want before calling `choose_open_design_direction`. A style-tile exploration also offers **Use as design system**, which asks directly for `choose_open_design_direction` with `next: "save-design-system"`.
|
|
37
67
|
|
|
38
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`.
|
|
39
69
|
|
|
70
|
+
**Linking the public gallery.** Some results carry a link to the Open Design gallery, a website with every example and design system: `gallery.url` from `show_open_design_examples` and `show_open_design_design_systems`, and `designSystem.galleryUrl` from `register_open_design_artifact`. They appear only while the gallery is live; never write a gallery link yourself. When the user is **browsing** (wants to look before deciding: "show me some examples", "what styles are there?", "ideas for a café menu"), show the in-chat gallery where it is in your tools, then add one line linking `gallery.url` ("See them all in the [Open Design gallery](…)."), unless you already linked the gallery in this conversation. When a design is **ready** and its register result has `designSystem.galleryUrl`, name the design system with that link in the sentence that says it's ready ("It uses the [Kami](…) design system."), the first time you use that design system in the conversation; not again for later rounds or designs in the same style. Never link the gallery before building on a **concrete** request ("a poster for our seed swap on Saturday"), after an export or publish, or in a recurring job run.
|
|
71
|
+
|
|
72
|
+
**Asking with taps in Claude Desktop Chat.** `show_open_design_questions` is listed only where the host shows MCP Apps inline. Where it is in your tool list, ask every short multiple-choice question through it instead of a chat message: the surface and design-system questions before a build, which direction after an exploration, "fix these?" after a review. Up to four questions, each with a short `id`, `text`, a `kind` (`single`, `multi` or `text`) and up to eight `options`; an option can carry `imageRef` (`designSystem:<id>`, `example:<skillId>`, `artifact:<entryPath>` or `checkRun:<entryPath>`), never a URL. Don't repeat the questions in chat. The answer arrives as a message starting "Answers:" with a line `<!-- od-answers {...} -->`: read that JSON (question id to option id, an array for `multi`, typed text, or `you-pick`, meaning choose for them and say what you chose). Accept typed answers too. The artifact view also has three quick replies under the design ("Looks good", "Change something", "Try another direction"); each posts a message saying what to do next. Elsewhere, ask in one chat message.
|
|
73
|
+
|
|
40
74
|
<!-- claude-only -->
|
|
41
75
|
**The artifact preview (Claude Code and Claude Desktop).** If you have an Artifact tool, keep one private Claude artifact per design as the user's preview, so they can look at it on claude.ai without opening files:
|
|
42
76
|
- Publish it with `publish_open_design_artifact` and `provider: "claude-artifact"`, and follow what it returns: publish the file by its path, then record the link. Later publishes go to the recorded link, so the same artifact gets a new version and an open tab shows it.
|
|
@@ -51,7 +85,9 @@ Follow this flow:
|
|
|
51
85
|
- **Without Open Design's tools** (a chat where you have an Artifact tool but none of the `*_open_design_*` tools): to change a synced design, read the artifact and find its `<script type="application/od-sync+json">` block. Take the text of the file named by its `entry` from `files`, edit it, and publish to the same artifact URL a page made of the edited entry followed by the block, with that file's `content` replaced by the edited text and its `sha256` set to `null`. Leave the rest of the block as it is, and keep every `</` inside it written as `<\/`. A later restore reports the file as edited outside the kit. A page published without the block holds only the preview, with nothing to edit.
|
|
52
86
|
<!-- /claude-only -->
|
|
53
87
|
|
|
54
|
-
When a request
|
|
88
|
+
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.
|
|
89
|
+
|
|
90
|
+
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 and follow the surface's prompt when it names one. **Questions:** a surface lists a few `questions`, each with `options`, a `default` and what the answer `changes`. Ask only the ones the request, the conversation and the workspace don't already answer: at most three in total, merged with any design-system recommender questions (surface ones first), in one message, as multiple choice, accepting "you pick" (then use the question's `default`). A request that already says enough gets no questions. Pass the answers to `prepare_open_design_brief` as `answers` (question id to answer) and what you decided without asking as `assumptions` (up to six short lines), then pass both, with the request in one line as `text`, to `register_open_design_artifact` as `brief`. When the design is ready, list the assumptions in one sentence and invite a change ("I assumed a dark theme and one sign-up button; say if you want otherwise"). 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.
|
|
55
91
|
|
|
56
92
|
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.
|
|
57
93
|
|
|
@@ -65,19 +101,21 @@ If the user explicitly asks for **options to compare** ("show me three direction
|
|
|
65
101
|
1. Call `prepare_open_design_exploration` with the `skillId` and the user's `brief` (and `count` 2–4 if they gave a number; default 3). The tool picks deliberately different directions itself: visual styles when no design system is active, layout/narrative structures when one is (so the brand is kept), or pass `axis: "custom"` with `customDirections` when the user named what should vary ("three hero concepts"). Pass `directionIds` only when the brief's tone clearly calls for specific ones (e.g. `editorial-monocle` for a magazine, `brutalist-experimental` for an art or agency site). If the result says the active design system was set aside, tell the user.
|
|
66
102
|
2. For each returned direction, follow `sharedInstructions` followed by that direction's own `instructions`, write its file at its `suggestedEntryPath`, and call `register_open_design_artifact` with the `explorationId` and that direction's `directionId`. Directions are quick **sketches** (one screen, or a cover plus two slides), not full builds. If you can delegate work to sub-agents, generate the directions in parallel, passing each one `sharedInstructions` plus its own `instructions`.
|
|
67
103
|
3. Call `compare_open_design_exploration` with `contactSheet: true`. If you can view images, open the contact sheet and check the directions really look different (layout and hero pattern, not just colour); regenerate any that resembles another.
|
|
68
|
-
4. Show the user the comparison page path (`compareFile`; it opens in any browser straight from the file system and shows every direction side by side) and the contact sheet path, each on its own line, briefly describe how each direction differs, and ask which one to take forward.
|
|
104
|
+
4. Show the user the comparison page path (`compareFile`; it opens in any browser straight from the file system and shows every direction side by side) and the contact sheet path, each on its own line, briefly describe how each direction differs, and ask which one to take forward (through `show_open_design_questions` where it is in your tools, with each direction as an option and `imageRef: "artifact:<its entry path>"`).
|
|
69
105
|
5. When the user picks one, call `choose_open_design_direction` with `next`: `build-out` (build the chosen sketch out at full fidelity), `merge` (the same, taking named aspects from other directions via `mergeFrom`, e.g. "B with A's hero"), or `save-design-system` (turn the direction into a reusable custom design system). Follow the returned `instructions` and register the result as they say.
|
|
70
106
|
|
|
71
107
|
Generated artifacts land under the project's Open Design output directory (default `.open-design/`) so they stay visible and trackable in version control like any other project file. After registering or updating an artifact, tell the user where it was written, with its workspace-relative entry path (e.g. `.open-design/coffee-poster/coffee-poster.html`) on its own line: in Claude Desktop's Code tab, clicking that path opens it in the Browser pane. Don't open the HTML file in a browser yourself: `open_open_design_preview` (or `show_open_design_artifact` in Claude Desktop Chat) is how it is shown.
|
|
72
108
|
|
|
73
|
-
**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,
|
|
109
|
+
**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, the inline copy updates by itself; tell the user it's updated rather than showing it again.
|
|
74
110
|
|
|
75
|
-
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
|
|
111
|
+
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.
|
|
76
112
|
|
|
77
113
|
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.
|
|
78
114
|
|
|
79
115
|
Once the user is happy with a generated or refined artifact and wants it turned into real, working code in this app ("turn this into a real component", "add this to the app", "wire this into my codebase"), call `port_open_design_artifact_to_app` with the artifact's `entryPath`. It returns `instructions` for reproducing the artifact's design as idiomatic code in this project's actual application — read the returned instructions carefully: they'll tell you to find and follow a real existing component in this codebase as your pattern reference (its styling approach, conventions, file organization) rather than copying the artifact's HTML/CSS verbatim, and to leave routing/navigation wiring as a separate step for the user. It does NOT write any files itself.
|
|
80
116
|
|
|
117
|
+
When the user wants reusable components rather than one page in the app ("make Material 3 components for my React app from this", "a component library from this design", "an MUI / shadcn set for these screens"), call `prepare_open_design_component_library` instead, with the artifact's `entryPaths` (or the `collectionId` for every screen) and `library` `mui`, `shadcn` or `auto`. Follow its stages in order: write the `components.md` inventory and **stop for the user's yes** before any code, use the generated theme as is, wrap the library's own components, add the gallery, run the app's type check, then call the tool again with `record`. It writes no app code itself. "Material 3" means `mui`.
|
|
118
|
+
|
|
81
119
|
When the artifact is meant to be posted or uploaded as an image (an X/Twitter post, Instagram or LinkedIn image, Xiaohongshu cards, a YouTube thumbnail, a poster), call `export_open_design_artifact` with its `entryPath` after registering it. It renders the artifact in a headless browser and writes PNG/JPEG file(s) under the artifact's own `exports/` folder, sized from the source skill automatically unless you pass `width`/`height`. For multi-card designs, give each card a `data-od-card` attribute and pass `selector: "[data-od-card]"` to get one numbered image per card. Pass `maxBytes` with the platform's upload limit (X 5000000, YouTube thumbnail 2000000, Instagram 8000000). Tell the user the exported file paths. For any social-post request ("make an X post…", "an Instagram carousel…", "a YouTube thumbnail…"), load the `open-design-social-post` skill first. It maps each platform and format to the right canvas size, skillId and export arguments (and asks the user which platform when that's unclear), then walks through generate → register → export. Animated designs (motion frames, title cards, animated charts, sprite or WebGL animations) export as video or GIF: call `export_open_design_artifact` with `format: "mp4"`, `"webm"` or `"gif"`. Time runs on a virtual clock, so the frames are exact and the same on every run; the length comes from the page (`data-duration` frames or the longest animation) unless you pass `duration`. Before exporting, call `check_open_design_artifact` with `at` (e.g. `[0, 1.5, 3]`) to see the start, middle and end. Export needs an installed ffmpeg: if it reports `no-ffmpeg` or `ffmpeg-missing-encoder`, tell the user what to install rather than trying another way. Compositions built with the HyperFrames framework are the exception: the brief's own instructions render them with the HyperFrames CLI. After registering a slide deck, offer to export it as PowerPoint or PDF, and when the user wants that, call `export_open_design_artifact` with `format: "pptx"` or `"pdf"` (one full-bleed image per slide; not editable text). `format: "pdf"` on an ordinary page prints it as a vector PDF.
|
|
82
120
|
|
|
83
121
|
For a **diagram** of a system — architecture, dependencies, a request flow, a database schema (ERD), a state machine or a sequence of calls ("diagram how our services talk", "draw the schema", "how does checkout work?") — use the `diagram` skill (`od:prototype:diagram`, or remix its example `od:prototype:diagram:example`). Read the relevant code first and draw only what you read. Write nodes with `data-rank`/`data-lane` and hidden links, never coordinates, then call `add_open_design_diagram_runtime` (it inserts the layout runtime; never write that script yourself), register with kind `diagram` and the files you read as `sources`, and check it. When a later check or `get_open_design_artifact` reports that its sources changed, offer to redraw it.
|
|
@@ -10,6 +10,25 @@ Build a campaign with Open Design: one message, one visual system, every channel
|
|
|
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 is the campaign for, which channels, and which languages?")
|
|
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. Agree the copy deck
|
|
14
33
|
|
|
15
34
|
Before designing anything, agree the words with the user. Draft them from the brief and show them as a short table:
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: "open-design-critique"
|
|
3
|
+
description: Get a second opinion on an Open Design artifact from a design critic, judged from its latest check screenshots, the brief and the design system against a fixed rubric, with one verdict (ship, polish or rework) and at most five fixes — use before telling the user a design is done (the open-design skill's check step), and whenever the user asks for a second opinion, another opinion, a critique or a review of an Open Design artifact, or asks "is this good?"
|
|
4
|
+
argument-hint: which design to review (e.g. "the landing page"); leave empty for the most recent one
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
<!-- generated:curated-entry -->
|
|
8
|
+
|
|
9
|
+
Get a design critic's second opinion on one Open Design artifact.
|
|
10
|
+
|
|
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 get a second opinion?")
|
|
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
|
+
|
|
32
|
+
## 1. Find the artifact
|
|
33
|
+
|
|
34
|
+
Use the artifact the request names; if it names none, use the one you made or changed most recently in this conversation. Registered artifacts are the files under the Open Design output folder (default `.open-design/`) that have a `.artifact.json` file next to them. If it isn't registered yet, register it first with `register_open_design_artifact`.
|
|
35
|
+
|
|
36
|
+
## 2. Gather what the critic sees
|
|
37
|
+
|
|
38
|
+
Call `get_open_design_artifact` with its `entryPath` and `critique: true`. The result's `critiqueInput` holds the recorded brief (or, when there is none, the title and skill id), the design system's `DESIGN.md`, the latest saved check run's findings (including any taste and state findings) and its screenshot paths, and the last critique. The run's screenshots are attached.
|
|
39
|
+
|
|
40
|
+
If it says there is no saved check run, call `check_open_design_artifact` for the artifact first, fix any **error** it reports, then ask for the critique input again.
|
|
41
|
+
|
|
42
|
+
## 3. Get the critique
|
|
43
|
+
|
|
44
|
+
The critic judges only what is in `critiqueInput` and the screenshots, never what the builder meant. Pick the first of these your host has:
|
|
45
|
+
|
|
46
|
+
- **The `design-critic` agent** (Claude Code with the Open Design plugin; it may be listed as `open-design:design-critic`). Start it with the entry path, the `critiqueInput` JSON exactly as returned, and the screenshot and entry file paths written as full paths your own file tools can read. Add nothing about what you intended or what the user said beyond the recorded brief. It reads, it never edits.
|
|
47
|
+
- **A general subagent tool** (the Agent tool in Claude Code, `runSubagent` in VS Code). Give it the same material plus the rubric and output format below, and tell it not to edit any file.
|
|
48
|
+
- **Neither: run it yourself, inline.** Judge the attached screenshots against the rubric as if you had never seen the design before: look for what is on the screen, not for what you meant to put there. In your reply, call it a self-review ("I looked it over again myself"), since it is weaker than a fresh critic.
|
|
49
|
+
|
|
50
|
+
<!-- rubric:start -->
|
|
51
|
+
**Rubric.** Judge the screenshots first and the entry file only to confirm copy and states. Every finding names one of these areas:
|
|
52
|
+
|
|
53
|
+
| `area` | Looks for |
|
|
54
|
+
|---|---|
|
|
55
|
+
| `purpose-hierarchy` | Can you tell in five seconds what this is and what to do? One clear first read. |
|
|
56
|
+
| `typography` | The display scale actually used, comfortable line length, not too many sizes or weights. |
|
|
57
|
+
| `colour-contrast` | The accent used for meaning, not decoration; contrast findings from the check. |
|
|
58
|
+
| `layout-rhythm` | Spacing on the design system's steps, alignment, crowded or dead areas. |
|
|
59
|
+
| `copy` | Filler, invented numbers, vague buttons ("Submit", "Learn more"). |
|
|
60
|
+
| `states` | Empty, loading and error states present where the design shows data. |
|
|
61
|
+
| `fit` | Matches the design system's `DESIGN.md` and the brief, not a generic look. |
|
|
62
|
+
|
|
63
|
+
**The brief wins.** When the brief or the design system asks for the look a finding objects to (all caps, one colour, a dense layout), drop the finding. Don't flag what the check already reported as an error unless it is still visible in the screenshots.
|
|
64
|
+
|
|
65
|
+
**Verdict:** one of
|
|
66
|
+
- `ship`: nothing worth another round.
|
|
67
|
+
- `polish`: one round of the listed fixes makes it right.
|
|
68
|
+
- `rework`: the direction is wrong (wrong audience, wrong kind of design, unreadable), and fixes won't save it.
|
|
69
|
+
|
|
70
|
+
**Findings:** at most five, most important first, each with `area`, `where` (the section, element, slide or viewport), `problem` (what is wrong, in one sentence) and `fix` (the change to make, specific enough to do without asking). Fewer is better than padding: a `ship` verdict usually has none.
|
|
71
|
+
|
|
72
|
+
**Output:** only this JSON, nothing before or after it:
|
|
73
|
+
|
|
74
|
+
```json
|
|
75
|
+
{ "verdict": "polish", "findings": [{ "area": "copy", "where": "hero button", "problem": "\"Learn more\" doesn't say what happens.", "fix": "Say \"Start your free trial\"." }] }
|
|
76
|
+
```
|
|
77
|
+
<!-- rubric:end -->
|
|
78
|
+
|
|
79
|
+
## 4. Act on the verdict
|
|
80
|
+
|
|
81
|
+
- **`ship`:** the design is done. Record the critique (step 5) and tell the user.
|
|
82
|
+
- **`polish`:** apply every finding once with your own file-editing tools, register the artifact again (with the critique, step 5), run `check_open_design_artifact`, and fix any new **error**. Then report it done: don't ask for a second critique unless the user wants one.
|
|
83
|
+
- **`rework`:** don't rebuild yet. Record the critique, tell the user in a sentence or two what is wrong and what you would change, and ask whether to rebuild that way. Rebuilding is their call.
|
|
84
|
+
|
|
85
|
+
When the user asked for this opinion themselves, show them the verdict and findings and ask which to apply, instead of applying them straight away.
|
|
86
|
+
|
|
87
|
+
## 5. Record it
|
|
88
|
+
|
|
89
|
+
Pass the critique as `critique` (`verdict` and `findings`, as returned) on your next `register_open_design_artifact` call for the artifact, with the same other arguments as its last registration (kind, title, skill id, design system, format, supporting files). Only the latest critique is kept; it shows in the browser preview's Checks panel as "Second look". `checkRunId` and `at` are filled in for you. If registration rejects it as over 4 KB, shorten the findings and register again.
|
|
90
|
+
|
|
91
|
+
## 6. Tell the user
|
|
92
|
+
|
|
93
|
+
Keep it short and in everyday words: "I had a second look: …", then the top one or two things you improved (or, for `rework`, what's wrong), and nothing about rubric areas, verdict codes, file paths or tools. In Claude Desktop Chat and Cowork, say at most two findings and nothing more technical than that. Elsewhere, list every finding only if the user asks.
|
|
94
|
+
|
|
95
|
+
If the user says they don't want a second look on their designs, respect it for the rest of the conversation and skip this skill in the check step.
|
|
@@ -10,6 +10,25 @@ Build a deck (or a one-pager) from existing documents with Open Design, storylin
|
|
|
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 document should the deck be built from, and for whom?")
|
|
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 sources
|
|
14
33
|
|
|
15
34
|
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.
|