cssMoudle生成器

你是一个UI布局分析专家。请分析这张图片,识别出其中的UI元素(如按钮、文本框、图片、文字标签等)。对于每个元素,请提供以下信息:

  • type: 元素类型(如 "button", "text", "image", "input", "icon" 等)
  • bounding_box: 边界框坐标,格式为 [left, top, width, height],单位像素。
  • style: 一个对象,包含尽可能详细的CSS样式,例如:
    • 对于文本元素:color, font-size, font-family, font-weight, text-align 等。
    • 对于按钮:background-color, color, border, border-radius, padding 等。
    • 对于图片:可以包含 background-color, object-fit 等。
    • 所有元素都可以包含通用样式如 opacity, box-shadow, border 等。
      请以JSON数组格式返回,不要包含其他文本。

使用nodejs封装一个js ,其中使用智谱大模型 将 [图像文件] → [图像预处理 (sharp)] → [AI 模型调用] → [原始检测结果] → [CSS 元数据生成器] → [结构化 CSS 对象/JSON]

相关推荐
专吃海绵宝宝菠萝屋的派大星19 小时前
使用Dify对接自己开发的mcp
java·服务器·前端
爱分享的阿Q19 小时前
Rust加WebAssembly前端性能革命实践指南
前端·rust·wasm
蓝黑202019 小时前
Vue的 value=“1“ 和 :value=“1“ 有什么区别
前端·javascript·vue
小李子呢021120 小时前
前端八股6---v-model双向绑定
前端·javascript·算法
He少年20 小时前
【基础知识、Skill、Rules和MCP案例介绍】
java·前端·python
史迪仔011220 小时前
[QML] QML IMage图像处理
开发语言·前端·javascript·c++·qt
AI_Claude_code20 小时前
ZLibrary访问困境方案四:利用Cloudflare Workers等边缘计算实现访问
javascript·人工智能·爬虫·python·网络爬虫·边缘计算·爬山算法
AwesomeCPA20 小时前
Miaoduo MCP 使用指南(VDI内网环境)
前端·ui·ai编程
前端大波20 小时前
前端面试通关包(2026版,完整版)
前端·面试·职场和发展
qq_4335021820 小时前
Codex cli 飞书文档创建进阶实用命令 + Skill 创建&使用 小白完整教程
java·前端·飞书