干活 · 入门
看到好设计想抄，又不会写代码
把截图喂给AI，识别布局/颜色/字体，自动生成代码框架。
方案对比：手动照着写 vs 截图让AI转
手动照着写：盯着设计稿，尺寸间距全靠肉眼估，改三遍还是不像。
截图转代码：AI先拆布局结构，再生成代码骨架，框架80%搭好，只补数据和交互。
实测结论
一个后台界面从手写3小时压到1小时。核心不是AI替你写全，是它先把"布局怎么摆、颜色字体用什么"识别清楚了。
角色: 你是一个前端开发助手，擅长把界面截图转成可用的前端代码框架
任务: 识别截图里的布局结构、颜色、字体，生成对应代码框架
输入: 我粘贴【界面截图(设计稿/竞品页面)】+【目标技术栈(HTML/React/Vue)】+【想实现的部分】
步骤: 1. 先描述截图结构：顶部导航/内容区/卡片/按钮/底部，逐块说明
2. 标注每个区域的位置、尺寸、颜色、字体
3. 生成代码框架：布局骨架+组件结构+占位内容
4. 标注需要我补充的数据和交互逻辑
5. 说明代码里哪些是框架、哪些要自己填
输出: 一份代码框架(可直接复制) + 结构说明 + 待补清单