From 06051fb4c980e931eaeda999cccaee3904e7214b Mon Sep 17 00:00:00 2001 From: EtienneLescot Date: Sun, 18 Oct 2026 12:05:57 +0200 Subject: [PATCH 1/5] docs: put the one-sentence demo prompt first in the README and the home hero The README opens with the prompt in a copyable block. The home hero gets a badge beside the download button that copies it in one click. --- README.md | 6 + website/i18n/code.source.json | 131 +++++++++--------- website/i18n/de/code.json | 9 ++ website/i18n/es/code.json | 9 ++ website/i18n/fr/code.json | 9 ++ website/i18n/ja/code.json | 9 ++ website/i18n/pt-BR/code.json | 9 ++ website/i18n/zh-CN/code.json | 9 ++ website/i18n/zh-TW/code.json | 9 ++ .../PlatformDownload/styles.module.css | 3 + website/src/pages/index.module.css | 77 +++++++++- website/src/pages/index.tsx | 70 +++++++--- 12 files changed, 263 insertions(+), 87 deletions(-) diff --git a/README.md b/README.md index 17e10378d..746553785 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,12 @@ #

OpenScreen

+

Make a demo video with one sentence in Claude Code:

+ +```text +Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature. +``` +

A free, open-source desktop app for recording your screen and turning the result into polished product demos and walkthroughs.

diff --git a/website/i18n/code.source.json b/website/i18n/code.source.json index 16c1315a5..3ee4e33ef 100644 --- a/website/i18n/code.source.json +++ b/website/i18n/code.source.json @@ -41,6 +41,9 @@ "download.preRelease.cta": "Browse all releases", "home.agents.copied": "Copied", "home.agents.copy": "Copy", + "home.hero.agentBadge.copied": "Now paste it into Claude Code", + "home.hero.agentBadge": "Make a demo with Claude Code", + "home.hero.agentBadge.copy": "Copy prompt", "home.meta.title": "Free open-source screen recorder & video editor", "home.meta.description": "Turn screen recordings into polished demos with automatic zooms, styled backgrounds and an editable cursor. Free and open source for Windows, macOS and Linux. No watermark.", "home.hero.kicker": "Open-source screen recorder", @@ -78,46 +81,6 @@ "home.install.note.windows": "Windows", "home.install.note.mac": "Mac", "home.install.note.linux": "Linux", - "demoLoop.pause": "Pause video", - "demoLoop.play": "Play video", - "demoLoop.classic-zoom": "A task board recorded in OpenScreen. The view zooms in on a checklist item and a Ship button as they are clicked, then pulls back to the whole board.", - "demoLoop.3d-camera": "The same recording seen through the 3D camera, which tilts the screen and orbits around it while it follows the cursor.", - "demoLoop.3d-cursors": "One recorded pointer, redrawn in five cursor styles one after another while the recording keeps playing.", - "demoLoop.automatic-subtitles": "A narrated recording with captions under it, switching from English to French, Spanish and Korean.", - "demoLoop.caption-styles": "One caption shown in five styles: a plain caption, a bold yellow one, a handwritten one, a monospaced one, and one showing a single word at a time.", - "demoLoop.edit-by-transcript": "In the editor's transcript, a sentence is selected and deleted, and the matching cut appears on the timeline.", - "demoLoop.tighten-pauses": "Two clicks on the silence markers in the transcript, and both pauses are cut from the timeline.", - "demoLoop.background-picker": "The editor's background picker going through wallpapers, a gradient and a solid color, then turning on the animated Aurora background.", - "demoLoop.every-format": "The same recording exported in 16:9, then square, then vertical, with the framing following the cursor.", - "demoLoop.sensitive-data-mask": "A sign-in form being filled in. The email and password fields stay blurred while they are typed.", - "demoLoop.camera-blur": "A square webcam vignette over a screen recording. The view moves in on it while the room behind the speaker blurs, then pulls back.", - "demoLoop.every-layout": "One recording with a webcam, cycling through the layouts: picture in picture, side by side, stacked, full camera, then screen only.", - "demoLoop.device-frames": "The same playing recording framed in turn as a browser window, a phone, a laptop and a desktop monitor.", - "demoLoop.animated-backgrounds": "A recording on a plain background, then on a blurred photo background that moves slowly behind it.", - "demoLoop.beautiful-by-default": "A raw screen capture, then the same take as OpenScreen opens it, already zoomed, framed and with a restyled cursor, then in several looks.", - "demoLoop.simpler-editor": "The OpenScreen editor. One click on a background thumbnail restyles the whole video, then the side panel switches to the transcript.", - "demoLoop.edit-like-a-doc": "Text selected in the transcript is deleted like text in a document, and the video is cut to match.", - "demoLoop.ask-the-agent": "A request typed into the editor's chat panel, and the edits the agent makes appearing on the timeline.", - "demoLoop.title.classic-zoom": "Automatic zoom on clicks", - "demoLoop.title.3d-camera": "A 3D camera orbiting the screen", - "demoLoop.title.3d-cursors": "Cursor packs, drawn in 3D", - "demoLoop.title.automatic-subtitles": "Captions translated into other languages", - "demoLoop.title.caption-styles": "Five caption styles", - "demoLoop.title.edit-by-transcript": "Cutting video by deleting text in the transcript", - "demoLoop.title.tighten-pauses": "Cutting silences from the transcript", - "demoLoop.title.background-picker": "Changing the background behind a recording", - "demoLoop.title.every-format": "One recording in 16:9, 1:1 and 9:16", - "demoLoop.title.sensitive-data-mask": "Blurring an email address and a password", - "demoLoop.title.camera-blur": "Webcam background blur", - "demoLoop.title.every-layout": "Webcam layouts", - "demoLoop.title.device-frames": "Device frames", - "demoLoop.title.animated-backgrounds": "Animated backgrounds", - "demoLoop.title.beautiful-by-default": "From a raw screen capture to a finished demo", - "demoLoop.title.simpler-editor": "The OpenScreen editor", - "demoLoop.title.edit-like-a-doc": "Editing a video like a document", - "demoLoop.title.ask-the-agent": "Asking the editor's agent for an edit", - "editor.skipLink": "Skip the editor — go to downloads", - "editor.title": "Five things you will actually do", "films.default.kicker": "Out of the box", "films.default.title": "Good-looking from the first take.", "films.default.lead": "Every new recording opens {zoomed}, on a wallpaper, with padding, a shadow and rounded corners. Change any of it, or export it as it is.", @@ -167,9 +130,73 @@ "films.ship.blur": "{t} Smooth or mosaic, as a rectangle, an oval or a freehand shape, over an email, a key or a password.", "films.ship.blur.t": "Blur regions.", "films.label": "More of the app, in motion", + "editor.skipLink": "Skip the editor — go to downloads", + "editor.title": "Five things you will actually do", + "demoLoop.pause": "Pause video", + "demoLoop.play": "Play video", + "demoLoop.classic-zoom": "A task board recorded in OpenScreen. The view zooms in on a checklist item and a Ship button as they are clicked, then pulls back to the whole board.", + "demoLoop.3d-camera": "The same recording seen through the 3D camera, which tilts the screen and orbits around it while it follows the cursor.", + "demoLoop.3d-cursors": "One recorded pointer, redrawn in five cursor styles one after another while the recording keeps playing.", + "demoLoop.automatic-subtitles": "A narrated recording with captions under it, switching from English to French, Spanish and Korean.", + "demoLoop.caption-styles": "One caption shown in five styles: a plain caption, a bold yellow one, a handwritten one, a monospaced one, and one showing a single word at a time.", + "demoLoop.edit-by-transcript": "In the editor's transcript, a sentence is selected and deleted, and the matching cut appears on the timeline.", + "demoLoop.tighten-pauses": "Two clicks on the silence markers in the transcript, and both pauses are cut from the timeline.", + "demoLoop.background-picker": "The editor's background picker going through wallpapers, a gradient and a solid color, then turning on the animated Aurora background.", + "demoLoop.every-format": "The same recording exported in 16:9, then square, then vertical, with the framing following the cursor.", + "demoLoop.sensitive-data-mask": "A sign-in form being filled in. The email and password fields stay blurred while they are typed.", + "demoLoop.camera-blur": "A square webcam vignette over a screen recording. The view moves in on it while the room behind the speaker blurs, then pulls back.", + "demoLoop.every-layout": "One recording with a webcam, cycling through the layouts: picture in picture, side by side, stacked, full camera, then screen only.", + "demoLoop.device-frames": "The same playing recording framed in turn as a browser window, a phone, a laptop and a desktop monitor.", + "demoLoop.animated-backgrounds": "A recording on a plain background, then on a blurred photo background that moves slowly behind it.", + "demoLoop.beautiful-by-default": "A raw screen capture, then the same take as OpenScreen opens it, already zoomed, framed and with a restyled cursor, then in several looks.", + "demoLoop.simpler-editor": "The OpenScreen editor. One click on a background thumbnail restyles the whole video, then the side panel switches to the transcript.", + "demoLoop.edit-like-a-doc": "Text selected in the transcript is deleted like text in a document, and the video is cut to match.", + "demoLoop.ask-the-agent": "A request typed into the editor's chat panel, and the edits the agent makes appearing on the timeline.", + "demoLoop.title.classic-zoom": "Automatic zoom on clicks", + "demoLoop.title.3d-camera": "A 3D camera orbiting the screen", + "demoLoop.title.3d-cursors": "Cursor packs, drawn in 3D", + "demoLoop.title.automatic-subtitles": "Captions translated into other languages", + "demoLoop.title.caption-styles": "Five caption styles", + "demoLoop.title.edit-by-transcript": "Cutting video by deleting text in the transcript", + "demoLoop.title.tighten-pauses": "Cutting silences from the transcript", + "demoLoop.title.background-picker": "Changing the background behind a recording", + "demoLoop.title.every-format": "One recording in 16:9, 1:1 and 9:16", + "demoLoop.title.sensitive-data-mask": "Blurring an email address and a password", + "demoLoop.title.camera-blur": "Webcam background blur", + "demoLoop.title.every-layout": "Webcam layouts", + "demoLoop.title.device-frames": "Device frames", + "demoLoop.title.animated-backgrounds": "Animated backgrounds", + "demoLoop.title.beautiful-by-default": "From a raw screen capture to a finished demo", + "demoLoop.title.simpler-editor": "The OpenScreen editor", + "demoLoop.title.edit-like-a-doc": "Editing a video like a document", + "demoLoop.title.ask-the-agent": "Asking the editor's agent for an edit", + "download.cta.mac": "Download for Mac", + "download.cta.windows": "Download for Windows", + "download.cta.linux": "Download for Linux", + "home.hero.download": "Download", + "download.cta.chooseMac": "Choose your Mac", + "download.cta.otherVersions": "Other versions", "announcement.v2.link": "See what's new", "announcement.v2.title": "OpenScreen v2 is here", "announcement.productHunt.rank": "#5 Product of the Day", + "recreation.style.kicker": "Style", + "recreation.style.title": "Swap the background", + "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.", + "recreation.effects.kicker": "Effects", + "recreation.effects.title": "Frame it your way", + "recreation.effects.sub": "Padding, motion blur, shadow, roundness — every effect composites live.", + "recreation.cursor.kicker": "Cursor", + "recreation.cursor.title": "A cursor worth watching", + "recreation.cursor.sub": "Size, smoothing, motion blur, click bounce — every move reads on screen.", + "recreation.timeline.kicker": "Timeline", + "recreation.timeline.title": "One click, every zoom placed", + "recreation.timeline.sub": "Zooms, speed ramps, trims, comments — each edit lands as a pill on the timeline.", + "recreation.transcript.kicker": "Transcript", + "recreation.transcript.title": "Edit video like text", + "recreation.transcript.sub": "Delete a word or a silence; the cut lands on the timeline. Nothing destructive.", + "recreation.pause": "Pause animation", + "recreation.play": "Play animation", + "home.hero.explore": "Scroll to explore the editor", "showcase.record.kicker": "record", "showcase.record.claim": "It records with the operating system, not around it.", "showcase.record.body": "Pick a window or a display. macOS goes through ScreenCaptureKit, Windows through Windows Graphics Capture, Linux through PipeWire and the ScreenCast portal — on each, the capture path the system itself provides. The pointer is recorded as data rather than burned into the pixels, which is the only reason you could restyle it further up this page.", @@ -195,30 +222,6 @@ "showcase.agent.link.docs": "AI editing docs", "showcase.agent.link.feature": "How automatic zooms work", "showcase.title": "Recorder, captions, agent, encoder.", - "download.cta.mac": "Download for Mac", - "download.cta.windows": "Download for Windows", - "download.cta.linux": "Download for Linux", - "home.hero.download": "Download", - "download.cta.chooseMac": "Choose your Mac", - "download.cta.otherVersions": "Other versions", - "recreation.style.kicker": "Style", - "recreation.style.title": "Swap the background", - "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.", - "recreation.effects.kicker": "Effects", - "recreation.effects.title": "Frame it your way", - "recreation.effects.sub": "Padding, motion blur, shadow, roundness — every effect composites live.", - "recreation.cursor.kicker": "Cursor", - "recreation.cursor.title": "A cursor worth watching", - "recreation.cursor.sub": "Size, smoothing, motion blur, click bounce — every move reads on screen.", - "recreation.timeline.kicker": "Timeline", - "recreation.timeline.title": "One click, every zoom placed", - "recreation.timeline.sub": "Zooms, speed ramps, trims, comments — each edit lands as a pill on the timeline.", - "recreation.transcript.kicker": "Transcript", - "recreation.transcript.title": "Edit video like text", - "recreation.transcript.sub": "Delete a word or a silence; the cut lands on the timeline. Nothing destructive.", - "recreation.pause": "Pause animation", - "recreation.play": "Play animation", - "home.hero.explore": "Scroll to explore the editor", "footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.", "footer.product.title": "Product", "footer.product.download": "Download", diff --git a/website/i18n/de/code.json b/website/i18n/de/code.json index e600725e9..b31aaa67e 100644 --- a/website/i18n/de/code.json +++ b/website/i18n/de/code.json @@ -1119,5 +1119,14 @@ }, "footer.community.privacy": { "message": "Datenschutz" + }, + "home.hero.agentBadge.copied": { + "message": "Füge ihn jetzt in Claude Code ein" + }, + "home.hero.agentBadge": { + "message": "Erstelle eine Demo mit Claude Code" + }, + "home.hero.agentBadge.copy": { + "message": "Prompt kopieren" } } diff --git a/website/i18n/es/code.json b/website/i18n/es/code.json index 7303e4dde..a43f782bd 100644 --- a/website/i18n/es/code.json +++ b/website/i18n/es/code.json @@ -1119,5 +1119,14 @@ }, "footer.community.privacy": { "message": "Privacidad" + }, + "home.hero.agentBadge.copied": { + "message": "Ahora pégalo en Claude Code" + }, + "home.hero.agentBadge": { + "message": "Haz una demo con Claude Code" + }, + "home.hero.agentBadge.copy": { + "message": "Copiar el prompt" } } diff --git a/website/i18n/fr/code.json b/website/i18n/fr/code.json index eed10c2a9..d0f8c7672 100644 --- a/website/i18n/fr/code.json +++ b/website/i18n/fr/code.json @@ -1119,5 +1119,14 @@ }, "footer.community.privacy": { "message": "Confidentialité" + }, + "home.hero.agentBadge.copied": { + "message": "Collez-le maintenant dans Claude Code" + }, + "home.hero.agentBadge": { + "message": "Créez une démo avec Claude Code" + }, + "home.hero.agentBadge.copy": { + "message": "Copier le prompt" } } diff --git a/website/i18n/ja/code.json b/website/i18n/ja/code.json index df9b32b05..0851e2041 100644 --- a/website/i18n/ja/code.json +++ b/website/i18n/ja/code.json @@ -1119,5 +1119,14 @@ }, "footer.community.privacy": { "message": "プライバシー" + }, + "home.hero.agentBadge.copied": { + "message": "Claude Code に貼り付けてください" + }, + "home.hero.agentBadge": { + "message": "Claude Code でデモを作成" + }, + "home.hero.agentBadge.copy": { + "message": "プロンプトをコピー" } } diff --git a/website/i18n/pt-BR/code.json b/website/i18n/pt-BR/code.json index 93f34a338..d1244c0e0 100644 --- a/website/i18n/pt-BR/code.json +++ b/website/i18n/pt-BR/code.json @@ -1119,5 +1119,14 @@ }, "footer.community.privacy": { "message": "Privacidade" + }, + "home.hero.agentBadge.copied": { + "message": "Agora cole no Claude Code" + }, + "home.hero.agentBadge": { + "message": "Faça uma demo com o Claude Code" + }, + "home.hero.agentBadge.copy": { + "message": "Copiar o prompt" } } diff --git a/website/i18n/zh-CN/code.json b/website/i18n/zh-CN/code.json index e584feb83..c84557f93 100644 --- a/website/i18n/zh-CN/code.json +++ b/website/i18n/zh-CN/code.json @@ -1119,5 +1119,14 @@ }, "footer.community.privacy": { "message": "隐私政策" + }, + "home.hero.agentBadge.copied": { + "message": "现在粘贴到 Claude Code 中" + }, + "home.hero.agentBadge": { + "message": "用 Claude Code 制作演示" + }, + "home.hero.agentBadge.copy": { + "message": "复制提示词" } } diff --git a/website/i18n/zh-TW/code.json b/website/i18n/zh-TW/code.json index 94b9c8da0..68cf5d884 100644 --- a/website/i18n/zh-TW/code.json +++ b/website/i18n/zh-TW/code.json @@ -1119,5 +1119,14 @@ }, "footer.community.privacy": { "message": "隱私權政策" + }, + "home.hero.agentBadge.copied": { + "message": "現在貼到 Claude Code 中" + }, + "home.hero.agentBadge": { + "message": "用 Claude Code 製作示範" + }, + "home.hero.agentBadge.copy": { + "message": "複製提示詞" } } diff --git a/website/src/components/PlatformDownload/styles.module.css b/website/src/components/PlatformDownload/styles.module.css index 947b43b42..0caa1d074 100644 --- a/website/src/components/PlatformDownload/styles.module.css +++ b/website/src/components/PlatformDownload/styles.module.css @@ -31,7 +31,10 @@ cursor: pointer; } +/* Fills the group when a layout stretches it (the hero sizes it to the badge beside it). */ .main { + flex: 1; + justify-content: center; min-width: 0; } diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 90fc55279..0ea2bcca4 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -64,12 +64,13 @@ color: var(--os-fg-2); } +/* The download and the demo badge share one size: equal columns as wide as the wider one, + centred by .heroCopy's text-align. */ .actions { - display: flex; + display: inline-grid; + grid-auto-flow: column; + grid-auto-columns: 1fr; gap: 12px; - flex-wrap: wrap; - justify-content: center; - align-items: center; margin: 32px 0 0; } @@ -165,6 +166,52 @@ user-select: all; } +/* The demo prompt beside the download: the download button's size, a quiet surface instead of + its accent, and a copy chip that says what a click does. */ +.agentBadge { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 0.5rem 0.5rem 0.5rem 0.95rem; + border-radius: 9px; + border: 1px solid var(--os-border); + background: var(--os-surface-1); + box-shadow: var(--os-elev-card); + font: inherit; + font-size: 0.95rem; + font-weight: 600; + color: var(--os-fg-emphasis); + text-align: left; + text-wrap: balance; + cursor: pointer; + justify-content: center; + transition: transform 0.15s ease, border-color 0.15s ease; +} + +.agentBadge:hover { + transform: translateY(-2px); + border-color: var(--os-accent); +} + +.agentBadgeIcon { + flex: none; + color: var(--os-accent); +} + +.agentBadgeChip { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 5px 10px; + border-radius: 6px; + background: var(--os-accent-wash); + font-family: var(--ifm-font-family-monospace); + font-size: 12px; + font-weight: 600; + color: var(--os-accent); + white-space: nowrap; +} + .copyButton { display: inline-flex; align-items: center; @@ -439,11 +486,30 @@ margin-bottom: 24px; } + /* Stacked, both full width and the same height. */ .actions { + display: grid; + grid-auto-flow: row; + grid-auto-rows: 1fr; gap: 8px; margin-top: 24px; } + /* The terminal icon and the chip's words give their room to the label, so it holds on one + line and the badge keeps the download button's height. */ + .agentBadge { + gap: 8px; + } + + .agentBadgeIcon, + .agentBadgeChipText { + display: none; + } + + .agentBadgeChip { + padding: 7px; + } + .features { padding: 96px 20px 0; } @@ -483,7 +549,8 @@ @media (prefers-reduced-motion: reduce) { - .primaryCta { + .primaryCta, + .agentBadge { transition: none; } } diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 3bcb442c2..d403138bb 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -21,26 +21,29 @@ import styles from "./index.module.css"; const AGENT_PROMPT = "Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to add a video of this change to the PR."; -function CopyButton({ text }: { text: string }) { +// The hero's line, word for word the one at the top of the README and in the AI editing docs. +const DEMO_PROMPT = + "Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature."; + +function useCopy(text: string, onDenied?: () => void) { const [copied, setCopied] = useState(false); + const copy = () => + navigator.clipboard?.writeText(text).then( + () => { + setCopied(true); + setTimeout(() => setCopied(false), 1500); + }, + // No clipboard (an insecure context) or a denied one (an embedded browser, a policy). + () => onDenied?.(), + ) ?? onDenied?.(); + return [copied, copy] as const; +} + +function CopyButton({ text }: { text: string }) { + // The prompt selects itself in one click (.agentPrompt pre), so the reader copies by hand. + const [copied, copy] = useCopy(text); return ( - + ); +} + export default function Home() { const { siteConfig } = useDocusaurusContext(); const languages = (siteConfig.customFields?.appLanguages ?? []) as AppLanguage[]; @@ -99,6 +132,7 @@ export default function Home() {

+

From bd9fa3a38f583a5d8e576f09cf363904d01d3502 Mon Sep 17 00:00:00 2001 From: EtienneLescot Date: Sun, 18 Oct 2026 23:34:01 +0200 Subject: [PATCH 2/5] docs: make the demo prompt work in any coding agent Swap `-a claude-code` for `-y`: without an agent flag, `npx skills add` installs the skill for Codex, Cursor, Gemini CLI and the other agents it knows, and links it for Claude Code, without asking anything. The copy around the prompt names Claude Code, Codex and Cursor as examples. --- README.md | 10 +- website/docs/ai-editing.md | 4 +- website/i18n/code.source.json | 106 +++++++++--------- website/i18n/de/code.json | 6 +- .../current/ai-editing.md | 4 +- website/i18n/es/code.json | 6 +- .../current/ai-editing.md | 4 +- website/i18n/fr/code.json | 6 +- .../current/ai-editing.md | 4 +- website/i18n/ja/code.json | 6 +- .../current/ai-editing.md | 4 +- website/i18n/pt-BR/code.json | 6 +- .../current/ai-editing.md | 4 +- website/i18n/zh-CN/code.json | 6 +- .../current/ai-editing.md | 4 +- website/i18n/zh-TW/code.json | 6 +- .../current/ai-editing.md | 4 +- website/src/pages/index.tsx | 15 ++- 18 files changed, 104 insertions(+), 101 deletions(-) diff --git a/README.md b/README.md index 746553785..51f1a63a4 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,10 @@ #

OpenScreen

-

Make a demo video with one sentence in Claude Code:

+

Make a demo video with one sentence in your coding agent:

```text -Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature. +Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature. ```

A free, open-source desktop app for recording your screen and turning the result into polished product demos and walkthroughs.

@@ -71,16 +71,16 @@ See the [CLI reference](https://getopenscreen.com/docs/cli/). ### Let your coding agent ship the feature with its video -Paste this into Claude Code: +Paste this into your coding agent (Claude Code, Codex, Cursor…): ```text -Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to add a video of this change to the PR. +Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to add a video of this change to the PR. ``` The skill sets everything up: it installs OpenScreen if it is missing (once you agree), connects its MCP server, then asks you to open a new session and say *"continue the OpenScreen demo"*, the one step an agent cannot do for itself. -By hand, it is these two commands, where `` is the app's executable +By hand, in Claude Code, it is these two commands, where `` is the app's executable on your system ([where to find it](https://getopenscreen.com/docs/cli/#running-the-cli)): ```bash diff --git a/website/docs/ai-editing.md b/website/docs/ai-editing.md index 917348b9b..6286e7567 100644 --- a/website/docs/ai-editing.md +++ b/website/docs/ai-editing.md @@ -80,10 +80,10 @@ An agent can make a whole video on its own, from the recording to the export. Be **Through the server above**, a take is recorded by OpenScreen itself, as with its Record button: the editor closes, the recording bar counts down and records, and the take opens in the editor as a new project, where you watch each edit land. It needs **MCP edits** on, and the recording bar gets your own settings back once the take ends. -**As a stdio server**, it needs no setting at all: the agent starts the app's own executable with `mcp`. The quickest way is to paste this into Claude Code: +**As a stdio server**, it needs no setting at all: the agent starts the app's own executable with `mcp`. The quickest way is to paste this into your coding agent (Claude Code, Codex, Cursor…): ```text -Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature. +Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature. ``` The skill installs OpenScreen if it is missing, once you agree, and adds its MCP server. It then asks you to open a new session and say *continue the OpenScreen demo*: an agent only gets new tools in a new session. To set it up by hand instead: diff --git a/website/i18n/code.source.json b/website/i18n/code.source.json index 3ee4e33ef..fe25721bb 100644 --- a/website/i18n/code.source.json +++ b/website/i18n/code.source.json @@ -41,8 +41,8 @@ "download.preRelease.cta": "Browse all releases", "home.agents.copied": "Copied", "home.agents.copy": "Copy", - "home.hero.agentBadge.copied": "Now paste it into Claude Code", - "home.hero.agentBadge": "Make a demo with Claude Code", + "home.hero.agentBadge.copied": "Now paste it into your coding agent", + "home.hero.agentBadge": "Make a demo with your coding agent", "home.hero.agentBadge.copy": "Copy prompt", "home.meta.title": "Free open-source screen recorder & video editor", "home.meta.description": "Turn screen recordings into polished demos with automatic zooms, styled backgrounds and an editable cursor. Free and open source for Windows, macOS and Linux. No watermark.", @@ -53,7 +53,7 @@ "home.features.platforms.title": "Windows, macOS, Linux", "home.agents.kicker": "For coding agents", "home.agents.title": "Your coding agent ships the feature with its video.", - "home.agents.summary": "OpenScreen's MCP server gives an agent the whole job: it records the app, edits the take with the editor's own tools, exports the MP4 and checks it frame by frame. Paste this into Claude Code and the video of your change lands in the pull request.", + "home.agents.summary": "OpenScreen's MCP server gives an agent the whole job: it records the app, edits the take with the editor's own tools, exports the MP4 and checks it frame by frame. Paste this into your coding agent (Claude Code, Codex, Cursor…) and the video of your change lands in the pull request.", "home.agents.foot": "It installs OpenScreen if it is missing, once you agree. Codex, Cursor and any other MCP client work too: {docs}.", "home.agents.foot.docs": "Set it up by hand", "home.features.kicker": "Also true", @@ -81,6 +81,46 @@ "home.install.note.windows": "Windows", "home.install.note.mac": "Mac", "home.install.note.linux": "Linux", + "demoLoop.pause": "Pause video", + "demoLoop.play": "Play video", + "demoLoop.classic-zoom": "A task board recorded in OpenScreen. The view zooms in on a checklist item and a Ship button as they are clicked, then pulls back to the whole board.", + "demoLoop.3d-camera": "The same recording seen through the 3D camera, which tilts the screen and orbits around it while it follows the cursor.", + "demoLoop.3d-cursors": "One recorded pointer, redrawn in five cursor styles one after another while the recording keeps playing.", + "demoLoop.automatic-subtitles": "A narrated recording with captions under it, switching from English to French, Spanish and Korean.", + "demoLoop.caption-styles": "One caption shown in five styles: a plain caption, a bold yellow one, a handwritten one, a monospaced one, and one showing a single word at a time.", + "demoLoop.edit-by-transcript": "In the editor's transcript, a sentence is selected and deleted, and the matching cut appears on the timeline.", + "demoLoop.tighten-pauses": "Two clicks on the silence markers in the transcript, and both pauses are cut from the timeline.", + "demoLoop.background-picker": "The editor's background picker going through wallpapers, a gradient and a solid color, then turning on the animated Aurora background.", + "demoLoop.every-format": "The same recording exported in 16:9, then square, then vertical, with the framing following the cursor.", + "demoLoop.sensitive-data-mask": "A sign-in form being filled in. The email and password fields stay blurred while they are typed.", + "demoLoop.camera-blur": "A square webcam vignette over a screen recording. The view moves in on it while the room behind the speaker blurs, then pulls back.", + "demoLoop.every-layout": "One recording with a webcam, cycling through the layouts: picture in picture, side by side, stacked, full camera, then screen only.", + "demoLoop.device-frames": "The same playing recording framed in turn as a browser window, a phone, a laptop and a desktop monitor.", + "demoLoop.animated-backgrounds": "A recording on a plain background, then on a blurred photo background that moves slowly behind it.", + "demoLoop.beautiful-by-default": "A raw screen capture, then the same take as OpenScreen opens it, already zoomed, framed and with a restyled cursor, then in several looks.", + "demoLoop.simpler-editor": "The OpenScreen editor. One click on a background thumbnail restyles the whole video, then the side panel switches to the transcript.", + "demoLoop.edit-like-a-doc": "Text selected in the transcript is deleted like text in a document, and the video is cut to match.", + "demoLoop.ask-the-agent": "A request typed into the editor's chat panel, and the edits the agent makes appearing on the timeline.", + "demoLoop.title.classic-zoom": "Automatic zoom on clicks", + "demoLoop.title.3d-camera": "A 3D camera orbiting the screen", + "demoLoop.title.3d-cursors": "Cursor packs, drawn in 3D", + "demoLoop.title.automatic-subtitles": "Captions translated into other languages", + "demoLoop.title.caption-styles": "Five caption styles", + "demoLoop.title.edit-by-transcript": "Cutting video by deleting text in the transcript", + "demoLoop.title.tighten-pauses": "Cutting silences from the transcript", + "demoLoop.title.background-picker": "Changing the background behind a recording", + "demoLoop.title.every-format": "One recording in 16:9, 1:1 and 9:16", + "demoLoop.title.sensitive-data-mask": "Blurring an email address and a password", + "demoLoop.title.camera-blur": "Webcam background blur", + "demoLoop.title.every-layout": "Webcam layouts", + "demoLoop.title.device-frames": "Device frames", + "demoLoop.title.animated-backgrounds": "Animated backgrounds", + "demoLoop.title.beautiful-by-default": "From a raw screen capture to a finished demo", + "demoLoop.title.simpler-editor": "The OpenScreen editor", + "demoLoop.title.edit-like-a-doc": "Editing a video like a document", + "demoLoop.title.ask-the-agent": "Asking the editor's agent for an edit", + "editor.skipLink": "Skip the editor — go to downloads", + "editor.title": "Five things you will actually do", "films.default.kicker": "Out of the box", "films.default.title": "Good-looking from the first take.", "films.default.lead": "Every new recording opens {zoomed}, on a wallpaper, with padding, a shadow and rounded corners. Change any of it, or export it as it is.", @@ -130,55 +170,6 @@ "films.ship.blur": "{t} Smooth or mosaic, as a rectangle, an oval or a freehand shape, over an email, a key or a password.", "films.ship.blur.t": "Blur regions.", "films.label": "More of the app, in motion", - "editor.skipLink": "Skip the editor — go to downloads", - "editor.title": "Five things you will actually do", - "demoLoop.pause": "Pause video", - "demoLoop.play": "Play video", - "demoLoop.classic-zoom": "A task board recorded in OpenScreen. The view zooms in on a checklist item and a Ship button as they are clicked, then pulls back to the whole board.", - "demoLoop.3d-camera": "The same recording seen through the 3D camera, which tilts the screen and orbits around it while it follows the cursor.", - "demoLoop.3d-cursors": "One recorded pointer, redrawn in five cursor styles one after another while the recording keeps playing.", - "demoLoop.automatic-subtitles": "A narrated recording with captions under it, switching from English to French, Spanish and Korean.", - "demoLoop.caption-styles": "One caption shown in five styles: a plain caption, a bold yellow one, a handwritten one, a monospaced one, and one showing a single word at a time.", - "demoLoop.edit-by-transcript": "In the editor's transcript, a sentence is selected and deleted, and the matching cut appears on the timeline.", - "demoLoop.tighten-pauses": "Two clicks on the silence markers in the transcript, and both pauses are cut from the timeline.", - "demoLoop.background-picker": "The editor's background picker going through wallpapers, a gradient and a solid color, then turning on the animated Aurora background.", - "demoLoop.every-format": "The same recording exported in 16:9, then square, then vertical, with the framing following the cursor.", - "demoLoop.sensitive-data-mask": "A sign-in form being filled in. The email and password fields stay blurred while they are typed.", - "demoLoop.camera-blur": "A square webcam vignette over a screen recording. The view moves in on it while the room behind the speaker blurs, then pulls back.", - "demoLoop.every-layout": "One recording with a webcam, cycling through the layouts: picture in picture, side by side, stacked, full camera, then screen only.", - "demoLoop.device-frames": "The same playing recording framed in turn as a browser window, a phone, a laptop and a desktop monitor.", - "demoLoop.animated-backgrounds": "A recording on a plain background, then on a blurred photo background that moves slowly behind it.", - "demoLoop.beautiful-by-default": "A raw screen capture, then the same take as OpenScreen opens it, already zoomed, framed and with a restyled cursor, then in several looks.", - "demoLoop.simpler-editor": "The OpenScreen editor. One click on a background thumbnail restyles the whole video, then the side panel switches to the transcript.", - "demoLoop.edit-like-a-doc": "Text selected in the transcript is deleted like text in a document, and the video is cut to match.", - "demoLoop.ask-the-agent": "A request typed into the editor's chat panel, and the edits the agent makes appearing on the timeline.", - "demoLoop.title.classic-zoom": "Automatic zoom on clicks", - "demoLoop.title.3d-camera": "A 3D camera orbiting the screen", - "demoLoop.title.3d-cursors": "Cursor packs, drawn in 3D", - "demoLoop.title.automatic-subtitles": "Captions translated into other languages", - "demoLoop.title.caption-styles": "Five caption styles", - "demoLoop.title.edit-by-transcript": "Cutting video by deleting text in the transcript", - "demoLoop.title.tighten-pauses": "Cutting silences from the transcript", - "demoLoop.title.background-picker": "Changing the background behind a recording", - "demoLoop.title.every-format": "One recording in 16:9, 1:1 and 9:16", - "demoLoop.title.sensitive-data-mask": "Blurring an email address and a password", - "demoLoop.title.camera-blur": "Webcam background blur", - "demoLoop.title.every-layout": "Webcam layouts", - "demoLoop.title.device-frames": "Device frames", - "demoLoop.title.animated-backgrounds": "Animated backgrounds", - "demoLoop.title.beautiful-by-default": "From a raw screen capture to a finished demo", - "demoLoop.title.simpler-editor": "The OpenScreen editor", - "demoLoop.title.edit-like-a-doc": "Editing a video like a document", - "demoLoop.title.ask-the-agent": "Asking the editor's agent for an edit", - "download.cta.mac": "Download for Mac", - "download.cta.windows": "Download for Windows", - "download.cta.linux": "Download for Linux", - "home.hero.download": "Download", - "download.cta.chooseMac": "Choose your Mac", - "download.cta.otherVersions": "Other versions", - "announcement.v2.link": "See what's new", - "announcement.v2.title": "OpenScreen v2 is here", - "announcement.productHunt.rank": "#5 Product of the Day", "recreation.style.kicker": "Style", "recreation.style.title": "Swap the background", "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.", @@ -222,6 +213,9 @@ "showcase.agent.link.docs": "AI editing docs", "showcase.agent.link.feature": "How automatic zooms work", "showcase.title": "Recorder, captions, agent, encoder.", + "announcement.v2.link": "See what's new", + "announcement.v2.title": "OpenScreen v2 is here", + "announcement.productHunt.rank": "#5 Product of the Day", "footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.", "footer.product.title": "Product", "footer.product.download": "Download", @@ -247,5 +241,11 @@ "footer.community.privacy": "Privacy", "footer.bottom.license": "OpenScreen is released under the MIT license. Built by the community — free, forever.", "footer.bottom.lineage": "The official spin-off of the {originalProject} — 39k stars, now archived.", - "footer.bottom.lineage.originalProject": "original OpenScreen project" + "footer.bottom.lineage.originalProject": "original OpenScreen project", + "download.cta.mac": "Download for Mac", + "download.cta.windows": "Download for Windows", + "download.cta.linux": "Download for Linux", + "home.hero.download": "Download", + "download.cta.chooseMac": "Choose your Mac", + "download.cta.otherVersions": "Other versions" } diff --git a/website/i18n/de/code.json b/website/i18n/de/code.json index b31aaa67e..bee78aff9 100644 --- a/website/i18n/de/code.json +++ b/website/i18n/de/code.json @@ -1108,7 +1108,7 @@ "message": "Dein Coding-Agent liefert das Feature mit seinem Video." }, "home.agents.summary": { - "message": "Der MCP-Server von OpenScreen gibt einem Agenten die ganze Arbeit: Er nimmt die App auf, schneidet den Take mit den Werkzeugen des Editors, exportiert das MP4 und prüft es Bild für Bild. Füge das in Claude Code ein, und das Video deiner Änderung landet im Pull Request." + "message": "Der MCP-Server von OpenScreen gibt einem Agenten die ganze Arbeit: Er nimmt die App auf, schneidet den Take mit den Werkzeugen des Editors, exportiert das MP4 und prüft es Bild für Bild. Füge das in deinen Coding-Agenten ein (Claude Code, Codex, Cursor …), und das Video deiner Änderung landet im Pull Request." }, "home.agents.foot": { "message": "Er installiert OpenScreen, falls es fehlt, sobald du zustimmst. Codex, Cursor und jeder andere MCP-Client funktionieren auch: {docs}.", @@ -1121,10 +1121,10 @@ "message": "Datenschutz" }, "home.hero.agentBadge.copied": { - "message": "Füge ihn jetzt in Claude Code ein" + "message": "Füge ihn jetzt in deinen Coding-Agenten ein" }, "home.hero.agentBadge": { - "message": "Erstelle eine Demo mit Claude Code" + "message": "Erstelle eine Demo mit deinem Coding-Agenten" }, "home.hero.agentBadge.copy": { "message": "Prompt kopieren" diff --git a/website/i18n/de/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/de/docusaurus-plugin-content-docs/current/ai-editing.md index 6a6c4d6cc..88980327a 100644 --- a/website/i18n/de/docusaurus-plugin-content-docs/current/ai-editing.md +++ b/website/i18n/de/docusaurus-plugin-content-docs/current/ai-editing.md @@ -82,10 +82,10 @@ Ein Agent kann ein ganzes Video selbstständig erstellen, von der Aufnahme bis z **Als stdio-Server** braucht es gar keine Einstellung: Der Agent startet die eigene ausführbare Datei der App mit `mcp`. -Am schnellsten fügst du Folgendes in Claude Code ein: +Am schnellsten fügst du Folgendes in deinen Coding-Agenten ein (Claude Code, Codex, Cursor …): ```text -Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature. +Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature. ``` Der Skill installiert OpenScreen, falls es fehlt, sobald du zustimmst, und fügt seinen MCP-Server hinzu. Danach bittet er dich, eine neue Sitzung zu öffnen und *continue the OpenScreen demo* zu sagen: Ein Agent bekommt neue Werkzeuge nur in einer neuen Sitzung. So richtest du es stattdessen von Hand ein: diff --git a/website/i18n/es/code.json b/website/i18n/es/code.json index a43f782bd..8af7a1b3e 100644 --- a/website/i18n/es/code.json +++ b/website/i18n/es/code.json @@ -1108,7 +1108,7 @@ "message": "Tu agente de programación entrega la función con su video." }, "home.agents.summary": { - "message": "El servidor MCP de OpenScreen le da a un agente todo el trabajo: graba la app, edita la toma con las herramientas del editor, exporta el MP4 y lo revisa fotograma a fotograma. Pega esto en Claude Code y el video de tu cambio llega a la pull request." + "message": "El servidor MCP de OpenScreen le da a un agente todo el trabajo: graba la app, edita la toma con las herramientas del editor, exporta el MP4 y lo revisa fotograma a fotograma. Pega esto en tu agente de programación (Claude Code, Codex, Cursor…) y el video de tu cambio llega a la pull request." }, "home.agents.foot": { "message": "Instala OpenScreen si falta, una vez que aceptas. Codex, Cursor y cualquier otro cliente MCP también funcionan: {docs}.", @@ -1121,10 +1121,10 @@ "message": "Privacidad" }, "home.hero.agentBadge.copied": { - "message": "Ahora pégalo en Claude Code" + "message": "Ahora pégalo en tu agente de programación" }, "home.hero.agentBadge": { - "message": "Haz una demo con Claude Code" + "message": "Haz una demo con tu agente de programación" }, "home.hero.agentBadge.copy": { "message": "Copiar el prompt" diff --git a/website/i18n/es/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/es/docusaurus-plugin-content-docs/current/ai-editing.md index 92357295b..b91c9f8dc 100644 --- a/website/i18n/es/docusaurus-plugin-content-docs/current/ai-editing.md +++ b/website/i18n/es/docusaurus-plugin-content-docs/current/ai-editing.md @@ -82,10 +82,10 @@ Un agente puede hacer un video completo por sí solo, desde la grabación hasta **Como servidor stdio**, no necesita ningún ajuste: el agente inicia el propio ejecutable de la app con `mcp`. -La forma más rápida es pegar esto en Claude Code: +La forma más rápida es pegar esto en tu agente de programación (Claude Code, Codex, Cursor…): ```text -Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature. +Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature. ``` El skill instala OpenScreen si falta, una vez que aceptes, y agrega su servidor MCP. Luego te pide que abras una nueva sesión y digas *continue the OpenScreen demo*: un agente solo obtiene herramientas nuevas en una nueva sesión. Para configurarlo a mano en cambio: diff --git a/website/i18n/fr/code.json b/website/i18n/fr/code.json index d0f8c7672..1165ea00f 100644 --- a/website/i18n/fr/code.json +++ b/website/i18n/fr/code.json @@ -1108,7 +1108,7 @@ "message": "Votre agent de code livre la fonctionnalité avec sa vidéo." }, "home.agents.summary": { - "message": "Le serveur MCP d'OpenScreen confie tout le travail à un agent : il enregistre l'application, monte la prise avec les outils de l'éditeur, exporte le MP4 et le vérifie image par image. Collez ceci dans Claude Code, et la vidéo de votre modification arrive dans la pull request." + "message": "Le serveur MCP d'OpenScreen confie tout le travail à un agent : il enregistre l'application, monte la prise avec les outils de l'éditeur, exporte le MP4 et le vérifie image par image. Collez ceci dans votre agent de code (Claude Code, Codex, Cursor…), et la vidéo de votre modification arrive dans la pull request." }, "home.agents.foot": { "message": "Il installe OpenScreen s'il manque, une fois que vous avez accepté. Codex, Cursor et tout autre client MCP fonctionnent aussi : {docs}.", @@ -1121,10 +1121,10 @@ "message": "Confidentialité" }, "home.hero.agentBadge.copied": { - "message": "Collez-le maintenant dans Claude Code" + "message": "Collez-le maintenant dans votre agent de code" }, "home.hero.agentBadge": { - "message": "Créez une démo avec Claude Code" + "message": "Créez une démo avec votre agent de code" }, "home.hero.agentBadge.copy": { "message": "Copier le prompt" diff --git a/website/i18n/fr/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/fr/docusaurus-plugin-content-docs/current/ai-editing.md index 58d32c2c3..3f3d6737f 100644 --- a/website/i18n/fr/docusaurus-plugin-content-docs/current/ai-editing.md +++ b/website/i18n/fr/docusaurus-plugin-content-docs/current/ai-editing.md @@ -82,10 +82,10 @@ Un agent peut faire une vidéo entière tout seul, de l'enregistrement à l'expo **Comme serveur stdio**, aucun réglage n'est nécessaire : l'agent lance l'exécutable même de l'application avec `mcp`. -Le plus rapide est de coller ceci dans Claude Code : +Le plus rapide est de coller ceci dans votre agent de code (Claude Code, Codex, Cursor…) : ```text -Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature. +Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature. ``` La skill installe OpenScreen s'il manque, une fois que vous avez accepté, et ajoute son serveur MCP. Elle vous demande ensuite d'ouvrir une nouvelle session et de dire *continue the OpenScreen demo* : un agent n'obtient de nouveaux outils que dans une nouvelle session. Pour tout configurer à la main à la place : diff --git a/website/i18n/ja/code.json b/website/i18n/ja/code.json index 0851e2041..19dbf22a2 100644 --- a/website/i18n/ja/code.json +++ b/website/i18n/ja/code.json @@ -1108,7 +1108,7 @@ "message": "コーディングエージェントが、機能と一緒にその動画も届けます。" }, "home.agents.summary": { - "message": "OpenScreen の MCP サーバーを使えば、エージェントがすべてを担います。アプリを録画し、エディターと同じツールでテイクを編集し、MP4 をエクスポートして、1 フレームずつ確認します。これを Claude Code に貼り付ければ、変更の動画がプルリクエストに届きます。" + "message": "OpenScreen の MCP サーバーを使えば、エージェントがすべてを担います。アプリを録画し、エディターと同じツールでテイクを編集し、MP4 をエクスポートして、1 フレームずつ確認します。これをコーディングエージェント（Claude Code、Codex、Cursor など）に貼り付ければ、変更の動画がプルリクエストに届きます。" }, "home.agents.foot": { "message": "OpenScreen がなければ、あなたの同意を得てからインストールします。Codex、Cursor など、ほかの MCP クライアントでも使えます：{docs}。", @@ -1121,10 +1121,10 @@ "message": "プライバシー" }, "home.hero.agentBadge.copied": { - "message": "Claude Code に貼り付けてください" + "message": "コーディングエージェントに貼り付けてください" }, "home.hero.agentBadge": { - "message": "Claude Code でデモを作成" + "message": "コーディングエージェントでデモを作成" }, "home.hero.agentBadge.copy": { "message": "プロンプトをコピー" diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/ja/docusaurus-plugin-content-docs/current/ai-editing.md index bcd2dc82f..5578c721e 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/current/ai-editing.md +++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/ai-editing.md @@ -82,10 +82,10 @@ Claude Code や Codex などの AI コーディングエージェントをすで **stdio サーバーとして追加する場合**、設定は一切不要です。エージェントは、アプリ自身の実行ファイルを `mcp` 付きで起動します。 -いちばん手早いのは、次の内容を Claude Code に貼り付けることです。 +いちばん手早いのは、次の内容をコーディングエージェント（Claude Code、Codex、Cursor など）に貼り付けることです。 ```text -Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature. +Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature. ``` このスキルは、OpenScreen がなければ、同意を得たうえでインストールし、その MCP サーバーを追加します。続いて、新しいセッションを開いて *continue the OpenScreen demo* と伝えるよう求めます。エージェントが新しいツールを得られるのは、新しいセッションの中だけです。代わりに手動で設定するには、次のようにします。 diff --git a/website/i18n/pt-BR/code.json b/website/i18n/pt-BR/code.json index d1244c0e0..225a43bc9 100644 --- a/website/i18n/pt-BR/code.json +++ b/website/i18n/pt-BR/code.json @@ -1108,7 +1108,7 @@ "message": "Seu agente de programação entrega o recurso com o vídeo dele." }, "home.agents.summary": { - "message": "O servidor MCP do OpenScreen dá a um agente o trabalho inteiro: ele grava o app, edita a tomada com as ferramentas do próprio editor, exporta o MP4 e confere quadro a quadro. Cole isto no Claude Code e o vídeo da sua mudança chega ao pull request." + "message": "O servidor MCP do OpenScreen dá a um agente o trabalho inteiro: ele grava o app, edita a tomada com as ferramentas do próprio editor, exporta o MP4 e confere quadro a quadro. Cole isto no seu agente de programação (Claude Code, Codex, Cursor…) e o vídeo da sua mudança chega ao pull request." }, "home.agents.foot": { "message": "Ele instala o OpenScreen se estiver faltando, depois que você concordar. Codex, Cursor e qualquer outro cliente MCP também funcionam: {docs}.", @@ -1121,10 +1121,10 @@ "message": "Privacidade" }, "home.hero.agentBadge.copied": { - "message": "Agora cole no Claude Code" + "message": "Agora cole no seu agente de programação" }, "home.hero.agentBadge": { - "message": "Faça uma demo com o Claude Code" + "message": "Faça uma demo com seu agente de programação" }, "home.hero.agentBadge.copy": { "message": "Copiar o prompt" diff --git a/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/ai-editing.md index 12d4c2f3e..636de8b49 100644 --- a/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/ai-editing.md +++ b/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/ai-editing.md @@ -82,10 +82,10 @@ Um agente pode fazer um vídeo inteiro sozinho, da gravação à exportação. A **Como servidor stdio**, não é preciso nenhuma configuração: o agente inicia o próprio executável do app com `mcp`. -O jeito mais rápido é colar isto no Claude Code: +O jeito mais rápido é colar isto no seu agente de programação (Claude Code, Codex, Cursor…): ```text -Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature. +Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature. ``` A skill instala o OpenScreen se ele estiver faltando, depois que você concordar, e adiciona o servidor MCP dele. Em seguida, ela pede que você abra uma nova sessão e diga *continue the OpenScreen demo*: um agente só recebe ferramentas novas em uma nova sessão. Para configurar à mão, em vez disso: diff --git a/website/i18n/zh-CN/code.json b/website/i18n/zh-CN/code.json index c84557f93..b35452405 100644 --- a/website/i18n/zh-CN/code.json +++ b/website/i18n/zh-CN/code.json @@ -1108,7 +1108,7 @@ "message": "你的编程 AI 代理交付功能时，连视频一起交付。" }, "home.agents.summary": { - "message": "OpenScreen 的 MCP 服务器把整件事交给 AI 代理：录制应用、用编辑器自己的工具剪辑录制内容、导出 MP4，并逐帧检查。把这段话粘贴到 Claude Code 中，你这次改动的视频就会出现在拉取请求里。" + "message": "OpenScreen 的 MCP 服务器把整件事交给 AI 代理：录制应用、用编辑器自己的工具剪辑录制内容、导出 MP4，并逐帧检查。把这段话粘贴到你的编程 AI 代理（Claude Code、Codex、Cursor 等）中，你这次改动的视频就会出现在拉取请求里。" }, "home.agents.foot": { "message": "如果尚未安装 OpenScreen，它会在你同意后安装。Codex、Cursor 和其他任何 MCP 客户端也可以使用：{docs}。", @@ -1121,10 +1121,10 @@ "message": "隐私政策" }, "home.hero.agentBadge.copied": { - "message": "现在粘贴到 Claude Code 中" + "message": "现在粘贴到你的编程 AI 代理中" }, "home.hero.agentBadge": { - "message": "用 Claude Code 制作演示" + "message": "用你的编程 AI 代理制作演示" }, "home.hero.agentBadge.copy": { "message": "复制提示词" diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/ai-editing.md index 0a401b412..84e86374f 100644 --- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/ai-editing.md +++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/ai-editing.md @@ -82,10 +82,10 @@ AI 代理可以从录制到导出独立完成一整段视频。无论以哪种 **作为 stdio 服务器**，则无需任何设置：AI 代理会用 `mcp` 启动应用自身的可执行文件。 -最快的方式是把下面这段内容粘贴到 Claude Code 中： +最快的方式是把下面这段内容粘贴到你的编程 AI 代理（Claude Code、Codex、Cursor 等）中： ```text -Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature. +Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature. ``` 如果缺少 OpenScreen，该技能会在你同意后安装它，并添加它的 MCP 服务器。随后它会请你打开一个新会话，并说出 *continue the OpenScreen demo*：AI 代理只有在新会话中才能获得新工具。若要改为手动设置： diff --git a/website/i18n/zh-TW/code.json b/website/i18n/zh-TW/code.json index 68cf5d884..1ff143d08 100644 --- a/website/i18n/zh-TW/code.json +++ b/website/i18n/zh-TW/code.json @@ -1108,7 +1108,7 @@ "message": "你的程式設計代理交付功能時，連影片一起交付。" }, "home.agents.summary": { - "message": "OpenScreen 的 MCP 伺服器把整件工作交給代理：錄製應用程式、用編輯器本身的工具剪輯錄影、匯出 MP4，並逐格檢查。把這段話貼到 Claude Code，你這次變更的影片就會出現在拉取請求中。" + "message": "OpenScreen 的 MCP 伺服器把整件工作交給代理：錄製應用程式、用編輯器本身的工具剪輯錄影、匯出 MP4，並逐格檢查。把這段話貼到你的程式設計代理（Claude Code、Codex、Cursor 等），你這次變更的影片就會出現在拉取請求中。" }, "home.agents.foot": { "message": "如果尚未安裝 OpenScreen，它會在你同意後安裝。Codex、Cursor 和其他任何 MCP 用戶端也都能使用：{docs}。", @@ -1121,10 +1121,10 @@ "message": "隱私權政策" }, "home.hero.agentBadge.copied": { - "message": "現在貼到 Claude Code 中" + "message": "現在貼到你的程式設計代理中" }, "home.hero.agentBadge": { - "message": "用 Claude Code 製作示範" + "message": "用你的程式設計代理製作示範" }, "home.hero.agentBadge.copy": { "message": "複製提示詞" diff --git a/website/i18n/zh-TW/docusaurus-plugin-content-docs/current/ai-editing.md b/website/i18n/zh-TW/docusaurus-plugin-content-docs/current/ai-editing.md index c55b5bbc1..1fdf5a4d3 100644 --- a/website/i18n/zh-TW/docusaurus-plugin-content-docs/current/ai-editing.md +++ b/website/i18n/zh-TW/docusaurus-plugin-content-docs/current/ai-editing.md @@ -82,10 +82,10 @@ ChatGPT 與 GitHub Copilot 的登入選項已**在 1.8.0 中移除**。它們的 **以 stdio 伺服器的形式加入時**，完全不需要設定：代理會以 `mcp` 啟動應用程式本身的執行檔。 -最快的方式是將下面這段內容貼到 Claude Code 中： +最快的方式是將下面這段內容貼到你的程式設計代理（Claude Code、Codex、Cursor 等）中： ```text -Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature. +Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature. ``` 如果缺少 OpenScreen，該技能會在你同意後安裝它，並加入它的 MCP 伺服器。接著它會請你開啟一個新的工作階段，並說出 *continue the OpenScreen demo*：代理只有在新的工作階段中才能取得新工具。若要改為手動設定： diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index d403138bb..b7738c125 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -19,11 +19,11 @@ import { jsonLd, softwareApplicationLd } from "../lib/structured-data"; import styles from "./index.module.css"; const AGENT_PROMPT = - "Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to add a video of this change to the PR."; + "Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to add a video of this change to the PR."; // The hero's line, word for word the one at the top of the README and in the AI editing docs. const DEMO_PROMPT = - "Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to make a demo video of this feature."; + "Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature."; function useCopy(text: string, onDenied?: () => void) { const [copied, setCopied] = useState(false); @@ -67,9 +67,11 @@ function AgentBadge() { {copied ? ( - Now paste it into Claude Code + + Now paste it into your coding agent + ) : ( - Make a demo with Claude Code + Make a demo with your coding agent )} @@ -169,14 +171,15 @@ export default function Home() { OpenScreen's MCP server gives an agent the whole job: it records the app, edits the take with the editor's own tools, exports the MP4 and checks it frame by frame. Paste - this into Claude Code and the video of your change lands in the pull request. + this into your coding agent (Claude Code, Codex, Cursor…) and the video of your change + lands in the pull request.

- Claude Code + Claude Code, Codex, Cursor…
{/* The prompt stays in English in every locale: it is what the reader pastes, and From f1021023421dfb55a35d9625a9279816c2483cdb Mon Sep 17 00:00:00 2001 From: EtienneLescot Date: Sun, 18 Oct 2026 23:38:03 +0200 Subject: [PATCH 3/5] docs: keep the badge's paste instruction on screen for 4 s --- website/src/pages/index.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index b7738c125..cd2f83586 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -25,13 +25,13 @@ const AGENT_PROMPT = const DEMO_PROMPT = "Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -y`, then follow it to make a demo video of this feature."; -function useCopy(text: string, onDenied?: () => void) { +function useCopy(text: string, onDenied?: () => void, shownMs = 1500) { const [copied, setCopied] = useState(false); const copy = () => navigator.clipboard?.writeText(text).then( () => { setCopied(true); - setTimeout(() => setCopied(false), 1500); + setTimeout(() => setCopied(false), shownMs); }, // No clipboard (an insecure context) or a denied one (an embedded browser, a policy). () => onDenied?.(), @@ -59,9 +59,14 @@ function CopyButton({ text }: { text: string }) { // Beside the download button: one click copies the demo prompt, and the label says where it goes. function AgentBadge() { // Without a clipboard, the agent section below has the same kind of prompt to select by hand. - const [copied, copy] = useCopy(DEMO_PROMPT, () => { - window.location.hash = "coding-agents"; - }); + // Long enough to read the instruction that replaces the label. + const [copied, copy] = useCopy( + DEMO_PROMPT, + () => { + window.location.hash = "coding-agents"; + }, + 4000, + ); return (