设计提示词 持续更新
聚焦创意设计领域，包含 UI/UX 原型设计等模块。通过风格迁移指令和参数化约束，实现 AI 辅助完成 Logo 设计、海报生成、三维建模提示等跨媒介创作任务。
Web 系统原型设计
text
我想开发一个 {Xxx系统}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原界面可以直接用于开发：
1、用户体验分析：先分析这个系统的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实运维系统设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4、HTML 原型实现：使用 HTML + Tailwind CSS (或 Bootstrap) 生成所有原型界面，并使用 FontAwesome (或其他开源 UI 组件) 让界更加精美、接近真实的系统设计。
拆分代码文件，保持结构清晰：
5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺示在 index 页面中，而不是跳转链接。
- 使用真实的 UI 图片，而非占位符图片 (可从 Unsplash、Pexels、Apple 官方 UI 资源中选择)。
请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。小程序/APP 原型设计
提示词 1
text
你是一名精通 UI 设计和产品规划的全栈工程师，你的目标是完成一个"Xxx"iOS App 的开发。
你的核心任务是输出一套完整的APP原型图（HTML页面形式）来辅助后续的开发任务。
核心执行点：
- 明确功能与页面： 请你构思并确定"Xxx"App的核心功能模块。基于这些模块，规划出需要设计的HTML页面清单。
- 产品与UI/UX设计：
- 以产品经理的视角规划APP的关键功能、页面流程和交互逻辑。
- 以设计师的视角输出符合现代iOS App风格的、美观且用户友好的UI/UX。
技术规范：
- 使用 HTML5、Font Awesome、Tailwind CSS 和必要的 JavaScript（用于基础交互）。
- 图片素材请使用 Unsplash。
- 代码应简洁，注重可读性。
输出要求：
- 创建一个包含多个 HTML 页面的原型。
- 主页面命名为 index.html，它可以整合或跳转到其他页面。
- 非主页面HTML文件使用其对应的核心功能名称进行命名（英文，例如 courses.html, profile.html）。
- 每个页面均需采用 iOS App 的风格生成。
- index.html 中，每行展示两个主要功能模块的入口或页面预览。
- 所有输出（包括代码内注释和页面文本）永远用简体中文。
- 请以顶级UX的眼光和审美标准，创造令人满意的设计。
请直接开始设计并输出上述要求的HTML原型页面代码，从 index.html 开始，然后是其他你规划的核心功能页面。提示词 2
text
我想开发一个{类似Xxx的App}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰：
5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
- 真实感增强：界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。
- 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
- 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。提示词 3
text
你是一位全栈工程师，同时精通产品规划和UI设计。我现在想要开发一个“Xxx”i0SApp，需要输出一套完整的APP原型图，请按照下面的要求执行：
- 模拟真实用户使用 Xxx 类APP的真实场景和需求；
- 结合用户需求，以产品经理的视角去规划APP的功能、页面和交互;
- 结合产品规划，以设计师的视角去输出完整的UI/UX;引入tailwindcss来完成，而不是变成style样式，图片使用unsplash；
- 以上全部页面都在同一个html文件中展示。提示词 4
text
站在产品经理和设计师的角度，使用HTML设计一个 Xxx iOS应用原型图。注意，你需要在一个页面上创建所有必要的界面原型，设计应精美、完整，包含所有状态和交互细节，可使用开源图标库丰富视觉元素。并能直接供开发团队参考实现。提示词 5
text
站在产品经理和设计师的角度，使用HTML设计一个Xxx iOS应用原型图。注意，设计应精美、完整，包含所有状态和交互细节，可使用开源图标库丰富视觉元素。并能直接供开发团队参考实现。
要求：
每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。图片设计
知识卡片
text
# 知识卡片设计制作指南##
🎨 视觉设计规范
### 配色方案
-**背景渐变**：绿色渐变`#20BF7A`→`#1A9B6B`（135度线性渐变）
-**主内容区**：白色圆角背景`#FFFFFF`，圆角半径 20px
-**装饰元素**：使用主绿色`#20BF7A`作为强调色
### 布局结构
-**卡片尺寸**：1200px × 600px（标准比例 2:1）
-**整体布局**：左右分栏设计，Grid布局`1fr 1fr`
-**内边距**：外层40px，内容区32px
-**栏间距**：40px
### 左侧区域设计
-**主标题**：48px粗体，白色文字
-**副标题**：20px常规字重，白色90%透明度
-**核心理念框**：
- 背景：`rgba(255, 255, 255, 0.15)`+ 玻璃模糊效果
- 边框：2px`rgba(255, 255, 255, 0.2)`
- 圆角：16px
- 内边距：24px
-**引用区**：左侧4px白色40%透明度竖线装饰
### 右侧区域设计
-**背景**：纯白色圆角背景
-**列表项间距**：24px垂直间距
-**第一项装饰**：绿色虚线框（8px-4px虚线模式）+ 5%绿色背景
-**圆形数字标签**：
- 尺寸：32px直径
- 背景：绿色渐变
- 文字：14px粗体白色
-**文字层次**：标题16px粗体 + 描述14px常规
## 📋 复制功能技术实现
### Canvas绘制核心要点
#### 1. Canvas初始化
```javascript
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 1200;
canvas.height = 600;
```
#### 2. 圆角矩形绘制（兼容性函数）
```javascript
function drawRoundRect(ctx, x, y, width, height, radius) {
ctx.beginPath(); ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
}
```
#### 3. 状态管理
-使用`ctx.save()`和`ctx.restore()`管理绘制状态
-透明度设置要用状态保存包裹
-避免状态污染导致的渲染问题
#### 4. 渐变绘制
-**背景渐变**：`createLinearGradient(0, 0, 1200, 600)`
-**数字圆圈渐变**：`createRadialGradient(centerX, centerY, 0, centerX, centerY, 16)`
#### 5. 文字渲染规范
-**字体选择**：使用`Arial, sans-serif`确保跨平台兼容
-**对齐方式**：明确设置`textAlign`和`textBaseline`
-**长文本处理**：实现智能换行，避免文字超出边界
#### 6. 虚线绘制
```javascript
ctx.setLineDash([8, 4]);
// 设置虚线
drawRoundRect(ctx, x, y, width, height, radius);ctx.stroke();
ctx.setLineDash([]); // 重置为实线
```
#### 7. 图片导出
```javascript
canvas.toBlob(async (blob) => {
const item = new ClipboardItem({ 'image/png': blob });
await navigator.clipboard.write([item]);
}, 'image/png', 1.0); // 最高质量导出
```
### 关键技术要点
#### ❌ 避免的问题
1.**不要使用现代Canvas API**：如`roundRect()`，兼容性差
2.**不要依赖高DPI缩放**：会导致坐标系混乱
3.**不要使用复杂字体**：如`-apple-system`，可能渲染失败
4.**不要忽略状态管理**：透明度等属性会累积影响
#### ✅ 必须遵循的规则
1.**手动绘制圆角**：使用`quadraticCurveTo`方法
2.**明确状态边界**：每个复杂绘制用`save/restore`包裹
3.**测量文本宽度**：长文本要检查并换行
4.**统一字体策略**：全部使用 Arial 字体
5.**完整错误处理**：捕获并显示具体错误信息
## 🔧 交互功能设计
### 复制按钮
-**位置**：卡片右侧，垂直居中
-**样式**：60px圆形，绿色渐变背景
-**状态反馈**：
- 默认：📋 图标
- 成功：✓ 图标 + 绿色背景
- 失败：✗ 图标 + 红色背景
- 状态持续2秒后恢复
### 状态消息
-**位置**：按钮右侧
-**样式**：黑色半透明背景 + 白色文字
-**动画**：淡入淡出效果
-**内容**：
- 成功："复制成功！"
- 失败："复制失败，请重试"
## 📝 内容组织规范
### 左侧内容结构
1.**主标题**
- 知识主题名称
2.**副标题**
- 完整名称或英文名
3.**核心理念框**
- 标题："核心智慧/核心理念/核心要点"
- 内容：一句话概括核心思想
4.**引用语句**
- 经典名言或重要表述
### 右侧维度展开
-**固定5个维度**，每个维度包含：
- 圆形数字标签（1-5）
- 维度标题（4-6个字）
- 一句话描述（不超过25字）
-**第一个维度**：添加虚线框装饰突出重要性
### 文案撰写原则
-**简洁精炼**：每个维度一句话概括
-**层次清晰**：从基础到应用，逻辑递进
-**实用导向**：结合现代意义和实际应用
-**语言统一**：保持专业性与可读性平衡
## 🚀 实施检查清单
### 开发前确认
- [ ] Canvas兼容性函数已定义
- [ ] 所有绘制方法使用手动圆角
- [ ] 字体统一设置为Arial
- [ ] 状态管理策略明确
### 测试验证
- [ ] 复制功能在不同浏览器测试
- [ ] 图片完整性检查（左右两侧内容）
- [ ] 文字清晰度验证
- [ ] 交互反馈正常工作
### 最终交付
- [ ] 卡片内容完整准确
- [ ] 视觉效果符合设计规范
- [ ] 复制功能稳定可用
- [ ] 代码注释清晰完整
---
**重要提醒**：严格按照此指南实施，特别是Canvas绘制部分的技术要点，确保每次都能成功复制出完整的高质量卡片图片。输出风格稳定的知识卡片。
text
请你记住：这个卡片我是满意的。请记录下现在的风格，以后我再让你做知识卡片，你需要参考当前卡片的风格。使用当前卡片的“一键复制卡片”功能，更新你的记忆。