image-to-code

@plugin87 · 收录于 1 周前 · 上游提交 3 周前

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

场景设计稿转代码前端开发 ui还原

适合你，如果经常需要将设计稿或截图快速转为前端代码。

/ 下载安装

https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/image-to-code ↗

/ 通过 npx 安装 校验哈希

npx oh-my-skill add plugin87/ux-ui-agent-skills/image-to-code

/ 通过 bash 安装

curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- plugin87/ux-ui-agent-skills/image-to-code

/ 已经装过?验证本机副本,不用重装

npx oh-my-skill verify plugin87/ux-ui-agent-skills/image-to-code

安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。

448GitHub stars

~589上下文体积 · 单文件

索引托管

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。

…