Sketch2Code 常见问题解答：新手必看的避坑指南
AI Insight
专栏作者
962 阅读
64 评论
? 刚接触 Sketch2Code，注册登录就卡壳？这几点必须注意！
很多新手一上来就栽在注册环节，其实真不怪你们 ——Sketch2Code 的登录入口藏得有点深。首先明确一点，它必须通过微软账号登录，别傻乎乎去搜 “Sketch2Code 注册页面”，直接去官网（https://sketch2code.azurewebsites.net）点击右上角 “Sign in”，用 Outlook、Hotmail 账号或者微软邮箱登录都行。
要是没有微软账号，当场注册一个也快，填个邮箱设个密码，验证一下手机号就成。但这里有个坑要注意：国内手机号可能收不到验证码。碰到这情况别慌，试试用 QQ 邮箱注册微软账号，有时候能绕过手机号验证；或者换个时间段再试，服务器抽风是常有的事。
登录进去后别急着上传草图，先看看右上角有没有 “Save” 按钮。如果没登录成功，画完的图是存不了的，刷新一下页面就没了，白忙活一场。所以第一步一定要确认登录状态，这点老手都栽过跟头，新手更得记牢。
?️ 草图怎么画才不会让 AI “瞎翻译”？这 3 个细节最容易翻车
很多人以为随便画两笔 AI 就能识别，结果出来的代码乱七八糟。其实 Sketch2Code 对草图的 “规范度” 有要求，不是真・随手画。线条一定要清晰连续，比如画按钮的时候，别用虚线或者断断续续的线条，AI 会把虚线当成多个元素，最后生成一堆零散的 div。
还有个高频问题：别在一张图里塞太多元素。新手总想着一次搞定整个页面，又是导航栏又是表单又是图片框，结果 AI 识别混乱，该对齐的没对齐，该分组的混在一起。建议分步骤来，先画个简单的登录页：一个标题、两个输入框、一个按钮，熟练了再增加复杂度。
颜色和标注也有讲究。虽然 AI 能识别黑白草图，但用不同颜色标注功能会更准：比如红色画按钮，蓝色画输入框，旁边用黑色笔写 “登录”“用户名”。亲测带文字标注的草图，生成的代码里 label 标签准确率能提高 60%。但别用太鲜艳的荧光笔，反光会让 AI 识别出错，普通马克笔就够了。
对了，画的时候尽量用直线和直角，少画曲线和斜线。AI 对圆弧、波浪线这些不规则形状的处理很差，比如想画个圆形头像框，最好用正方形代替，生成代码后自己再改 border-radius，比让 AI 直接画圆靠谱多了。
? 生成的代码没法用？别骂 AI，先检查这 5 个地方
“这代码跑起来全是错！”—— 天天有人在社区吐槽，但 90% 的问题不在 AI，在你没注意这些细节。首先看浏览器兼容性，Sketch2Code 生成的代码默认用的是最新 CSS 语法，比如 flex 布局的某些属性，在 IE 浏览器里根本不认。所以拿到代码后，先在 Chrome 或者 Edge 里运行，这两个浏览器对新语法支持最好，用 IE 打开崩了纯属自找的。
其次，检查是否缺少依赖文件。有时候生成的代码里会引用外部样式表或脚本，但网络不好的时候可能没加载进来，导致页面错乱。打开控制台（F12）看看 “Network” 面板，有没有红色的 404 错误，要是有，把缺失的 link 标签删掉，换成本地的 bootstrap 或者自己写基础样式，别指望 AI 给你搞定所有依赖。
还有个哭笑不得的情况：代码里有大量重复的 class 名。比如生成的按钮全是 “btn-1”“btn-2” 这种，根本分不清哪个对哪个。这时候别手动改 class 名，先把代码复制到 VS Code 里，用 “查找替换” 批量处理：选中重复的 class，按 Ctrl+H 统一改成 “login-btn”“submit-btn”，清晰多了。
新手最容易忽略的是响应式问题。Sketch2Code 生成的代码默认是固定宽度，在手机上看会溢出屏幕。解决办法很简单：在里加一句，再把容器的 width 改成 max-width，瞬间适配移动端，这步比骂 AI 没用实在多了。
最后，如果代码里有很多 “undefined” 或者空标签，大概率是图片拍摄角度有问题。拍草图的时候一定要正对着拍，别斜着拍，也别逆光。最好把草图放在白纸上，背景别太乱，拍的时候聚焦清晰，模糊的图片会让 AI 识别失败，自然生成无效代码。
? 想改代码却无从下手？3 个实用技巧让你不用重画
生成的代码不满意，没必要重新画草图，直接改代码效率更高。但新手对着一堆 div 往往不知道从哪改起。教个简单的：先找 id 和 class。Sketch2Code 生成的代码会给主要元素加 id，比如 “btn-submit”“input-username”，直接在 CSS 里用 id 选择器改样式，比从头写方便。
如果想换个布局，比如把垂直排列的按钮改成水平排列，不用重画。找到对应的 div 容器，把 display: block 改成 display: flex，再加个 justify-content: space-between，瞬间搞定。这招对导航栏特别管用，AI 默认生成的导航项是竖着排的，改个 display 属性就变横向。
还有个进阶技巧：用浏览器开发者工具实时调试。在生成的页面上按 F12，点击 “Elements” 面板，直接选中要改的元素，右边 Styles 里能实时改颜色、大小、边距，改满意了再把代码复制到本地文件里。比来回上传草图省太多时间，这才是用 Sketch2Code 的正确姿势 —— 把它当辅助工具，不是全自动生成器。
对了，如果生成的按钮没有点击效果，别怨 AI 没做交互。Sketch2Code 只负责生成 HTML 和基础 CSS，JavaScript 得自己加。简单的点击事件可以这么写：找到按钮的 id，在