AI 开源项目雷达帮你从 GitHub 上快速发现、理解和复用高质量 AI 开源项目。

左右滑动查看全部 ↔

←返回 AI 工作站

Agent Skill 核验档案

图片处理 · Image To Code Skill

这是一个面向 Codex 的网站“图像优先”设计转前端 Skill：先生成可读、可分析的网站视觉参考图，深入提取设计系统，再将其尽可能忠实地实现为前端。

适用任务

为英雄区、落地页、营销站、产品页、作品集等视觉重要的网站任务生成分区设计参考图。
在实现前分析参考图中的可见文案、排版层级、间距、颜色、按钮、卡片、网格与区块顺序。
对不清晰的区块重新生成独立图或细节图，并保持原有设计语言后再实现前端。

输入

以视觉前端质量为重点的网站设计请求。
需要实现的页面或区块数量。
生成的设计参考图及其补充细节图。

输出

可读、可分析、便于实现的网站区块设计参考图。
基于参考图设计系统实现的前端。

限制与检查

该流程主要适用于视觉质量重要的网站设计任务。
主要为技术性任务、修复缺陷、已有精确设计系统或以结构为主的任务，可以采用直接编码优先。
当图像未清楚呈现细节时，仅补充存在歧义的细节。
确认视觉重要的网站任务在前端实现前已生成设计参考图。
确认每个请求区块使用了可读的大尺寸独立图，而非导致文字和布局难以分析的压缩拼图。
确认实现前已分析可见文案、排版关系、间距、颜色、按钮、组件与布局结构。
确认不清晰区块通过新生成的独立图或细节图处理，而不是裁剪旧图。
确认首屏保持干净、宽松、可读，并适合小型笔记本视口。

AI 搜索

搜项目、查事实、做对比，也能把复杂需求整理成可执行方案

从一个真实需求开始点击只会填入搜索框，你可以继续修改

合集应用场景项目类型 License 部署方式资源形态

项目详情

0