[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-82051":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":14,"forks30d":14,"starsTrendScore":18,"compositeScore":19,"rankGlobal":8,"rankLanguage":8,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":8,"pushedAt":8,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":14,"starSnapshotCount":14,"syncStatus":11,"lastSyncTime":28,"discoverSource":29},82051,"ClickDeck","ningsiii\u002FClickDeck","ningsiii",null,"TypeScript",71,2,24,1,0,3,35,40,15,1.43,"MIT License",false,"main",true,[],"2026-06-12 02:04:22","# ClickDeck\n\nEnglish | [中文](#clickdeck-中文)\n\n![ClickDeck demo: edit an HTML presentation page directly in the browser](docs\u002Fassets\u002Fclickdeck-demo.gif)\n\nClickDeck is an open-source Chrome\u002FEdge extension for visual HTML page editing. It helps you fine-tune AI-generated pages, HTML presentations, project briefs, and other browser-rendered documents directly in the browser without opening DevTools.\n\nSelect an element, adjust typography, spacing, alignment, color, and text in place, then export the edited page as an HTML snapshot or through the browser PDF print flow.\n\n## Status\n\nClickDeck is an alpha project. The extension is usable for local testing and GitHub feedback, but it is not ready for Chrome Web Store submission yet.\n\n## Why ClickDeck\n\nAI coding tools are good at generating the first version of a web page, but the last mile is often visual: a title needs to be bigger, a paragraph needs softer spacing, a section needs a warmer color, or a presentation page needs a final polish before sharing.\n\nClickDeck sits between Chrome DevTools and a full design tool. It is a lightweight in-browser visual editor for people who want direct control over the rendered page without turning every small design adjustment into a code search.\n\n## Features\n\n- Select elements on the current page with a visual outline.\n- Adjust font size, weight, line spacing, alignment, and color.\n- Edit text directly in place.\n- Undo and redo style\u002Ftext changes.\n- **Copy AI Edit Prompt**: Generate a structured prompt from your visual edits, ready to be pasted into Claude\u002FChatGPT for source code updates.\n- Export an edited HTML snapshot.\n- Trigger PDF export in long-page, A4, and 16:9 modes.\n- Copy recent diagnostics logs for issue reports.\n- Show a Chinese UI automatically when the browser language is Chinese.\n\n## Use Cases\n\n- Polishing AI-generated landing pages, prototypes, and static HTML pages.\n- Fine-tuning HTML presentations built with Reveal.js, Slidev, Marp, or custom HTML.\n- Adjusting browser-rendered project briefs, proposals, reports, and teaching materials.\n- Capturing an edited page as HTML or PDF when source-code write-back is not needed.\n\n## Non-Goals\n\n- No AI content generation.\n- No source-code write-back.\n- No free-form design canvas.\n- No editable PPT export in the MVP.\n\n## Installation\n\nFor most users, install ClickDeck from the GitHub Releases page:\n1. Go to the [Releases](https:\u002F\u002Fgithub.com\u002Fningsiii\u002FClickDeck\u002Freleases) page and download `ClickDeck-v1.0.0.zip`.\n2. Extract the ZIP file to a folder on your computer.\n3. Open Chrome or Edge and navigate to `chrome:\u002F\u002Fextensions\u002F` or `edge:\u002F\u002Fextensions\u002F`.\n4. Enable **Developer mode** in the top right corner.\n5. Click **Load unpacked** and select the extracted folder.\n\n## Local Development\n\n```bash\nnpm install\nnpm run build\nnpm run typecheck\nnpm test\nnpm run e2e\n```\n\nLoad the built `dist\u002F` directory in Chrome or Edge via the extensions page with Developer mode enabled.\n\nFor screenshots or GIF recording, open `fixtures\u002Fshowcase-page.html`, enable ClickDeck with `Alt+Shift+C`, select the hero title or metric cards, and demonstrate a few small typography\u002Fcolor changes.\n\nTo regenerate the demo assets locally after building the extension:\n\n```bash\nnode scripts\u002Fcapture-demo.mjs\n```\n\n## Privacy\n\nClickDeck runs locally in the browser. It does not upload page content or diagnostics by default. The diagnostics button copies recent local logs to your clipboard so you can choose what to share in an issue.\n\n## Known Limitations\n\n- PDF export uses the browser print flow. To prevent Chrome from crashing on complex CSS background layers, ClickDeck automatically strips complex gradients and image backgrounds during print, preserving only solid UI colors.\n- Complex websites may have CSS or script behavior that affects editing\u002Fexport quality.\n- HTML snapshot export keeps external resource URLs instead of bundling every asset.\n- The panel is draggable and scrollable, but not resizable.\n\n## License\n\nMIT\n\n---\n\n# ClickDeck 中文\n\n![ClickDeck 演示：直接在浏览器里编辑 HTML 演示页面](docs\u002Fassets\u002Fclickdeck-demo.gif)\n\nClickDeck 是一个开源 Chrome\u002FEdge 插件，用于对当前 HTML 页面进行可视化编辑和微调。它适合微调 AI 生成的网页、HTML 演示文稿、项目简报和其他浏览器渲染出来的文档，不需要打开 DevTools。\n\n你可以直接选择页面元素，调整字号、间距、对齐、颜色和文本内容，然后把修改后的页面导出为 HTML 快照，或通过浏览器打印流程导出 PDF。\n\n## 当前状态\n\nClickDeck 目前是 alpha 项目。它已经适合本地测试和 GitHub 反馈，但还不建议直接提交 Chrome Web Store。\n\n## 为什么做 ClickDeck\n\nAI 编程工具很擅长生成第一版网页，但最后一公里通常是视觉微调：标题再大一点、段落间距柔和一点、区块颜色更暖一点，或者 HTML\u002FPPT 式页面在分享前需要最后打磨。\n\nClickDeck 介于 Chrome DevTools 和完整设计工具之间。它是一个轻量的浏览器内可视化编辑器，让用户不用为了每一个小改动都去代码里搜索定位。\n\n## 功能\n\n- 在当前页面上选择元素，并显示可视化描边。\n- 调整字号、字重、行距、对齐和颜色。\n- 直接编辑页面文字。\n- 撤销和重做样式\u002F文字修改。\n- **复制 AI Edit Prompt**：将你的可视化修改一键转换为结构化的 Prompt，直接发给 Claude\u002FChatGPT 用于修改源码。\n- 导出修改后的 HTML 快照。\n- 触发长页面、A4、16:9 三种 PDF 打印导出。\n- 复制最近诊断日志，方便提交 issue。\n- 浏览器语言为中文时自动显示中文界面。\n\n## 使用场景\n\n- 微调 AI 生成的 landing page、原型页和静态 HTML 页面。\n- 微调 Reveal.js、Slidev、Marp 或自定义 HTML 生成的演示文稿。\n- 调整项目简报、提案、报告和教学材料等浏览器渲染文档。\n- 在不需要源码回写时，把修改后的页面导出为 HTML 或 PDF。\n\n## 不做什么\n\n- 不做 AI 内容生成。\n- 不回写源码。\n- 不做自由画布设计工具。\n- MVP 不导出可编辑 PPT。\n\n## 安装方法\n\n对于普通用户，请通过 GitHub Releases 安装 ClickDeck：\n1. 前往 [Releases](https:\u002F\u002Fgithub.com\u002Fningsiii\u002FClickDeck\u002Freleases) 页面，下载 `ClickDeck-v1.0.0.zip`。\n2. 将 ZIP 文件解压到你电脑上的一个文件夹中。\n3. 打开 Chrome 或 Edge 浏览器，访问 `chrome:\u002F\u002Fextensions\u002F` 或 `edge:\u002F\u002Fextensions\u002F`。\n4. 打开右上角的 **开发者模式 (Developer mode)**。\n5. 点击 **加载已解压的扩展程序 (Load unpacked)**，然后选择你刚才解压的文件夹。\n\n## 本地开发\n\n```bash\nnpm install\nnpm run build\nnpm run typecheck\nnpm test\nnpm run e2e\n```\n\n构建后，在 Chrome 或 Edge 的扩展管理页面开启开发者模式，并加载 `dist\u002F` 目录。\n\n如果要做截图或录制 GIF，可以打开 `fixtures\u002Fshowcase-page.html`，用 `Alt+Shift+C` 启用 ClickDeck，选择首屏标题或指标卡片，演示少量字号、颜色和文本微调。\n\n构建插件后，可以用下面的命令重新生成演示素材：\n\n```bash\nnode scripts\u002Fcapture-demo.mjs\n```\n\n## 隐私\n\nClickDeck 在浏览器本地运行。默认不会上传页面内容或诊断信息。诊断按钮只会把最近本地日志复制到剪贴板，由你决定是否粘贴到 issue。\n\n## 已知限制\n\n- PDF 导出走浏览器原生打印流程。为防止浏览器渲染复杂 CSS 背景时卡死，ClickDeck 会在打印时自动剥离所有渐变和背景图，仅保留界面纯色块。\n- 复杂网站的 CSS 或脚本可能影响编辑和导出质量。\n- HTML 快照会保留外部资源 URL，不会把所有资源内联打包。\n- 面板可以拖动和滚动，但暂不支持自由拉伸。\n\n## License\n\nMIT\n","ClickDeck 是一个开源的 Chrome\u002FEdge 浏览器扩展程序，用于可视化编辑 HTML 页面。其核心功能包括直接在浏览器中选择和调整页面元素的字体大小、间距、对齐方式、颜色及文本内容，并支持撤销和重做更改。此外，它还提供了生成 AI 编辑提示、导出编辑后的 HTML 快照以及触发 PDF 导出等功能。适用于需要微调由 AI 生成的网页、HTML 演示文稿、项目简介等场景，特别适合那些希望在不触及代码的情况下直接控制页面视觉效果的用户。目前 ClickDeck 处于 alpha 阶段，主要用于本地测试和收集反馈。","2026-06-11 04:07:35","CREATED_QUERY"]