GitHub 儲存庫 · 發布者 Every-Comment5473

終端機中 Claude Code 上的智慧 UI：真實表格、LaTeX、圖片與即時圖表。

Name: 終端機中 Claude Code 上的智慧 UI：真實表格、LaTeX、圖片與即時圖表。
Author: Every-Comment5473

一個 Claude Code 模組，在終端機中將回應渲染為排版後的 Typst 圖片，支援表格、LaTeX 數學公式、內嵌圖片、圖表、圖示、計畫模式以及主題。

Every-Comment5473@Every-Comment5473

razorback16/cc-intelligent-ui

已翻譯

關於這個 mod

CC Intelligent UI 是一個 Claude Code 模組，它透過 Typst 將每個答案渲染為排版後的圖片，使用渲染鉤子將答案列替換為以 kitty graphics 預留位置繪製的 PNG 頁面。它支援渲染後的 Markdown（標題、表格、工作清單、引用、語法高亮程式碼）、行內與獨立 LaTeX、貼上與行內圖片，以及 Claude 撰寫的圖表/圖示（CeTZ、cetz-plot、fletcher）。計畫模式會顯示渲染後的計畫，並帶有核准/編輯/拒絕控制項。主題包括 Claude Code 色彩（預設）與 VS Code Markdown 預覽變體，每個都有淺色/深色版本，並可透過 /iui theme <name> 使用自訂 JSON 主題。在 kitty、Ghostty 與 cmux 上開箱即用；iTerm2 3.6+ 需要 /iui setup；不支援 tmux 或 screen。在 macOS 上使用 Claude Code 2.1.298+，透過 brew install typst 與 /plugin install cc-intelligent-ui --marketplace razorback16/cc-intelligent-ui 安裝。增加約 450 個系統提示 token；儲存的逐字稿保持為純 Markdown；圖片中的文字無法搜尋，且渲染不是漸進式的。

安裝

請先查看作者 README，確認 marketplace 與外掛名稱；指令可能隨儲存庫結構而變動。

claude plugin marketplace add razorback16/cc-intelligent-ui
claude plugin install cc-intelligent-ui@razorback16

原文 / README

I got tired of reading Markdown tables as rows of pipes, so I made Claude Code render its answers. CC Intelligent UI is a Claude Code mod that draws each answer as a typeset picture with Typst. Tables line up, math looks like a paper, and when a picture explains more than words, Claude draws a chart or a diagram itself. What you get Rendered Markdown: headings, tables, task lists, quotes, code with syntax colours, in your terminal's font LaTeX math , inline and display Images: the images you paste into the prompt show in the transcript, and images in an answer show inline Charts and diagrams that Claude writes on the fly (CeTZ, cetz-plot, fletcher), in your theme's colours Plan mode: the plan shows rendered, with approve / edit / reject under it You can still select and copy text from the pictures with the mouse Themes: Claude Code's own colors (the default), or VS Code's Markdown preview in Modern or Dark+/Light+ colors. Each theme has a light and a dark version, and the mod follows your terminal. You can also make your own with a small JSON file ( /iui theme <name> ) Terminals: kitty, Ghostty and cmux work out of the box. iTerm2 3.6+ needs /iui setup once. No tmux or screen. Other terminals just get the normal text. Install (macOS, Claude Code 2.1.298+): brew install typst /plugin install cc-intelligent-ui --marketplace razorback16/cc-intelligent-ui No restart needed. /iui off turns it off. How it works: a render hook swaps each answer row for PNG pages that Typst compiles in 0.15–0.6 s, drawn with kitty graphics placeholders. The saved transcript stays plain Markdown. The mod adds about 450 tokens to the system prompt so Claude knows it can write typst blocks. Honest limits: I have tested it only on macOS. ssh, Linux and other OSes are not tested yet; Rendering is not progressive: while Claude writes, the block is shown, and the picture shows once Claude finishes it. Search doesn't find text inside pictures. I built most of it with Claude Code itself. Feedback and bug reports welcome. GitHub: https://github.com/razorback16/cc-intelligent-ui Independent community project, not affiliated with Anthropic. submitted by /u/Every-Comment5473 to r/ClaudeCode [link] [comments]

作品資訊

作者: Every-Comment5473
用途: 主題與外觀
收錄於: 2026年10月18日
來源更新: 2026年10月17日
星數: 19
權限足跡: 至少 L2（掃描不完整）
次瀏覽: 0

imagesmarkdownrender-hookterminal-renderingtypst

回報這個作品這是你的作品？認領

贊助

在此刊登，每週 $10 起

至少 L2（掃描不完整）

權限足跡

資料來自自動掃描，安裝前請自行查看原始碼。等級描述能力，不代表安全認證。

掃描不完整。未掃描外部相依套件： AppKit 所示等級只是下限，未能解析的部分可能含有更高權限。

執行指令
寫入檔案
攔截工具呼叫
讀取檔案
環境變數
提交提示詞

查看命中位置（118）

執行指令 · 第221 行hooks/register.tsx

const got = await $.process.run(['pbpaste'], { timeoutMs: 2000, env: { LANG: 'en_US.UTF-8', LC_ALL: 'en_US.UTF-8' } }).catch(() => null)

寫入檔案 · 第361 行hooks/register.tsxawait $.fs.write(`${cache}/copy-debug.json`, JSON.stringify(full, null, 1)).catch(() => undefined)

攔截工具呼叫 · 第768 行hooks/register.tsxon('tool.call', { tool: ['Write', 'Edit'] }, async ($, e, next) => {

攔截工具呼叫 · 第786 行hooks/register.tsxon('tool.call', { tool: 'ExitPlanMode' }, async ($, e, next) => {

執行指令 · 第8 行hooks/lib/log.ts

await $.process.run(['sh', '-c', 'cat >> "$1"', 'sh', `${cache}/debug.log`], { stdin: `[${stamp}] ${text.trimEnd()}\n` }).catch(() => undefined)

執行指令 · 第63 行hooks/lib/mode.ts

const m = /\x1b\]11;rgba?:([0-9a-f]{1,4})\/([0-9a-f]{1,4})\/([0-9a-f]{1,4})(?:\/[0-9a-f]{1,4})?(?:\x07|\x1b\\)/i.exec(text)

讀取檔案 · 第96 行hooks/lib/themes.tsconst entries = await $.fs.list(base).catch(() => [])

讀取檔案 · 第100 行hooks/lib/themes.tsconst json = await $.fs.read(`${dir}/theme.json`).catch(() => null)

讀取檔案 · 第125 行hooks/lib/themes.tsconst stat = await $.fs.stat(file).catch(() => null)

執行指令 · 第81 行hooks/lib/command.tsconst head = /^\s*\/iui\s+/.exec(text)

環境變數 · 第58 行hooks/lib/setup.tsshell: (await $.env.get('SHELL')) ?? '',

環境變數 · 第59 行hooks/lib/setup.tshome: (await $.env.get('HOME')) ?? '',

環境變數 · 第60 行hooks/lib/setup.tszdotdir: (await $.env.get('ZDOTDIR')) || undefined,

環境變數 · 第61 行hooks/lib/setup.tsxdgConfig: (await $.env.get('XDG_CONFIG_HOME')) || undefined,

寫入檔案 · 第74 行hooks/lib/setup.tsawait $.fs.write(rc.path, withoutSetup(text))

執行指令 · 第78 行hooks/lib/setup.tsif (rc.kind === 'fish') await $.process.run(['mkdir', '-p', rc.path.replace(/\/[^/]*$/, '')]).catch(() => null)

寫入檔案 · 第79 行hooks/lib/setup.tsawait $.fs.write(rc.path, withSetup(text, rc.kind))

環境變數 · 第89 行hooks/lib/setup.tsconst file = rc ? rc.path.replace((await $.env.get('HOME')) ?? '\u0000', '~') : "your shell's start file"

環境變數 · 第103 行hooks/lib/host.tsconst profile = await $.env.get('ITERM_PROFILE')

執行指令 · 第105 行hooks/lib/host.ts$.process.run(['sh', '-c', ITERM_BOOKMARKS_SH], { timeoutMs: 5000 }).catch(() => null),

執行指令 · 第106 行hooks/lib/host.ts$.process.run(['sh', '-c', ITERM_DEFAULT_SH], { timeoutMs: 5000 }).catch(() => null),

執行指令 · 第110 行hooks/lib/host.ts

const named = await $.process.run(['osascript', '-l', 'JavaScript', '-e', FAMILY_JXA, spec.name], { timeoutMs: 5000 }).catch(() => null)

執行指令 · 第114 行hooks/lib/host.tsconst shown = await $.process.run(['sh', '-c', GHOSTTY_SH], { timeoutMs: 5000 }).catch(() => null)

執行指令 · 第123 行hooks/lib/host.ts

const named = await $.process.run(['osascript', '-l', 'JavaScript', '-e', FAMILY_JXA, font.postscript], { timeoutMs: 5000 }).catch(() => null)

執行指令 · 第127 行hooks/lib/host.tsconst got = await $.process.run(['fc-match', 'monospace', '-f', '%{family}'], { timeoutMs: 5000 }).catch(() => null)

執行指令 · 第164 行hooks/lib/host.tsconst got = await $.process.run(['sh', '-c', ITERM_MODE_SH], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

執行指令 · 第174 行hooks/lib/host.tsconst got = await $.process.run(['perl', '-e', OSC11_PL], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

執行指令 · 第181 行hooks/lib/host.tsconst got = await $.process.run(['sh', '-c', GHOSTTY_SH], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

環境變數 · 第183 行hooks/lib/host.tsconst home = (await $.env.get('HOME')) ?? ''

環境變數 · 第196 行hooks/lib/host.tsxdgConfig: (await $.env.get('XDG_CONFIG_HOME')) || undefined,

環境變數 · 第198 行hooks/lib/host.tsresources: (await $.env.get('GHOSTTY_RESOURCES_DIR')) || undefined,

讀取檔案 · 第202 行hooks/lib/host.tsconst text = await $.fs.read(path).catch(() => null)

環境變數 · 第219 行hooks/lib/host.tsconst home = (await $.env.get('HOME')) ?? ''

環境變數 · 第229 行hooks/lib/host.tsconst home = (await $.env.get('HOME')) ?? ''

執行指令 · 第234 行hooks/lib/host.ts

const got = await $.process.run(['defaults', 'read', 'com.cmuxterm.app', 'appearanceMode'], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

讀取檔案 · 第245 行hooks/lib/host.tsconst text = await $.fs.read(path).catch(() => null)

環境變數 · 第251 行hooks/lib/host.tsconst home = (await $.env.get('HOME')) ?? ''

環境變數 · 第253 行hooks/lib/host.tskittyDir: (await $.env.get('KITTY_CONFIG_DIRECTORY')) || undefined,

環境變數 · 第254 行hooks/lib/host.tsxdgConfig: (await $.env.get('XDG_CONFIG_HOME')) || undefined,

執行指令 · 第276 行hooks/lib/host.ts

const got = await $.process.run(['gsettings', 'get', 'org.gnome.desktop.interface', 'color-scheme'], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

環境變數 · 第291 行hooks/lib/host.tsrioHome: (await $.env.get('RIO_CONFIG_HOME')) || undefined,

環境變數 · 第292 行hooks/lib/host.tsxdgConfig: (await $.env.get('XDG_CONFIG_HOME')) || undefined,

環境變數 · 第293 行hooks/lib/host.tshome: (await $.env.get('HOME')) ?? '',

執行指令 · 第314 行hooks/lib/host.ts

const got = await $.process.run(['defaults', 'read', '-g', 'AppleInterfaceStyle'], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

執行指令 · 第318 行hooks/lib/host.ts

const got = await $.process.run(['gsettings', 'get', 'org.gnome.desktop.interface', 'color-scheme'], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

執行指令 · 第52 行hooks/lib/terminals.tsconst m = /^\s*(\S.*?)\s+(\d+(?:\.\d+)?)\s*$/.exec(spec)

執行指令 · 第73 行hooks/lib/terminals.tsconst m = /^\s*#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})\s*$/i.exec(text)

執行指令 · 第80 行hooks/lib/terminals.tsconst m = /^\s*([\w-]+)\s*=\s*(.*?)\s*$/.exec(line)

執行指令 · 第89 行hooks/lib/terminals.tsconst m = /^\s*(light|dark)\s*:\s*(.*?)\s*$/i.exec(part)

執行指令 · 第127 行hooks/lib/terminals.tsconst m = /^\s*font-family\s*=\s*(.*?)\s*$/.exec(line)

執行指令 · 第142 行hooks/lib/terminals.tsconst m = /^([a-zA-Z][a-zA-Z0-9_-]*)\s+(.+)$/.exec(raw.trim())

執行指令 · 第237 行hooks/lib/terminals.tsconst m = /^"((?:[^"\\]|\\.)*)"|^'([^']*)'/.exec(value)

執行指令 · 第247 行hooks/lib/terminals.tsconst h = head.exec(line)

執行指令 · 第252 行hooks/lib/terminals.tsconst m = entry.exec(line)

執行指令 · 第23 行hooks/lib/markdown.tsconst m = FENCE.exec(line)

執行指令 · 第35 行hooks/lib/markdown.tsconst m = FENCE.exec(line)

執行指令 · 第131 行hooks/lib/markdown.tsconst m = FENCE.exec(line)

執行指令 · 第143 行hooks/lib/markdown.tsconst m = FENCE.exec(line)

執行指令 · 第100 行hooks/lib/typst.tsconst got = await $.process.run(['sh', flag, 'command -v typst'], { timeoutMs: 5000 }).catch(() => null)

環境變數 · 第104 行hooks/lib/typst.tsconst home = (await $.env.get('HOME').catch(() => undefined)) ?? ''

執行指令 · 第121 行hooks/lib/typst.tsconst got = await $.process.run(argv, { timeoutMs: 10000, env: noNetworkEnv(cache) }).catch(() => null)

執行指令 · 第180 行hooks/lib/typst.ts

if (paths.length) void Promise.resolve($.process.run(['touch', '-c', ...paths], { timeoutMs: 5000 })).catch(() => undefined)

執行指令 · 第214 行hooks/lib/typst.tsvoid Promise.resolve($.process.run(['kill', pid], { timeoutMs: 5000 })).catch(() => undefined)

執行指令 · 第226 行hooks/lib/typst.tsconst child = $.process.spawn({ argv: wrapPid(argv), ...(o.env ? { env: o.env } : {}) })

讀取檔案 · 第317 行hooks/lib/typst.tssegments = (JSON.parse((await $.fs.read(`${dir}/doc.json`)) as string) as { segments?: unknown }).segments

讀取檔案 · 第338 行hooks/lib/typst.tsconst files = (await $.fs.list(dir))

執行指令 · 第344 行hooks/lib/typst.tsconst heads = await $.process.run(['sh', '-c', HEADERS_SH, 'sh', ...files])

讀取檔案 · 第359 行hooks/lib/typst.tsconst kept = await $.fs.read(`${dir}/pages.json`).catch(() => null)

寫入檔案 · 第374 行hooks/lib/typst.tsawait $.fs.write(`${dir}/doc.json`, JSON.stringify({ base, segments, images }))

寫入檔案 · 第405 行hooks/lib/typst.tsawait $.fs.write(`${dir}/doc.json`, JSON.stringify({ base, segments: cut, images }))

寫入檔案 · 第418 行hooks/lib/typst.tsawait $.fs.write(`${dir}/pages.json`, JSON.stringify(result))

執行指令 · 第95 行hooks/lib/draw.tsxconst heading = /^ {0,3}(#{1,6})\s/.exec(line)

讀取檔案 · 第119 行hooks/lib/draw.tsxconst got = await $.fs.read(page.file, { as: 'bytes' }).catch(() => null)

讀取檔案 · 第62 行hooks/lib/designs.tsconst text = await $.fs.read(path).catch(() => null)

讀取檔案 · 第76 行hooks/lib/designs.tsconst text = await $.fs.read(path).catch(() => null)

寫入檔案 · 第84 行hooks/lib/designs.tsawait $.fs.write(path, designText(design))

讀取檔案 · 第75 行hooks/lib/answer.tsconst text = await $.fs.read(`${dir}/pages.json`).catch(() => null)

執行指令 · 第32 行hooks/lib/frame.tsconst m = /^(pid|size|clip) (.*)$/.exec(line.trim())

執行指令 · 第84 行hooks/lib/frame.tsconst tty = await $.process.run(['sh', '-c', CELL_SH], { timeoutMs: 5000 }).catch(() => null)

執行指令 · 第218 行hooks/lib/frame.tsif (stopped && pid) void Promise.resolve($.process.run(['kill', pid], { timeoutMs: 5000 })).catch(() => undefined)

執行指令 · 第228 行hooks/lib/frame.tsconst child = $.process.spawn({ argv: [perlFor(S.hostOs === 'Darwin'), '-e', WATCH_PL, ...(isClip ? ['clip'] : [])] })

執行指令 · 第33 行hooks/lib/env.tsconst made = await $.process.run(['sh', '-c', CACHE_SH]).catch(() => null)

讀取檔案 · 第37 行hooks/lib/env.tsconst listed = await $.fs.list(cache).catch(() => [])

環境變數 · 第39 行hooks/lib/env.tsconst program = (await $.env.get('TERM_PROGRAM')) ?? ''

環境變數 · 第40 行hooks/lib/env.tsconst term = (await $.env.get('TERM')) ?? ''

環境變數 · 第41 行hooks/lib/env.tsconst ssh = !!(await $.env.get('SSH_CONNECTION')) || !!(await $.env.get('SSH_TTY'))

環境變數 · 第45 行hooks/lib/env.tskitty: !!(await $.env.get('KITTY_WINDOW_ID')),

環境變數 · 第46 行hooks/lib/env.tstmux: !!(await $.env.get('TMUX')) || !!(await $.env.get('STY')) || /^tmux|^screen/i.test(term),

環境變數 · 第48 行hooks/lib/env.tsbackground: (await $.env.get('CLAUDE_CODE_SESSION_KIND')) === 'bg',

環境變數 · 第49 行hooks/lib/env.tsengineForced: isSet(await $.env.get('CLAUDE_CODE_FORCE_TERMINAL_IMAGES')),

環境變數 · 第50 行hooks/lib/env.tsmodForced: isSet(await $.env.get('IUI_FORCE')),

讀取檔案 · 第53 行hooks/lib/env.tsconst template = await $.fs.stat(`${root}/render/md.typ`).catch(() => null)

環境變數 · 第61 行hooks/lib/env.tsS.itermProfile = (await $.env.get('ITERM_PROFILE')) || undefined

環境變數 · 第62 行hooks/lib/env.tsS.isKitty = /kitty/i.test(term) || !!(await $.env.get('KITTY_WINDOW_ID')) || !!(await $.env.get('KITTY_PID'))

環境變數 · 第64 行hooks/lib/env.tsS.debug = isSet(await $.env.get('IUI_DEBUG'))

環境變數 · 第68 行hooks/lib/env.tssession: (await $.env.get('ITERM_SESSION_ID')) || undefined,

環境變數 · 第69 行hooks/lib/env.tslcTerminal: (await $.env.get('LC_TERMINAL')) || undefined,

環境變數 · 第72 行hooks/lib/env.ts!(await $.env.get('TMUX')) && !(await $.env.get('STY')) && (await $.env.get('CLAUDE_CODE_SESSION_KIND')) !== 'bg'

環境變數 · 第74 行hooks/lib/env.ts

S.isCmux = !!(await $.env.get('CMUX_SURFACE_ID')) || !!(await $.env.get('CMUX_WORKSPACE_ID')) || !!(await $.env.get('CMUX_SOCKET_PATH'))

環境變數 · 第75 行hooks/lib/env.tsS.colorFgBg = (await $.env.get('COLORFGBG')) ?? ''

環境變數 · 第97 行hooks/lib/env.tsconst home = (await $.env.get('HOME')) ?? ''

環境變數 · 第119 行hooks/lib/env.tstmpdir: (await $.env.get('CLAUDE_CODE_TMPDIR')) || undefined,

執行指令 · 第120 行hooks/lib/env.tsuid: await $.process.run(['id', '-u']).then(r => (r.exitCode === 0 ? r.stdout : ''), () => ''),

讀取檔案 · 第30 行hooks/lib/pictures.tsxif (!at) return $.fs.stat(file).catch(() => null)

讀取檔案 · 第38 行hooks/lib/pictures.tsxgot = $.fs.stat(file).catch(() => null)

執行指令 · 第51 行hooks/lib/pictures.tsxconst head = await $.process.run(['sh', '-c', HEADERS_SH, 'sh', file]).catch(() => null)

讀取檔案 · 第69 行hooks/lib/pictures.tsxconst got = await $.fs.read(p.file, { as: 'bytes' }).catch(() => null)

讀取檔案 · 第152 行hooks/lib/pictures.tsxconst made = await $.fs.stat(out).catch(() => null)

寫入檔案 · 第158 行hooks/lib/pictures.tsxawait $.fs.write(`${dir}/source.txt`, `${file}\n`).catch(() => undefined)

執行指令 · 第164 行hooks/lib/pictures.tsxconst ran = await $.process.run(argv, { timeoutMs: COMPILE_TIMEOUT_MS, env }).catch(failed)

執行指令 · 第165 行hooks/lib/pictures.tsxconst moved = ran.exitCode === 0 ? await $.process.run(['mv', '-f', part, out]).catch(failed) : null

讀取檔案 · 第186 行hooks/lib/pictures.tsxconst got = st.size <= SENT_TEXT_MAX_BYTES ? await $.fs.read(file).catch(() => null) : null

讀取檔案 · 第287 行hooks/lib/pictures.tsxconst projects = (await $.fs.list(ready.claudeTmp).catch(() => [])).filter(f => f.kind === 'dir')

執行指令 · 第147 行hooks/lib/plan.tsxconst got = await $.process.run(['sh', flag, 'command -v code'], { timeoutMs: 5000 }).catch(() => null)

執行指令 · 第186 行hooks/lib/plan.tsxawait $.process.run(argv!, { timeoutMs: EDIT_TIMEOUT_MS }).catch(() => null)

讀取檔案 · 第187 行hooks/lib/plan.tsxconst text = await $.fs.read(o.file).catch(() => null)

讀取檔案 · 第204 行hooks/lib/plan.tsxconst text = await $.fs.read(file).catch(() => null)

提交提示詞 · 第214 行hooks/lib/plan.tsxawait $.prompt.submit({ text: `${PLAN_IMPLEMENT}\n\n${plan}`, asUser: true }).catch(() => undefined)

終端機中 Claude Code 上的智慧 UI：真實表格、LaTeX、圖片與即時圖表。

關於這個 mod

安裝

更多類似作品

fm

claude-pokemon

ui-themes