#设计稿

avatar
今天给大家分享，好习惯的重要性，是长期的价值体现！ 以前做设计的时候培养产品思维，设计稿图层命名都是按照树形结构 + 容器来做命名和区域定位的，一直到后面前端看到我的设计稿已经大概知道页面布局长什么样子了。最近在写一些视觉效果的 Prompt 来支撑 Artifact，这个思路已经完全被复用了，而且，产出效果的确不错，不过我工程化的确是不行，导致有些细节还没做到那么好！可以分享给大家玩玩，其实，就是按照树形结构 + 容器定位 + 精准描述来实现！ 图一：我的结构分享 图二：设计稿样式 图三：响应式样式 图四：最终样式 Prompt： 我需要你帮我设计一套 Slide 页面，用来做视觉化展示，具体要求如下，你是一名国际顶尖设计师，你有严格的审美和视觉需求： 1. 永久禁止使用初始渐变色（紫色渐变） 2. 非响应式：页面比例 16:9 3. 响应式：展示背景图 20% #000000 蒙层 和 主标题 副标题 概览（区域居中，独立写样式） 4. 具体设计细节（只针对该主体样式） 4.1 16:9 或 1920*1080px 4.2 字体引用 Google Font Lexend 系列 4.3 页面左侧：页面 50% 为图片展示区域（图片根据区域缩放，居中展示），该区域在图片上覆盖 20% #000000蒙层；主标题 Lexend Bold 100px 根据左侧区域宽度针对字体换行；副标题：Lexend Bold 36px；概要：Lexend Regular 32px；主标题、副标题、概览针对左侧区域上 左间距比例一致且对上居中，内容输入以顶端对齐，向下输入！ 4.4 右侧区域：背景颜色 #FFFFFF 上 左 间距 80px；主标题：Lexend Bold 72px；副标题：Lexend Bold 32px 距离主标题间距 40px；概览：Lexend Regular 24px 距离副标题间距 20px ；正文：概览：Lexend Regular 20px，距离主标题间距 20px；段落统一且适度间距；所有内容居左距离一致。 4.5 右侧底部：距离正文末尾 48px，居左 80px，展示翻页图标：向左翻页（图标） 页码 向右翻页（图标） 5. 图标引用引用 Lucide（CDN） 6. 左侧图片使用请使用占位符，不受到蒙版影响，我需要自行更换，实现图片位置拖拽。
#产品思维 #设计稿 #Prompt #视觉效果 #工程化
avatar
今天给大家分享，好习惯的重要性，是长期的价值体现！ 以前做设计的时候培养产品思维，设计稿图层命名都是按照树形结构 + 容器来做命名和区域定位的，一直到后面前端看到我的设计稿已经大概知道页面布局长什么样子了。最近在写一些视觉效果的 Prompt 来支撑 Artifact，这个思路已经完全被复用了，而且，产出效果的确不错，不过我工程化的确是不行，导致有些细节还没做到那么好！可以分享给大家玩玩，其实，就是按照树形结构 + 容器定位 + 精准描述来实现！ 图一：我的结构分享 图二：设计稿样式 图三：响应式样式 图四：最终样式 Prompt： 我需要你帮我设计一套 Slider 页面，用来做视觉化展示，具体要求如下，你是一名国际顶尖设计师，你有严格的审美和视觉需求： 1. 永久禁止使用初始渐变色（紫色渐变） 2. 非响应式：页面比例 16:9 3. 响应式：展示背景图 20% #000000 蒙层 和 主标题 副标题 概览（区域居中，独立写样式） 4. 具体设计细节（只针对该主体样式） 4.1 16:9 或 1920*1080px 4.2 字体引用 Google Font Lexend 系列 4.3 页面左侧：页面 50% 为图片展示区域（图片根据区域缩放，居中展示），该区域在图片上覆盖 20% #000000蒙层；主标题 Lexend Bold 100px 根据左侧区域宽度针对字体换行；副标题：Lexend Bold 36px；概要：Lexend Regular 32px；主标题、副标题、概览针对左侧区域上 左间距比例一致且对上居中，内容输入以顶端对齐，向下输入！ 4.4 右侧区域：背景颜色 #FFFFFF 上 左 间距 80px；主标题：Lexend Bold 72px；副标题：Lexend Bold 32px 距离主标题间距 40px；概览：Lexend Regular 24px 距离副标题间距 20px ；正文：概览：Lexend Regular 20px，距离主标题间距 20px；段落统一且适度间距；所有内容居左距离一致。 4.5 右侧底部：距离正文末尾 48px，居左 80px，展示翻页图标：向左翻页（图标） 页码 向右翻页（图标） 5. 图标引用引用 Lucide（CDN） 6. 左侧图片使用请使用占位符，不受到蒙版影响，我需要自行更换，实现图片位置拖拽。
#产品思维 #设计稿 #Prompt #视觉效果 #Artifact