[开源推荐]

项目地址

https://github.com/al1830329386-dev/canvascode

类别

C

项目标题

CanvasCode：像做 PPT 一样在真实网页上拖拽拉伸微调，一键生成 AI 编程 Prompt

项目描述

• 项目名称：CanvasCode
• 项目地址：https://github.com/al1830329386-dev/canvascode
• 一句话介绍：像做 PPT/Figma 一样在真实网页上拖拽拉伸微调，一键生成 AI 编程 Prompt 的开源生产力工具。
• 项目语言：JavaScript / Rust (Tauri)
• 项目类别：Web 工具 / 开发工具 / AI 辅助开发

亮点

项目特色与亮点：

1. 真实网页画板化：点选网页元素唤出 8 个控制手柄自由拉宽高（按 Shift 等比缩放）、120 FPS 硬件加速磁吸辅助线、双击直接改文字、Delete 键删除冗余组件；
2. 一键多模态 Prompt 编译：一键导出纯净高清截图 + 样式差值说明（带建议的 Tailwind CSS 类），贴给多模态 AI 编程助手直接精准落地，解决文字扯皮样式的痛点；
3. 双形态模式：提供 Chrome/Edge 原生扩展，以及仅 8.5MB 的超轻量独立桌面客户端（基于 Tauri v2 + Rust，压缩包仅 2.5MB），支持多端响应式模拟与直接同步回写本地源文件；
4. 纯粹技术实现：零外部运行时依赖，原生 Web Components Shadow DOM 绝对沙箱隔离，绝不污染宿主网页样式。采用 GPL-3.0 协议开源。

示例代码

### 项目特色与亮点：
1. **真实网页画板化**：点选网页元素唤出 8 个控制手柄自由拉宽高（按 Shift 等比缩放）、120 FPS 硬件加速磁吸辅助线、双击直接改文字、Delete 键删除冗余组件；
2. **一键多模态 Prompt 编译**：一键导出纯净高清截图 + 样式差值说明（带建议的 Tailwind CSS 类），贴给多模态 AI 编程助手直接精准落地，解决文字扯皮样式的痛点；
3. **双形态模式**：提供 Chrome/Edge 原生扩展，以及仅 **8.5MB** 的超轻量独立桌面客户端（基于 Tauri v2 + Rust，压缩包仅 2.5MB），支持多端响应式模拟与直接同步回写本地源文件；
4. **纯粹技术实现**：零外部运行时依赖，原生 Web Components Shadow DOM 绝对沙箱隔离，绝不污染宿主网页样式。采用 GPL-3.0 协议开源。

截图或演示视频

No response