设计界面
设计图转页面
根据参考图片或设计稿还原页面,关注布局、尺寸、字体和组件的视觉对应。
这个技能可以帮你做什么
- 你需要提供
- 设计稿、目标框架与交互说明
- 预期得到
- 对应参考图的页面代码
- 使用条件
- 需要支持技能的 AI 助手,并按源项目说明准备运行环境。
安装这个技能
在电脑上的项目文件夹中打开终端,运行下方命令。
npx skills add https://github.com/leonxlnx/taste-skill --skill image-to-code需要 Node.js 与可用的 npx 命令。按安装提示确认目录和助手,具体依赖见本页说明。
安装后,这样提需求
请使用 image-to-code 技能。根据这张页面设计图实现响应式前端,优先对齐布局、字号和间距,再补充交互。
替换成你自己的文件、项目或需求,再交给助手执行。