AI 编程AI 资源
UI Slicing：将界面参考图切片转换为像素级还原的前端代码
viesloxy/ui-slicing · Slice any UI reference image (Pinterest, Dribbble, screenshots) into pixel-perfect front-end code. Agent skill + toolkit: section analysis, design tokens, font matching, screenshot diffing, anti-AI-slop checklist. Live: https://viesloxy.github.io/ui-slicing/
ELI5：它是什么，解决什么问题
该项目是一个兼容 Agent Skills 标准的技能与工具包，用于把 Pinterest、Dribbble 截图等 UI 参考图转成忠实还原的前端代码。它提供 6 步工作流：获取图片、分析调色板与分节、建立设计 token、逐节构建、截图差异比对并修复、交付单个自包含 index.html，并内置反 AI 套路的清单。脚本依赖 Pillow，支持多种聊天模型和编码代理。
核心能力与快速开始
★ 1 · Python
- 能做什么
- 通过 SKILL.md 约定代理的 6 步流程：从 URL 或本地文件获取参考图，分析尺寸、DPR、调色板与分节，生成放大的条带裁剪图，建立设计 token，规划并逐节构建，使用对比脚本生成并排图与差异热图，按差异评分优先修复最差区域，最终交付单个自包含的 index.html。还提供反 AI 套路检查表与输出契约，约束字体替换、臆造内容和细节一致性。
- 适用场景
- 适合需要按设计稿或截图高保真还原前端页面的场景，例如把 Pinterest 或 Dribbble 视觉稿转为 HTML/CSS、在聊天模型或编码代理中执行 UI 切片任务，以及借助截图比对迭代修正还原偏差。
- 项目形态
- 开发框架
- 部署方式
- 未说明；README 给出将目录复制到 Agent Skills 目录的安装方式，并列出多种代理与 IDE 的路径示例。
- 主要依赖
- 脚本依赖 Pillow（pip install Pillow）；其他环境要求未说明。
- 使用限制
- 输出契约锁定为单个自包含 index.html，React 仅在明确要求时使用；代理路径与兼容工具列表需参考对应工具文档；效果与成本未说明。
- 许可证
- MIT
- 最近推送
- 2026-10-19 08:46
资料检查：2026-10-20 07:00 · 卡片整理：2026-10-20 07:00
卡片由 AI 根据仓库资料整理，未进行安装或运行验证
讨论 0
登录后参与讨论，阅读资讯无需注册。
还没有评论，来分享第一个看法。