@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
|
@@ -0,0 +1,81 @@
|
|
|
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
|
+
argument-hint: the website address, and optionally light/dark/both and whether it's your brand (e.g. "https://example.com, dark, our brand")
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
<!-- generated:curated-entry -->
|
|
8
|
+
|
|
9
|
+
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.
|
|
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 website should the design system come from?")
|
|
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. Ask only what's missing
|
|
33
|
+
|
|
34
|
+
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:
|
|
35
|
+
|
|
36
|
+
1. **The address** (and, optionally, up to 3 more pages on the same site, such as a pricing or product page).
|
|
37
|
+
2. **Light, dark or both.** Default to light if the user doesn't care.
|
|
38
|
+
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.
|
|
39
|
+
|
|
40
|
+
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.
|
|
41
|
+
|
|
42
|
+
## 2. Measure the site
|
|
43
|
+
|
|
44
|
+
Call `extract_open_design_design_system` with `url`, `extraUrls` if there are any, and `theme`.
|
|
45
|
+
|
|
46
|
+
- **`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.
|
|
47
|
+
- **`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.
|
|
48
|
+
- **`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.
|
|
49
|
+
- An invalid-args error (a private address, an extra page on another site): tell the user what was refused and why.
|
|
50
|
+
|
|
51
|
+
If the user asked for dark and the result notes that no dark theme was found, say so. Don't invent dark values.
|
|
52
|
+
|
|
53
|
+
## 3. Write both files from the draft
|
|
54
|
+
|
|
55
|
+
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.
|
|
56
|
+
|
|
57
|
+
Write `DESIGN.md` at `suggestedEntryPath` and `tokens.css` beside it, **both from the same draft**:
|
|
58
|
+
|
|
59
|
+
- **`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.
|
|
60
|
+
- **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.
|
|
61
|
+
- **`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.
|
|
62
|
+
- **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.
|
|
63
|
+
|
|
64
|
+
## 4. Review it side by side
|
|
65
|
+
|
|
66
|
+
Write a review page next to the design system as `review.html`, and register it with `register_open_design_artifact`. One page, two columns:
|
|
67
|
+
|
|
68
|
+
- **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.
|
|
69
|
+
- **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.
|
|
70
|
+
|
|
71
|
+
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.
|
|
72
|
+
|
|
73
|
+
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.
|
|
74
|
+
|
|
75
|
+
## 5. Save
|
|
76
|
+
|
|
77
|
+
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.
|
|
78
|
+
|
|
79
|
+
<!-- claude-only -->
|
|
80
|
+
**Claude Design.** If you have Claude's Artifact tool, offer to copy the design system into Claude Design as a Design System artifact. Export it with `npx tsx scripts/claude-design-system.ts export <its folder> <out-dir>` when you're in a checkout of the agent kit; that writes Claude's format and checks it. Otherwise follow the Open Design design systems guide, "Use one in Claude Design".
|
|
81
|
+
<!-- /claude-only -->
|
|
@@ -10,6 +10,25 @@ Turn existing Markdown documents into designed HTML pages with Open Design, one
|
|
|
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 Markdown files should become pages, and in what style?")
|
|
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 files
|
|
14
33
|
|
|
15
34
|
Resolve the folder or glob in the request with your own file tools (for example `docs/adr/*.md`). List what you found.
|
|
@@ -10,6 +10,25 @@ Explore several deliberately different design directions with Open Design, compa
|
|
|
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 we explore directions for?")
|
|
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. Plan the directions
|
|
14
33
|
|
|
15
34
|
If the brief is empty, ask the user what to design before doing anything else.
|
|
@@ -41,6 +60,10 @@ Give the user the comparison page path (it opens in any browser straight from th
|
|
|
41
60
|
- **merge** in parts of another direction ("B, with A's hero"), or
|
|
42
61
|
- **save it as a design system** for later work.
|
|
43
62
|
|
|
63
|
+
<!-- claude-only -->
|
|
64
|
+
**In Claude Desktop Chat**, call `show_open_design_artifact` with the `explorationId` to show the directions side by side, and where `show_open_design_questions` is in your tool list, ask the choice through it instead of a chat message: a `direction` question with one option per direction (`imageRef: "artifact:<its entryPath>"`), a `next` question (Build it out, Merge in parts of another, Save as a design system) and a short `text` question for anything to change or take from another direction. Read the `<!-- od-answers {...} -->` line of the reply (`you-pick` means choose for them), then go on to step 5. If the user types their answer or taps "Take this one" instead, use that.
|
|
65
|
+
<!-- /claude-only -->
|
|
66
|
+
|
|
44
67
|
## 5. Take the choice forward
|
|
45
68
|
|
|
46
69
|
Call `choose_open_design_direction` with the `explorationId`, the chosen `directionId`, `next` (`build-out`, `merge` with `mergeFrom`, or `save-design-system`) and the user's own adjustments as `notes`. Follow the returned `instructions` and register the result as they say.
|
|
@@ -10,6 +10,25 @@ Show the user Open Design's integrations and whether each one is connected here.
|
|
|
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: "Anything you'd like to connect? (or leave empty to just see the list)")
|
|
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. Get the list
|
|
14
33
|
|
|
15
34
|
Call `list_open_design_integrations` with no arguments. It returns every integration grouped by purpose, each with what it does, the tool names that show it's connected on this agent, whether it can be set up here, and how to manage without it.
|
|
@@ -10,26 +10,58 @@ Start a new design with Open Design.
|
|
|
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 do you want to make, and what is it for?")
|
|
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 surface
|
|
14
33
|
|
|
15
|
-
Call `list_open_design_skills` with `surface: "list"` to get the kinds of thing Open Design can make (each with an id, label and description).
|
|
34
|
+
Call `list_open_design_skills` with `surface: "list"` to get the kinds of thing Open Design can make (`surfaces`, each with an id, label and description) and the `goals`, plain-language aims such as "Promote an event" or "Get hired", each with the surfaces it leads to.
|
|
16
35
|
|
|
17
|
-
- If the request starts with or clearly names
|
|
18
|
-
- If it
|
|
36
|
+
- If the request starts with or clearly names a surface (by id or label, e.g. "wireframe", "diagram", "a poster"), use that surface.
|
|
37
|
+
- If it says what the design is for but names no surface ("help me get a UX job"), take the goal that fits.
|
|
38
|
+
- If it is empty or too vague to tell, show the user the goals (label and description) and ask one question: "What's it for?". Stop until they answer. Show the surfaces instead only if they ask what kinds of thing you can make.
|
|
39
|
+
- Once you have a goal, call `list_open_design_skills` with `goal` set to its id and use the surface marked `default`, unless the request points at another of that goal's surfaces. Ask which one only when the goal leads to several and you can't tell.
|
|
19
40
|
|
|
20
41
|
## 2. Ask what's missing
|
|
21
42
|
|
|
22
43
|
Call `list_open_design_skills` with `surface` set to the chosen id. The result has the surface's `questions` and its `entries`.
|
|
23
44
|
|
|
24
|
-
Ask only the
|
|
45
|
+
Each question has `options`, a `default` and what the answer `changes`. Ask only the ones the request, the conversation and the workspace don't already answer, all at once, in one short message, as multiple choice, and accept "you pick" (then use the question's `default`). Ask at most three. If the request already says enough, don't ask anything: "a printed A3 poster for our jazz night on 4 May, dark and moody" gets no questions; "a poster for our event" gets a few.
|
|
46
|
+
|
|
47
|
+
If no design system is active and the request names no look, also call `recommend_open_design_design_systems` with what you know (the surface, what it's for, how it should feel). If its result has `questions`, add the ones the request doesn't answer to that same message, still three in total at most, surface questions first. Use its first recommendation as the `designSystemId` in step 3, and say which style you used and that they can pick another.
|
|
48
|
+
|
|
49
|
+
Keep the answers by question id, and note anything you decide without asking (a theme, a layout, how many sections) as a short assumption.
|
|
50
|
+
|
|
51
|
+
<!-- claude-only -->
|
|
52
|
+
**Asking with taps (Claude Desktop Chat).** Where `show_open_design_questions` is in your tool list (it is listed only where the host shows MCP Apps inline), ask these questions through it instead of a chat message: all of them in one call, at most four, each with a short `id`, its `text` and its choices as `options`. Give a design-system option `imageRef: "designSystem:<id>"` so the user sees its palette. Don't repeat the questions in chat. The answer arrives as a message starting "Answers:" with a line `<!-- od-answers {...} -->`: read that JSON (`you-pick` means choose for them). If the user types their answers instead, use those.
|
|
53
|
+
<!-- /claude-only -->
|
|
25
54
|
|
|
26
55
|
## 3. Build it
|
|
27
56
|
|
|
28
57
|
- If the surface has a `prompt` (for example `open-design-poster` or `open-design-social-post`), follow that flow from its first step with the user's request as the brief. In Copilot Chat it's the `/` command of the same name; in Claude Code and Codex it's the skill of the same name.
|
|
29
|
-
- Otherwise pick the entry that best fits the request. Entries come in curated order: the recipe first, then its remixable example when there is one. To start from a rendered example (an entry with
|
|
58
|
+
- Otherwise pick the entry that best fits the request. Entries come in curated order: the recipe first, then its remixable example when there is one. To start from a rendered example (an entry with `remixable: true`), call `remix_open_design_example`; otherwise call `prepare_open_design_brief` with its id, the brief, any recommended `designSystemId`, the `answers` and your `assumptions` (up to six), and follow the general Open Design flow: write the files, register the artifact with `brief` (the request in one line as `text`, plus the same `answers` and `assumptions`), then check it with `check_open_design_artifact` before saying it's done.
|
|
59
|
+
- When you present the design, list your assumptions in one sentence and invite a change: "I assumed a dark theme and one sign-up button; say if you want otherwise."
|
|
30
60
|
|
|
31
61
|
<!-- claude-only -->
|
|
32
62
|
**Picking by eye (Claude Desktop Chat).** When the user wants to choose a starting example from pictures, and `show_open_design_examples` is in your tool list (it is listed only where the host shows MCP Apps inline), call it with `surface` set to the chosen id instead of listing entries in text. "Remix this" posts the pick in the chat; then call `remix_open_design_example` with the skillId it names. Without that tool, keep to the text list above.
|
|
63
|
+
|
|
64
|
+
**Gallery links.** If the user is browsing rather than asking for something specific, and the in-chat gallery's result has `gallery.url`, add one line linking it ("See them all in the [Open Design gallery](…)."), once per conversation. When the design is ready and `register_open_design_artifact` returned `designSystem.galleryUrl`, name the design system with that link in the ready sentence, the first time you use it in the conversation. Never write a gallery link yourself, and never link it on a concrete request before the design.
|
|
33
65
|
<!-- /claude-only -->
|
|
34
66
|
|
|
35
67
|
<!-- claude-only -->
|
|
@@ -10,6 +10,25 @@ Design a poster with Open Design, check it, and export files that are ready to p
|
|
|
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 poster for, and is it for print (which size) or screens?")
|
|
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 medium and a default shape
|
|
14
33
|
|
|
15
34
|
Decide whether this is for **print** or **screens**. If the brief doesn't say, ask the user before doing anything else. Don't guess between print and screen: the units, bleed and type sizes are different.
|
|
@@ -40,7 +59,7 @@ Otherwise call `prepare_open_design_brief` with:
|
|
|
40
59
|
- `format`: the default shape from step 1;
|
|
41
60
|
- `fluid: true`.
|
|
42
61
|
|
|
43
|
-
Call `list_open_design_design_systems` first
|
|
62
|
+
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.
|
|
44
63
|
|
|
45
64
|
Author the file yourself, following the returned instructions. Their **Canvas** section is authoritative: one `data-od-card data-od-fluid` element sized by `--od-w`/`--od-h`, everything inside sized in container units, and layout rules for wide and tall shapes. Also:
|
|
46
65
|
|
|
@@ -10,6 +10,28 @@ Show an Open Design artifact in the browser preview.
|
|
|
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 the preview show?")
|
|
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. Work out which artifact is meant. Registered artifacts are the files under the Open Design output folder (default `.open-design/`) that have a `.artifact.json` file next to them. Use the one the request names; if it names none, use the one you made or changed most recently in this conversation. If that still doesn't settle it, call `open_open_design_preview` without `entryPath`: the preview then lists every design, and the user picks there.
|
|
14
33
|
2. Call `open_open_design_preview` with that `entryPath`.
|
|
34
|
+
<!-- claude-only -->
|
|
35
|
+
In Claude Desktop's Code tab (its preview tool, named like `preview_start`, is in your tools), use the Browser pane instead: call `set_up_open_design_browser_pane` (tell the user once that you added a preview entry to `.claude/launch.json` if it says so), then start the `open-design-preview` configuration with that preview tool. The pane opens on the newest registered design; if the request names an older one, tell the user to pick it from the pane's list. In Claude Desktop Chat, call `show_open_design_artifact` with the `entryPath` instead, unless the user asked for a browser window.
|
|
36
|
+
<!-- /claude-only -->
|
|
15
37
|
3. Tell the user in one or two sentences what happened, using the tool's result: where the preview opened (or the URL to open, when it couldn't open a window), that it reloads by itself when the design changes, and that they can click **Comment**, then an element, to leave a comment, and **Send to agent** when they want you to apply them.
|
|
@@ -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
|
|
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
|
|
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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`.
|