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