Motion Skills
← Skills
付費開發者

程式碼展示

帶語法高亮的程式碼打字、重點行高亮和終端執行。

貼上到 Claude Code、Codex、Cursor 或任何支援 Skills 的 Agent 中。

需要: Node.js 22+、FFmpeg、Chrome。不需要 API Key。

其他配色和畫面比例

程式碼展示 · 紙白 · 9:16
配色: 紙白 · 9:16
程式碼展示 · 黑白 · 1:1
配色: 黑白 · 1:1

同一個範本換了配色和畫面比例後渲染出的結尾畫面。

5 套配色

  • 墨黑
    ink
  • 紙白
    paper
  • 電光 · 預設
    electric
  • 黑白
    noir
  • 沙色
    sand

在提示詞裡寫上配色名稱就能切換,也可以自訂強調色、背景色和文字色。

安裝提示詞
閱讀 https://claude-motion.com/skills/code-showcase/install.md,依說明安裝「code-showcase」Skill,然後用它做出第一支影片。

貼上到 Claude Code、Codex、Cursor 或任何支援 Skills 的 Agent 中。

範例提示詞
Use the code-showcase skill with this Python snippet from our README (paste it as `code`), filename "quickstart.py", highlight "3-6", command "python quickstart.py", output "✓ Connected | ✓ 1,204 rows synced", caption "Sync any database in 6 lines".
風格提示詞(Claude Motion 或 Opus 5.5)
Make a 14-second 16:9 code demo for [who will watch, e.g. developers], playing [where, e.g. our docs and X]. Use only the code, command and headline I give below; don't change a character. Dark navy background.

A rounded editor window with three dots and a file tab rises in. The code types out character by character with a violet block caret and syntax colors (violet keywords, teal strings, gray italic comments, orange numbers). The key lines then get a translucent violet highlight with a left border while the other lines dim. A terminal below types the command and prints green check lines. End frame: the editor fades and the headline appears.

File name and code: [your snippet, 8 to 12 lines] (e.g. deploy.ts)
Lines to highlight: [e.g. 4–8]
Command: [e.g. "$ npx northwind deploy"]
Headline: [e.g. "From prompt to production in one call"]

無需安裝:貼到 Claude Motion(Team 或 Enterprise),或直接傳給 Opus 5.5,就能得到相近的風格。每次執行結果會有差異;用 Skill 則每次結果一致。

用這個 Skill 做的作品