设计界面

设计图转页面

根据参考图片或设计稿还原页面,关注布局、尺寸、字体和组件的视觉对应。

原技能标识:image-to-code来源核对:2026/9/9

这个技能可以帮你做什么

设计还原图片转网页
你需要提供
设计稿、目标框架与交互说明
预期得到
对应参考图的页面代码
使用条件
需要支持技能的 AI 助手,并按源项目说明准备运行环境。

安装这个技能

在电脑上的项目文件夹中打开终端,运行下方命令。

npx skills add https://github.com/leonxlnx/taste-skill --skill image-to-code

需要 Node.js 与可用的 npx 命令。按安装提示确认目录和助手,具体依赖见本页说明。

安装后,这样提需求

请使用 image-to-code 技能。根据这张页面设计图实现响应式前端,优先对齐布局、字号和间距,再补充交互。

替换成你自己的文件、项目或需求,再交给助手执行。