设计稿截图转前端代码提示词（先拆布局结构与设计规范，再写代码，最后逐项对照还原度）
拿到设计稿截图或一张参考网页截图，想快速做成前端页面时用：上传图片给支持识图的模型，让它先分析布局结构、提取颜色字号间距等设计规范，确认后再生成响应式代码，并标出它看不清、需要你确认的细节。
通用大模型 对话模型通用
我上传了一张设计稿截图，请把它实现为前端页面。你是一名对像素和细节很敏感的前端工程师，请分步进行，不要一上来就写代码。 - 技术栈：[技术栈]（例：React + Tailwind、Vue + 普通 CSS、纯 HTML） - 页面用途：[如 SaaS 产品落地页首屏] - 需要适配的屏幕：[如桌面端为主，同时适配手机] - 可以使用的资源：[如图标库名称、品牌色色值、字体] 第一步：分析（输出后停下等我确认） 1. 布局结构：把页面从上到下划分为区块，说明每个区块的布局方式（如左右两栏、三列卡片网格、居中单列），以及区块内部的元素层级。 2. 设计规范提取：主色、辅助色、文字色、背景色（给出估计的色值）；标题、正文、说明文字的字号与字重；常用间距的规律（是否接近 4 或 8 的倍数）；圆角、阴影、边框。 3. 不确定项：截图中看不清或无法判断的地方（如精确的色值、文字内容、图片资源、悬停效果、手机端如何排列），列成问题。 第二步：编码（我确认后进行） 1. 先把设计规范定义成变量或主题配置，再写组件，组件中引用变量而不是到处写死数值。 2. 使用语义化标签；图片设置替代文本与尺寸；按钮和链接区分正确。 3. 响应式：说明各断点下布局如何变化。 4. 图片和插画用占位图并注明尺寸，图标使用我指定的图标库。 5. 文字内容照截图填写，看不清的用明显的占位文字。 第三步：自查 对照截图列出还原度检查表：区块 | 已还原 | 差异 | 原因（如缺少资源、需要确认）。
高亮处换成你自己的内容：[技术栈]、[如 SaaS 产品落地页首屏]、[如桌面端为主，同时适配手机]、[如图标库名称、品牌色色值、字体]
ChatGPT Plus 充值
已被复制 0 次
使用说明
怎么填变量：这条提示词需要配合上传图片使用，要选支持图片输入的模型。[可以使用的资源] 里给出品牌色和字体，生成的结果会准确得多，否则 AI 只能从截图估计色值，难免有偏差。
常见坑：
- 直接让 AI「照图写代码」，生成的结构常常是一堆绝对定位或写死的像素值，换个屏幕就乱了。先分析布局结构，再写代码，质量明显更好。
- 截图压缩后颜色会失真，AI 估计的色值只能作为参考，最终以设计规范或设计工具中的标注为准。
- 截图看不出交互状态（悬停、点击、加载、空数据），需要另外补充说明。
追问技巧：生成后把渲染效果截图和原设计稿一起发给 AI，问「对比两张图，列出差异最大的 5 处并修改」，可以迭代几轮逐步逼近。
示例输出
示例，仅供参考（第一步节选）
布局结构：
- 顶部导航：左侧 Logo，中间 4 个菜单项，右侧「登录」文字按钮和「免费试用」实心按钮；
- 首屏：左右两栏，左栏为大标题、副标题和两个按钮，右栏为产品界面截图，带浅色阴影；
- 客户标志栏：一行 6 个灰度 Logo，均匀分布。
设计规范（估计值）：
| 项目 | 值 |
|---|---|
| 主色 | 约 #4F46E5（按钮、链接） |
| 大标题 | 约 48px，粗体，行高约 1.2 |
| 区块上下间距 | 约 96px |
| 卡片圆角 | 约 12px |
需要确认：
- 主色的准确色值？
- 手机端首屏右侧的截图是放在文字下方，还是隐藏？
- 「免费试用」按钮的悬停颜色？
同款作品
用这条提示词做出来的作品；原作者会因此获得积分
还没有同款，来做第一个。
0 条评论
还没有评论，来抢沙发～