社区案例

Claude Design 同步 UI 模型

生成一个精致的 SaaS 风格模型，展示设计编辑器将众筹页面与 Claude Code 终端同步的场景。

しょうへい｜デイトラ代表 / AI経営顧問 · 2026-06-18 · 约 4 分钟

参考效果：Claude Design 同步 UI 模型 — 社区作者发布的参考画面 · しょうへい｜デイトラ代表 / AI経営顧問

编辑提示词

完整提示词

目标：创建一个精致的 16:9 宽屏产品发布模型，展示 Claude Design 和 Claude Code 在众筹网页设计上的协同工作。

画布：1200×675 横向构图，暖珊瑚橙色背景填满整个画面。中心放置一个带有柔和阴影的奶油白色设计画布，左侧编辑器侧边栏、右侧捐赠卡片和一个浮动终端窗口部分遮盖画布。

布局：使用 4 个核心界面元素：1 个左侧设计编辑器面板、1 个中央网页项目、1 个右侧捐赠进度卡片，以及右上角 1 个浮动深色终端窗口。项目应位于面板后方，终端窗口覆盖其右上角区域。

左侧编辑器面板：一个圆角灰白色侧边栏，标题为“Playground Crowdfunding Page”，最左侧有一个小型圆形应用图标，最右侧有一个铃铛图标。下方显示一行包含 3 个操作的按钮：“Edit”、“Discard”和一个珊瑚色“Save”按钮。接着显示 3 个标签页：“Simple”、“Pro”、“Code”，其中“Simple”为激活状态。包含一个紧凑的工具栏，显示 9 个图标：选择指针、光标、矩形、网格/十字、圆形、文本 T、铅笔、撤销、重做。添加文本、排版、外观和边框的标签控件。排版控件应包括字体“Poppins”、字号“36 px”、颜色“#1A1714”、字重“Bold”、斜体、下划线、删除线、对齐图标、行距“1.35”、大小写“none”和字间距。外观控件应包括背景“None”、圆角“0px”、溢出“visible”、不透明度“1”和 z 轴“auto”。

中央网页项目：网页顶部显示一个由 3 个彩色圆点（绿、黄、红）组成的小图标，后跟站点名称 {argument name="organization name" default="Maple Grove Park"}。下方放置一个浅绿色胶囊标签，内含一个绿色圆点和文本 {argument name="project label" default="A neighborhood project on Elm Street"}。主标题必须大、粗、深绿黑色，并处于激活选中状态，带有细蓝色边框和 4 个蓝色方形角点。标题文本：{argument name="headline text" default="Let's build a playground our kids will never forget."} 像图片中那样将其分为四行。标题下方显示较小的灰色正文，开头为“Maple Grove's old play structure came down last spring. Together, we can replace it with something”。

右侧捐赠卡片：一个带有柔和阴影的白色圆角卡片，右边缘略微裁剪。包含 4 个可见内容项：一个显示 {argument name="funding amount" default="$61,240"} 的选中金额文本框（带有蓝色虚线选中边框）、一个从绿色到亮绿色的水平进度条（剩余部分为浅灰色）、一行状态栏（左侧为“72% funded”，右侧为“312 neighbors”），以及一个大的圆角绿色行动号召按钮，文字为“Chip in today”。

浮动终端窗口：在右上角添加一个带有圆角和阴影的黑色 macOS 风格终端。具有 3 个交通灯圆点：红、黄、绿。窗口标题行显示“temp — claude — 64x22”。左侧显示一个像素风橙色 Claude 风格吉祥物图标。终端文本应包括“Claude Code v2.1.176”、“claude-opus-4-8”、“~/temp”、“? for shortcuts”，以及一行命令行“/design-sync Push my design components to Claude Design”，末尾带有光标。使用等宽终端字体。

视觉风格：现代 SaaS 界面截图，简洁的 Figma 风格设计控件，奶油白，深森林绿文字，珊瑚色强调背景，柔和阴影，圆角，清晰易读的 UI 文字，高端演示 Slides 美学。

约束：保持构图宽敞且整洁，保留上述指定的精确数量，不要添加人物，不要添加额外的面板，不要包含任何水印。

带入创作工作台

仅带入描述，不会自动生成。参考图与编辑模式请先上传或选中原图。

来源与说明

由しょうへい｜デイトラ代表 / AI経営顧問发布，经 YouMind 收录。提示词与图片权利归原作者及相应平台。

此案例需要参考图片，请在创作工作台中上传后再使用。

查看原始来源 ↗ · 作者主页

使用示例 →

把这个思路，变成下一次创作。

在 RonasAI 中开始创作 ↗