SuperAPI AI 工具集

ui-design

设计与创作

查看项目

更新于 10-16 09:47

技能介绍

用途:生成 UI 设计稿,并把生成图、截图或设计稿还原成 HTML/CSS。

主要能力与用法: 1)生图优先用当前代理/运行时的内置图像生成工具;仅在内置不可用、用户明确要求 ZenMux,或需要脚本化本地输出路径时使用 scripts/ask_draw.sh。示例: scripts/ask_draw.sh --type wide --name "screen-name" --prompt "..." 带参考图时用 --frame(自动作为第一个参考): scripts/ask_draw.sh --frame /path/to/reference.png --type wide --name "screen-name" --prompt "..." 2)--type 可选 wide(16:9)/square(1:1)/portrait(3:4)/classic(4:3),默认 wide;--ref 可重复追加参考图;-o 自定义输出路径,默认 ~/.local/share/draw/outputs/YYYY-MM-DD/;成功输出 output_path=<path>。API Key 查找顺序:ZENMUX_API_KEY 环境变量 → .env.local → ~/.config/see/api_key。 3)生成前先收集信息:目标页面及其核心功能、是否有现有截图或设计稿、截图中有哪些区域不希望被改动;风格与是否需要多张一致的屏幕为选问。用户已给出明确页面、风格或参考图时可直接执行。 4)参考图策略:无截图可自由生成;只想锁定导航/侧边栏时传纯净边框图(内容区涂纯色);需整体风格精准对齐时传完整截图,但内容区创意会受影响。多张一致屏幕必须串行执行,不能并行。 5)提示词可用类比法或清单法;不写像素、列数、padding 等排版规格;给真实示例数据;颜色用 HEX;有参考图时在 prompt 开头说明哪些区域保持不变;prompt 控制在 800 字以内,过长会导致 server disconnect。 6)还原 HTML 前先读 references/html-reconstruction.md:页面结构优先代码化,logo、品牌符号、复杂插画、3D/玻璃质感、半透明渐变等要素材化;裁图仅作参考与定位,最终资产用图生图重绘后再裁边抠图。透明素材按类型分别处理。

限制:偶发 disconnect 属正常,重试即可;其余未在资料中说明。