AI提示词大全 - IT行业

# 角色：[专业身份]
你是一位资深的[专业领域]专家，擅长使用HTML、CSS和JavaScript创建[具体类型]的内容。
 
## 任务概述
请为我设计并创建一个[具体描述内容类型和主题]。这个[内容类型]应该[描述目标和用途]。
 
## 内容规划
请按照以下步骤规划内容：
1. [思考/分析]：[详细描述思考过程要求]
2. [方案设计]：[详细描述设计规划要求]
3. [实现细节]：[详细描述实现步骤要求]
 
## 设计风格
- 整体风格：[描述整体设计风格、参考风格]
- 配色方案：[描述配色需求，可指定具体色值或风格]
- 字体选择：[描述字体需求，推荐字体类型]
- 视觉元素：[描述视觉元素要求，如图标、插图等]
- 交互效果：[描述所需的交互、动画效果]
 
## 技术要求
- 开发框架：[指定HTML/CSS框架，如TailwindCSS、Bootstrap等]
- 脚本要求：[指定JavaScript库/框架，如React、Vue等]
- 响应式要求：[描述不同设备上的表现要求]
- 性能考虑：[描述性能优化要求]
 
## 资源配置
- 图片资源：[指定图片来源，如Unsplash、自定义图片等]
- 图标库：[指定图标库，如Font Awesome、Material Icons等]
- 外部引用：[指定需要引用的外部资源]
 
## 交付标准
- 代码质量：[描述代码质量要求，如注释、组织等]
- 兼容性：[描述兼容性要求]
- 文件格式：[描述交付文件格式]
 
## 特殊要求
[任何其他特殊要求或注意事项]
 
## 参考示例
[想要控制AI有稳定的输出，最好是把你找到的案例以图片或HTML源代码的形式附在提示词里让AI学习]
 

你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码：
 
## 产品需求：
1. 应用类型：显化应用
2. 核心模块：
   
3. 交互要求：
   • 全矢量图形界面
   • 动态数据可视化动画
   • 符合Figma设计规范
   • 三级明暗层级关系
 
## 技术规格：
▸ 单个HTML每行为6个横向排列的页面预览，可以有多行；
▸ 画板尺寸：375x812（带1px描边模拟手机边框）
▸ 必须包含：
   - 矢量图标系统（使用<symbol>定义）
   - 动态折线图（stroke-dasharray动画）
   - 卡片悬浮效果（通过filter实现）
   - 图片占位使用<image>标签外链unsplash
## 视觉风格
1. 视觉风格：
- 渐变色主题：采用柔和又充满能量的渐变色（如紫色+粉色），突出正能量和神秘感。
- 光效与粒子特效：在背景或交互中加入动态光点、粒子流动效果，营造出一种显化的“神奇力量”。
- 圆润设计：按钮、卡片、图标等设计成圆角样式，传递温柔和包容感。
- 留白与简约：界面保持简洁，使用留白让用户专注于显化目标和记录。
2. 字体风格：
- 使用简约无衬线字体（如思源黑体、Poppins、Roboto），保证清晰易读。
- 重要的显化句子可以使用手写风或装饰性字体，增强仪式感。
3. 排版层次：
- 突出核心内容（如每日弹幕、目标进展），并通过字体大小、颜色区分主次信息。
- 每个模块之间保持适当留白，避免界面过于拥挤。
 

你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码：
## 产品需求：
应用类型：显化应用
### 核心模块：
#### 基础功能
（填写你的功能）
 
 
## 技术规格：
▸ 单个HTML每行为6个横向排列的页面预览，可以有多行；代码需要包含所有功能页面；
▸ 画板尺寸：375x812（带1px描边模拟手机边框）；
▸ 必须包含：
矢量图标系统（使用<symbol>定义）
动态折线图（stroke-dasharray动画）
卡片悬浮效果（通过filter实现）
图片占位使用<image>标签外链unsplash
## 新视觉风格：
玻璃拟态背景：
使用半透明磨砂玻璃质感，背景模糊处理，搭配柔和的光影效果，营造未来感和高级感。
低饱和配色：
主色调采用温暖的米白色背景，搭配深色文字（如深灰），辅以橙色作为点缀色，整体配色高级且富有层次感。
极简字体排版：
使用大字号的极简无衬线字体（如思源黑体、Roboto、Poppins），信息层次明确，通过字体大小、粗细与色彩区分主次信息，增强视觉冲击力。
表单优化：
表单及输入框去除边框线，仅保留流畅圆角背景，减少视觉噪音，提升整体界面的简洁与精致感。
交互动效：
按钮与卡片加入呼吸感动效（微妙的阴影或透明度变化），以及轻微悬浮感（hover时微微上浮），提升UI的高级质感与互动趣味性。
请基于上述优化后的提示词，设计出符合要求的高品质UI方案，并最终生成完整的HTML代码。
 

 
你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码：
## 产品需求：
应用类型：显化应用
 
## 技术规格：
单个HTML每行为4个横向排列的页面预览，可以有多行；代码需要包含所有功能页面；
▸ 画板尺寸：375x812（带1px描边模拟手机边框）；
▸ 必须包含：
矢量图标系统（使用<symbol>定义）
动态折线图（stroke-dasharray动画）
卡片悬浮效果（通过filter实现）
图片占位使用<image>标签外链unsplash
## 新视觉风格：轻拟物设计（Neumorphism）
1. 视觉特性
1.1 光影效果
双重阴影：
外阴影（Outer Shadow）：模拟元素“浮起”的效果，通常使用浅色背景下的深灰色阴影。
内阴影（Inner Shadow）：模拟元素“凹陷”的效果，常用于输入框、按钮等。
光源方向统一：
通常光源从左上角照射，确保所有元素的阴影方向一致。
柔和过渡：
阴影和高光的边缘模糊处理，避免生硬的对比，增强自然感。
1.2 色彩搭配
背景颜色：
以浅色为主（如白色、浅灰、淡蓝），营造干净、柔和的视觉效果。
元素颜色：
元素通常使用与背景相近的颜色，保持整体统一感。
点缀颜色：
使用少量高饱和度颜色（如橙色、红色、蓝色）突出关键信息或交互按钮。
渐变色：
在某些情况下，使用单色渐变为背景或元素添加微妙的立体感。
1.3 材质感
柔和的质感：
元素看起来像是“软塑料”或“橡胶”材质，带有一定的触感。
半透明效果：
某些区域（如卡片或浮层）可以使用半透明设计，增强层次感。
2. 元素设计
2.1 按钮
浮起按钮：
通过外阴影让按钮看起来从背景中“浮起”，适合主要交互。
凹陷按钮：
通过内阴影让按钮看起来“嵌入”背景，适合被动状态或次要功能。
交互反馈：
按下按钮时，阴影变化模拟按钮被按下的物理反馈。
2.2 输入框
凹陷设计：
输入框通常采用内阴影，模拟“嵌入”效果。
圆角边框：
边角圆润，与整体风格一致。
占位符文字：
使用浅灰色文字，柔和且不突兀。
2.3 卡片
模块化布局：
卡片式设计分区清晰，适合展示复杂信息。
浮起效果：
卡片通过外阴影与背景分离，增强层次感。
渐变装饰：
某些卡片可能使用渐变或光影装饰，增加视觉吸引力。
2.4 图标
极简设计：
图标线条简洁，通常与背景融为一体。
立体感：
图标通过光影处理，呈现浮起或凹陷效果。
一致性：
图标风格与文字、按钮保持一致，避免风格冲突。
2.5 数据可视化
立体图表：
饼图、柱状图等数据可视化元素通常带有光影效果，增强空间感。
柔和渐变：
数据图表的颜色使用渐变或低饱和度色彩，避免刺眼。
动态效果：
数据加载或更新时，使用缓慢的动画过渡，提升科技感。
3. 文字设计
3.1 字体
无衬线字体：
使用现代化的无衬线字体（如Roboto、SF Pro），增强简洁和科技感。
轻量化字体：
以Light或Regular权重为主，避免厚重感。
3.2 字体颜色
柔和对比：
文字颜色通常为深灰色或浅灰色，与背景形成柔和对比。
点缀文字：
重要文字或数字使用点缀色（如橙色、蓝色）突出显示。
渐变文字：
在标题或装饰性文字中，可能使用渐变效果。
3.3 排版
标题与正文区分：
标题字体较大且稍粗，正文字体较小且轻薄。
留白充足：
文字与其他元素之间保持足够的间距，避免界面拥挤。
4. 动效设计
4.1 按钮交互
点击按钮时，阴影和高光动态变化，模拟按压效果。
4.2 加载动画
使用柔和的渐变或光影移动，避免生硬的加载效果。
4.3 数据动态更新
数据变化时，数字滚动或图表缓慢过渡，增强科技感。
5. 布局设计
5.1 模块化布局
界面分区清晰，常用卡片式设计展示信息。
5.2 留白设计
界面中留白充足，突出主要内容，避免信息过载。
5.3 响应式设计
界面适配不同屏幕尺寸，确保在手机、平板和桌面端都有良好的体验。
 

你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码：
## 产品需求：
应用类型：显化应用
### 核心模块：
#### 基础功能
 
 
## 技术规格：
单个HTML每行为4个横向排列的页面预览，可以有多行；代码需要包含所有功能页面；
▸ 画板尺寸：375x812（带1px描边模拟手机边框）；
▸ 必须包含：
矢量图标系统（使用<symbol>定义）
动态折线图（stroke-dasharray动画）
卡片悬浮效果（通过filter实现）
图片占位使用<image>标签外链unsplash
## 新视觉风格：暗黑风设计
1. 色彩运用
深色背景：以黑色或深灰色为主背景，营造神秘感和高对比度。
点缀色：使用高饱和度的点缀色（如红色、紫色、蓝色或金色）来突出重要信息或交互元素。
低饱和度：整体色彩多偏向冷色调，保持低饱和度，避免视觉疲劳。
2. 光影效果
渐变和霓虹光效：常用柔和的渐变和霓虹光效，增加未来感和科技感。
阴影与高光：通过精致的阴影和高光处理，营造立体感和质感。
3. 字体设计
现代感字体：多使用无衬线字体，线条简洁，增强科技与未来感。
对比强烈：字体大小对比明显，标题通常较大且醒目。
字母间距：适当拉宽字母间距，增加冷峻感。
4. 图标与元素
极简设计：图标和装饰元素多为线性或几何形状，避免复杂的细节。
金属质感：部分图标可能使用金属或镜面效果，增加高级感。
动态效果：常用微交互动效或粒子效果，提升视觉吸引力。
5. 布局风格
对称与留白：布局讲究对称性和留白，突出核心内容。
模块化设计：内容分区清晰，模块之间界限明确。
深邃空间感：通过光影和层次感，营造空间纵深。
6. 主题氛围
神秘与冷峻：整体氛围偏向冷峻、克制，避免过于活泼或鲜艳。
未来科技感：结合赛博朋克、太空或机械元素，增加未来感。
7. 用户体验
高对比度：深色背景与亮色文字的对比，确保内容清晰可读。
舒适的暗色调：适合夜间使用，减少对眼睛的刺激。
 

你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码：
## 产品需求：
应用类型：显化应用
### 核心模块：
 
## 技术规格：
单个HTML每行为4个横向排列的页面预览，可以有多行；代码需要包含所有功能页面；
▸ 画板尺寸：375x812（带1px描边模拟手机边框）；
▸ 必须包含：
矢量图标系统（使用<symbol>定义）
动态折线图（stroke-dasharray动画）
卡片悬浮效果（通过filter实现）
图片占位使用<image>标签外链unsplash
## 新视觉风格：3D风设计（Neumorphism）
1. 立体感与空间感
真实的深度效果：利用阴影、光影和透视原理，营造出强烈的空间层次感。
分层设计：界面中的元素分层摆放，前景、背景和中间内容清晰分离，突出层次感，结合简洁的3D效果与2D风格图标。
Z轴设计：不仅关注X/Y轴的平面布局，还注重Z轴的深度表现。
2. 光影与材质
动态光影：通过实时光照和阴影变化，增强画面的真实感。
材质细节：使用仿真的材质效果（如金属、玻璃、木纹等），让元素看起来更加真实。
反射与折射：部分设计中加入反射、透明和折射效果，提升科技感和视觉冲击力。
3. 色彩与渐变
丰富的渐变色：渐变色广泛应用于背景或元素上，增强立体感和未来感。
亮暗对比：通过明暗对比突出重点，增加视觉冲击力。
真实色彩还原：色彩搭配更加贴近自然世界的真实效果。
4. 动态与交互
微交互：3D元素在用户操作时会有轻微的动态反馈，如旋转、缩放或弹跳。
动画效果：常见的3D动画包括元素的翻转、旋转、移动等，提升趣味性。
沉浸式体验：通过3D场景的动态变化，让用户感觉自己置身于一个虚拟空间中。
5. 图标与元素
立体化图标：图标和按钮设计成3D样式，增强视觉冲击力。
仿真物体：界面中的元素可能直接模仿真实物体，例如3D模型的开关、按钮等。
粒子效果：常用粒子动态效果（如漂浮、散射），让界面更具科技感和未来感。
6. 布局与导航
模块式布局：内容分区清晰，模块之间通过空间感隔离。
旋转视角：部分APP允许用户通过滑动或点击改变视角，探索3D空间。
场景化设计：界面可能以一个完整的3D场景呈现，用户在其中进行交互。
3D风格的文字通过光影、渐变、纹理和透视效果营造出立体感，呈现出具有深度、层次和空间感的视觉效果。
 

你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码，APP中的文字为中文：
## 产品需求：
应用类型：显化应用
### 核心模块：
#### 基础功能
 
## 技术规格：
单个HTML每行为4个横向排列的页面预览，可以有多行；代码需要包含所有功能页面；
▸ 画板尺寸：375x812（带1px描边模拟手机边框）；
▸ 必须包含：
矢量图标系统（使用<symbol>定义）
动态折线图（stroke-dasharray动画）
卡片悬浮效果（通过filter实现）
图片占位使用<image>标签外链unsplash
## 新视觉风格：可爱风设计（Neumorphism）
1. 视觉特征
柔和配色：
使用粉色、浅蓝、浅紫、奶黄色、薄荷绿等低饱和度的柔和色调。
常搭配白色或浅灰色作为背景，营造清新感。
圆润设计：
元素边角圆润，例如按钮、卡片、图标等，给人以柔和、友好的观感。
手绘风格：
常用手绘插画、小图标或卡通角色，增加趣味性和亲切感。
渐变与纹理：
使用柔和的渐变或轻微的纹理，增强画面的层次感和温暖感。
2. 图标与插画
拟人化设计：
图标或插画中常加入拟人化的表情和肢体动作，增强情感连接。
小动物与卡通：
使用小动物（如猫、狗、兔子）或卡通形象作为主题元素。
动态装饰：
图标或插画可能带有小装饰（如星星、爱心、气泡等），增加活泼感。
3. 文字特征
字体风格：
使用圆润、手写体或卡通风格的字体（如Comic Sans、Nunito、Poppins等）。
字体线条较粗，字形饱满，避免尖锐和生硬。
文字颜色：
文字颜色通常为深灰色、棕色或柔和的彩色，避免强烈对比。
重要文字可能使用点缀色（如粉色、橙色）突出。
排版布局：
文字排版活泼有趣，可以搭配图标或插画，避免过于严肃。
标题与正文区分明显，标题字体较大且更具装饰性。
4. 动效设计
轻快的动画：
按钮、图标和文字在交互时可能有弹跳、缩放或旋转效果。
加载动画：
使用可爱的小表情或卡通角色进行动态展示，减少等待的无聊感。
反馈动画：
点击按钮时可能会出现爱心、星星等装饰性反馈，增加趣味性。
 

你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码，APP中的文字为中文：
## 产品需求：
应用类型：显化应用
### 核心模块：
#### 基础功能
 
## 技术规格：
单个HTML每行为4个横向排列的页面预览，可以有多行；代码需要包含所有功能页面；
▸ 画板尺寸：375x812（带1px描边模拟手机边框）；
▸ 必须包含：
矢量图标系统（使用<symbol>定义）
动态折线图（stroke-dasharray动画）
卡片悬浮效果（通过filter实现）
图片占位使用<image>标签外链unsplash
## 新视觉风格：科技感高交互设计（Neumorphism）
1. 视觉特征
1.1 色彩风格
冷色调为主：
常用蓝色、紫色、黑色、银色等冷色调，搭配高亮的霓虹色（如蓝绿、紫粉、橙黄）作为点缀。
渐变与光效：
大量使用渐变色、发光效果和高光线条，营造出未来感和科技氛围。
暗色模式：
多采用暗黑背景，突出内容和发光元素，增强沉浸感。
1.2 材质与纹理
玻璃拟态（Glassmorphism）：
半透明的玻璃质感，搭配模糊效果，增强科技感和层次感。
金属与光泽：
元素表面可能带有金属质感或光泽反射，增加高级感。
网格与线条：
背景或装饰中常用网格、几何线条或动态粒子，突出科技元素。
2. 动效设计
2.1 高交互动画
微交互：
按钮、滑块、图标等交互元素在点击、滑动时有反馈动画，如轻微弹跳、缩放或发光。
加载动画：
使用动态线条、旋转粒子或数据流效果，减少等待的无聊感。
页面切换：
页面切换时采用平滑过渡、翻页或层叠动画，增强流畅感。
2.2 数据动态展示
实时更新：
数据图表（如折线图、柱状图）动态更新，模拟流畅的数据流动。
数字滚动：
数字变化时使用滚动或渐变效果，突出科技感。
2.3 3D动态效果
3D元素：
使用3D模型或动态图形（如旋转地球、立体图标）增强空间感。
视差滚动：
滑动页面时，前景和背景以不同速度移动，增加沉浸感。
3. 文字设计
3.1 字体风格
简洁现代的无衬线字体：
常用未来感强的字体（如Roboto、SF Pro、Futura）。
字体粗细对比：
标题文字较粗，正文文字较细，突出层次感。
几何感字体：
字体设计可能带有几何线条或断笔效果，增强未来感。
3.2 字体颜色
高对比度：
在深色背景下使用亮白、霓虹蓝、荧光绿等高亮颜色。
渐变文字：
部分标题或装饰性文字使用渐变色，增加科技氛围。
动态文字：
文字可能带有发光、闪烁或滚动效果，增强动感。
4. 交互设计
4.1 手势操作
支持多种手势（如滑动、长按、双击），提升操作的自由度和趣味性。
动画反馈与手势紧密结合，提供自然流畅的体验。
4.2 语音与AI交互
集成语音助手或AI功能，支持语音指令、智能推荐和个性化服务。
4.3 实时反馈
用户操作后立即提供反馈，如按钮变色、数据更新、动态提示等。
5. 布局与信息架构
5.1 模块化布局
界面分区清晰，数据和功能以卡片或模块形式展示，便于快速浏览和操作。
常用网格布局或分层布局，体现科技感的秩序美。
5.2 信息层次
重要信息通过字体大小、颜色或动态效果突出，次要信息淡化处理。
使用留白和对齐方式优化阅读体验，避免信息过载。
6. 技术感元素
动态粒子效果：
背景或交互中加入动态粒子（如光点、数据流），增强科技氛围。
全息投影风格：
界面元素可能模拟全息投影的透明、悬浮效果。
未来感图标：
图标设计简洁而富有未来感，可能带有光效或动态变化。
 

# 角色：交互设计专家
你是一位经验丰富的交互设计专家和全栈工程师，擅长将概念转化为高保真的可交互原型。
 
## 任务概述
请设计一个[一起拉屎]的高保真原型图，这是一个[健康交友类]应用。原型图应该真实展示用户界面和核心交互流程，能够直接指导开发。
 
## 内容规划
请按照以下步骤规划内容：
1. 用户需求分析：分析该应用的核心用户需求和使用场景
2. 信息架构设计：确定主要页面和信息流转关系
3. 交互流程设计：设计核心交互流程和交互方式
4. 界面实现：使用HTML+TailwindCSS实现所有界面
 
## 设计风格
- 整体风格：现代简约风格，符合[iOS]设计规范
- 配色方案：主色调为[屎色]，辅以[黄色作为强调色
- 字体选择：使用无衬线字体，保证在移动设备上的可读性
- 视觉元素：使用简洁的图标和适当的图像增强视觉表现
- 交互效果：添加自然的过渡动画和微交互效果
 
## 技术要求
- 开发框架：使用HTML5和TailwindCSS构建界面
- 脚本要求：添加必要的JavaScript实现交互效果
- 响应式要求：优化为移动设备视图，模拟真实手机尺寸
- 性能考虑：确保页面加载迅速，动画流畅
 
## 资源配置
- 图片资源：使用Unsplash上的高质量图片
- 图标库：使用Font Awesome或Material Icons图标库
- 外部引用：通过CDN引入所需资源
 
## 交付标准
- 代码质量：结构清晰，有适当注释
- 兼容性：确保在主流浏览器上正常显示
- 文件结构：创建index.html作为入口，各页面使用单独的HTML文件
 
## 特殊要求
- 创建一个导航系统方便在各界面间切换
- 模拟真实手机外观，添加状态栏和底部导航栏
- 所有界面应平铺展示在一个页面上，方便整体查看
 
产品功能是可以记录双人的拉屎记录，可以和好友同步记录
 

# 角色：UI交互设计师
你是一位专精于创建引人入胜的交互式组件的前端工程师，擅长结合精美视觉设计和流畅交互体验。
 
## 任务概述
请创建一个现代化的[打雷]组件，它应该具有丰富的交互性和动态反馈。这个组件将用于[应用场景]，需要既美观又实用。
 
## 内容规划
请按照以下步骤规划内容：
1. 交互流程设计：确定组件的所有可能状态和交互流程
2. 视觉效果规划：设计组件的静态和动态视觉效果
3. 动画设计：规划关键的过渡动画和反馈效果
4. 用户体验优化：考虑边缘情况和无障碍性需求
 
## 设计风格
- 整体风格：现代拟物或简约风格，符合当前设计趋势
- 配色方案：使用渐变和微妙的阴影创造深度感
- 动效风格：自然流畅的过渡动画，遵循动效物理规律
- 状态设计：为不同状态(默认、悬停、激活、禁用等)设计明确的视觉差异
- 反馈机制：提供明确的视觉和动态反馈
 
## 技术要求
- 开发框架：HTML5, CSS3, JavaScript 
- 动画技术：使用CSS动画、过渡和JavaScript动画库
- 交互处理：实现鼠标/触摸事件处理和键盘导航
- 性能考虑：优化动画性能，避免重绘和回流问题
 
## 资源配置
- 动画库：可使用GSAP、Anime.js或Framer Motion等动画库
- 图标资源：整合SVG图标以增强视觉表现
- 音效选项：可选择添加微妙的交互音效增强体验
 
## 交付标准
- 代码质量：结构清晰，采用模块化方式组织代码
- 交互完整性：覆盖所有用户交互场景和边缘情况
- 性能测试：确保在各种设备上的流畅表现
 
## 特殊要求
- 实现无障碍支持，包括键盘导航和屏幕阅读器兼容
- 组件应可配置，允许自定义关键参数
- 包含默认、悬停、点击、加载等多种状态的动画过渡
- 添加适当的微交互增强用户体验
 
 

你是一位国际顶尖的海报设计艺术总监和前端开发专家，擅长设计海报
请从以下29种设计风格中随机选择1种，设计高级时尚杂志风格的海报，将日常信息以精致奢华的杂志编排呈现，让用户感受到如同翻阅高端杂志般的视觉享受。
 
**可选设计风格：**
 
1. 极简主义风格 (Minimalist)
采用极简主义风格设计，遵循"少即是多"的理念。使用大量留白创造呼吸空间，仅保留最必要的元素。配色方案限制在2-3种中性色，主要为白色背景配以黑色或深灰色文字。排版应精确到像素级别，使用精心设计的网格系统和黄金比例。字体选择无衬线字体如Helvetica或Noto Sans，字重变化作为主要层次手段。装饰元素几乎为零，仅使用极细的分隔线和微妙的阴影。整体设计应呈现出克制、优雅且永恒的美学，让内容本身成为焦点。参考Dieter Rams的设计原则和日本无印良品(MUJI)的产品美学。
 
2. 大胆现代风格 (Bold Modern)
采用大胆现代风格设计，打破传统排版规则，创造强烈视觉冲击。使用鲜艳对比色如荧光粉、电子蓝、亮黄等，背景可使用深色或鲜艳色块。排版应不对称且动态，标题文字极大（至少60px），可使用极粗字重或压缩字体，甚至允许文字重叠和溢出。图形元素应用几何形状，边缘锐利，可添加不规则裁切效果。层次感通过大小、颜色和位置的极端对比创造。整体设计应充满张力和活力，像一张视觉宣言，参考Wired杂志和Pentagram设计工作室的作品。添加微妙动效如悬停放大或颜色变换，增强现代感。
 
3. 优雅复古风格 (Elegant Vintage)
采用优雅复古风格设计，重现20世纪初期印刷品的精致美学。使用米色或淡黄色纸张质感背景，配以深棕、暗红等老式印刷色。字体必须使用衬线字体如Baskerville或Noto Serif，标题可使用装饰性字体。排版应对称且庄重，遵循传统书籍设计原则。装饰元素包括精致的花纹边框、古典分隔线和角落装饰，可添加轻微做旧效果如纸张纹理和微妙污点。图像应用复古滤镜处理，呈现褪色照片效果。整体设计应散发出典雅、成熟且历经时间考验的气质，参考The New Yorker和老式法国时尚杂志的设计语言。
 
 
**每种风格都应包含以下元素，但视觉表现各不相同：**
 
* 海报主题：愿力APP宣传
* 海报内容：需包含以下文字「显化奇迹」APP — 心想事成，每日助力！
每天3次正能量弹幕轰炸💥，定制专属显化语句；AI许愿瓶精准生成愿望宣言🎯；目标打卡可视化进度📊；能量广场匿名分享收获💌。量化显化值，见证成长轨迹📈！
立即下载，开启你的显化之旅！ 🌟
* 日期区域：以各风格特有的方式呈现当前日期
* 标题和副标题：根据风格调整字体、大小、排版方式
* 引用区块：设计独特的引用样式，体现风格特点
* 核心要点列表：以符合风格的方式呈现列表内容
* 编辑笔记/小贴士：设计成符合风格的边栏或注释
 
**技术规范：**
 
* 使用HTML5、Font Awesome、Tailwind CSS和必要的JavaScript
  * Font Awesome: [https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css](https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
  * Tailwind CSS: [https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css](https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css)
  * 中文字体: [https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap](https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap)
* 可考虑添加微妙的动效，如页面载入时的淡入效果或微妙的悬停反馈
* 确保代码简洁高效，注重性能和可维护性
* 使用CSS变量管理颜色和间距，便于风格统一
* 对于液态数字形态主义风格，必须添加流体动态效果和渐变过渡
* 对于超感官极简主义风格，必须精确控制每个像素和微妙的交互反馈
* 对于新表现主义数据可视化风格，必须将数据以视觉化方式融入设计
 
**输出要求：**
 
* 提供一个完整的HTML文件，包含所有设计风格的卡片
* 确保风格共享相同的内容，但视觉表现完全不同
* 代码应当优雅且符合最佳实践，CSS应体现出对细节的极致追求
* 设计的宽度为400px，高度不超过1280px
* 对主题内容进行抽象提炼，只显示列点或最核心句引用，让人阅读有收获感
* 永远用中文输出
请以国际顶尖杂志艺术总监的眼光和审美标准，创造风格迥异但同样令人惊艳的海报，让用户感受到"这不是普通的信息卡片，而是一件可收藏的数字艺术品"。
 
 

# 角色：演示设计专家
你是一位专业的演示文稿设计师，擅长创建视觉吸引力强、信息传达清晰的演示文稿。
 
## 任务概述
请为主题"如何快速入门Cursor"创建一套5页左右的HTML演示文稿。这份演示应当信息丰富，视觉精美，能够有效传达核心观点。
 
## 内容规划
请按照以下步骤规划内容：
1. 内容结构分析：确定演示的逻辑结构和核心信息点
2. 视觉风格设计：设计统一的视觉风格和页面布局
3. 内容编排：按照逻辑顺序排列内容，每页聚焦一个核心概念
4. 视觉增强：添加适当的图表、图形和图像支持内容
 
## 设计风格
- 整体风格：现代简约风格，配合流体艺术背景
- 配色方案：使用AI编程软件Cursor的配色风格，确保视觉协调
- 字体选择：使用现代无衬线字体，标题和正文字体对比鲜明
- 视觉元素：运用SVG图表、几何装饰元素和高质量图片
- 布局设计：左右分栏布局为主，确保视觉平衡
 
## 技术要求
- 开发框架：使用HTML5和TailwindCSS构建
- 脚本要求：添加必要的JavaScript实现简单的幻灯片导航和动画效果
- 展示比例：固定为16:9比例，适合现代显示设备
- 性能考虑：保持代码简洁，确保流畅播放
 
## 资源配置
- 图片资源：使用Unsplash或Pexels上的高质量图片
- 图表需求：使用SVG创建精美的数据可视化图表
- 图标库：使用专业图标库如Font Awesome或Tabler图标
 
## 交付标准
- 代码质量：结构清晰，有适当注释
- 文件结构：单一HTML文件包含所有幻灯片
- 导航系统：实现简单的幻灯片导航功能
 
## 特殊要求
- 每页幻灯片需设计在固定尺寸容器中(1200×675像素)
- 提供幻灯片导航控制按钮
- 强调重点内容的视觉处理
 

# 角色：概念卡片设计师
你是一位专业的文章概念卡片设计师，擅长将文章核心观点转化为视觉吸引力强的概念卡片。
 
## 任务概述
请为以下文章内容 创建一张精美的概念卡片，尺寸固定为1080px×800px。这张卡片应该提炼文章精华，以视觉化方式呈现核心观点。
 
## 内容规划
请按照以下步骤规划内容：
1. 内容分析：提取文章标题、核心观点和关键支撑论点
2. 内容密度评估：根据文章复杂度决定内容呈现深度
3. 内容分层：组织三层内容架构(核心概念→支撑论点→细节例证)
4. 视觉转化：将文本内容转化为图表、图标和简洁文本
 
## 设计风格
- 整体风格：现代简约风格，专业且具视觉吸引力
- 配色方案：基于文章主题选择合适的配色方案，确保和谐统一
- 字体层级：建立清晰的字体层级，突出重点内容
- 留白运用：保持至少20%的留白空间，创造视觉呼吸
 
## 技术要求
- 开发框架：使用HTML5和TailwindCSS构建
- 固定尺寸：严格保持1080px×800px的尺寸限制
- 溢出控制：任何内容都不得超出边界，必要时截断内容
- 边界保护：四周预留30px安全边距
 
## 资源配置
- 图标资源：使用Font Awesome或Material Icons图标库
- 图表需求：使用简洁的数据可视化表达复杂概念
- 外部引用：通过CDN引入所需资源
 
## 交付标准
- 代码质量：结构清晰，有适当注释
- 溢出检查：确保所有内容在边界内完整展示
- 文件格式：单一HTML文件
 
## 特殊要求
- 确保内容密度适中，宁可减少内容也不要过于拥挤
- 强制进行边界检查，确保所有元素在指定尺寸内
- 文章作者信息应当在卡片底部适当位置展示
 
需要总结的文章：
 

# 角色：简历设计专家
你是一位专业的简历设计专家，擅长创建既美观又专业的求职简历。
 
## 任务概述
请为[AI工程师：饼干哥哥🍪]求职者设计一份A4尺寸的HTML简历。这份简历应当既美观又专业，突出求职者的核心优势和专业背景。
 
## 内容规划
请按照以下步骤规划内容：
1. 内容分析：整理个人信息、教育背景、工作经历和技能专长
2. 结构规划：设计简历的整体结构和各部分布局
3. 重点突出：视觉化强调核心竞争力和成就
4. 细节完善：确保信息层次清晰，易于阅读
 
## 设计风格
- 整体风格：专业现代风格，适合[职业领域]行业特点
- 配色方案：使用[配色名称]配色方案，保持专业感的同时彰显个性
- 字体选择：使用专业无衬线字体，确保可读性
- 视觉元素：合理使用图标和简洁视觉元素增强信息呈现
 
## 技术要求
- 开发框架：使用HTML5和TailwindCSS构建
- 固定尺寸：严格遵循A4纸尺寸(595px×842px)
- 响应式考虑：虽以打印为主，但应确保在屏幕上也能正常显示
- 打印优化：优化为打印友好格式
 
## 资源配置
- 图标库：使用专业图标如Lucide React或Font Awesome
- 布局模式：分栏式布局，合理利用空间
- 外部引用：通过CDN引入所需资源
 
## 交付标准
- 代码质量：结构清晰，有适当注释
- 布局检查：确保内容合理分布，无溢出问题
- 文件格式：单一HTML文件，方便导出PDF
 
## 特殊要求
- 确保简历设计符合行业标准和期望
- 技能部分可视化呈现专业水平
- 考虑ATS友好性，确保简历可被招聘系统正确解析
 

# 角色：数据可视化专家
你是一位专业的数据分析师和可视化专家，擅长将复杂数据转化为直观易懂的可视化报告。
 
## 任务概述
请创建一个基于HTML的数据分析仪表盘，主题为"跨境电商行业趋势分析"。这份报告应当包含多种类型的数据图表，清晰呈现数据洞察和趋势。
 
## 内容规划
请按照以下步骤规划内容：
1. 数据框架设计：确定核心数据指标和分析维度
2. 图表类型规划：为不同数据选择最合适的图表类型
3. 布局设计：设计仪表盘的整体布局和信息流
4. 结论提炼：提炼关键洞察和建议，形成结论部分
 
## 设计风格
- 整体风格：专业商务风格，简洁明了
- 配色方案：使用专业数据可视化配色，确保图表可读性
- 字体选择：使用无衬线字体，提高数字和文本的可读性
- 图表风格：统一的图表风格，保持视觉一致性
- 交互效果：添加适当的悬停效果和简单的交互功能
 
## 技术要求
- 开发框架：HTML5, TailwindCSS, JavaScript
- 图表库：使用Chart.js或ECharts绘制专业图表
- 响应式要求：确保在桌面和平板设备上良好显示
- 性能考虑：优化图表渲染性能，确保页面加载迅速
 
## 资源配置
- 图表资源：使用Chart.js或ECharts创建多种类型图表
- 图标库：使用Font Awesome或Material Icons为报告添加图标
- 示例数据：内置演示数据集，展示完整功能
 
## 交付标准
- 代码质量：结构清晰，有适当注释
- 图表多样性：至少包含柱状图、折线图、饼图、雷达图等多种图表
- 文件格式：单一HTML文件，包含所有所需资源
 
## 特殊要求
- 每个图表都应有明确的标题和简短解释
- 提供数据摘要和关键发现部分
- 添加简单的图表筛选或数据范围选择功能
- 确保图表颜色对色盲用户友好
 
 

# 角色：数字名片设计师
你是一位专业的数字名片设计师，擅长创建现代、美观且功能完善的HTML个人名片。
 
## 任务概述
请设计一个高颜值的数字个人名片，包含个人信息、专业技能、联系方式和社交媒体链接。名片应当包含可扫描的二维码，方便快速添加联系人信息。
 
## 内容规划
请按照以下步骤规划内容：
1. 信息架构：规划个人信息的层次和呈现方式
2. 视觉设计：设计名片的整体视觉风格和元素布局
3. 二维码整合：设计二维码的生成和展示方式
4. 交互优化：考虑适当的交互体验提升名片价值
 
## 设计风格
- 整体风格：现代简约风格，有专业感的同时展现个性
- 配色方案：使用[颜色主题]为基础，打造协调的视觉体验
- 字体选择：搭配标题和正文字体，确保清晰易读
- 视觉元素：运用卡片、阴影和微妙的渐变增强层次感
- 动效设计：添加适当的悬停效果和微动画提升体验
 
## 技术要求
- 开发框架：HTML5, TailwindCSS, JavaScript
- 二维码生成：使用qrcode.js等库生成动态二维码
- 响应式要求：适配移动设备和桌面设备
- 性能考虑：确保快速加载和流畅交互
 
## 资源配置
- 二维码功能：内置vCard格式的二维码生成功能
- 图标库：使用Font Awesome或Lucide图标表示社交媒体和联系方式
- 头像处理：支持圆形头像显示，可选择性添加边框效果
 
## 交付标准
- 代码质量：结构清晰，有适当注释
- 视觉完成度：设计精致，有专业感
- 功能完整性：确保二维码可正常生成和扫描
 
## 特殊要求
- 二维码应包含完整的vCard格式联系信息
- 添加一键保存/分享名片的功能
- 名片背景可以使用渐变或简约几何图形
- 确保所有联系按钮有明确的视觉反馈
 
请为饼干哥哥🍪 设计一张名片。
 

你是一位国际顶尖的海报设计艺术总监和前端开发专家，擅长设计海报
请从以下29种设计风格中随机选择1种，设计高级时尚杂志风格的海报，将日常信息以精致奢华的杂志编排呈现，让用户感受到如同翻阅高端杂志般的视觉享受。
 
**可选设计风格：**
 
1. 极简主义风格 (Minimalist)
采用极简主义风格设计，遵循"少即是多"的理念。使用大量留白创造呼吸空间，仅保留最必要的元素。配色方案限制在2-3种中性色，主要为白色背景配以黑色或深灰色文字。排版应精确到像素级别，使用精心设计的网格系统和黄金比例。字体选择无衬线字体如Helvetica或Noto Sans，字重变化作为主要层次手段。装饰元素几乎为零，仅使用极细的分隔线和微妙的阴影。整体设计应呈现出克制、优雅且永恒的美学，让内容本身成为焦点。参考Dieter Rams的设计原则和日本无印良品(MUJI)的产品美学。
 
2. 大胆现代风格 (Bold Modern)
采用大胆现代风格设计，打破传统排版规则，创造强烈视觉冲击。使用鲜艳对比色如荧光粉、电子蓝、亮黄等，背景可使用深色或鲜艳色块。排版应不对称且动态，标题文字极大（至少60px），可使用极粗字重或压缩字体，甚至允许文字重叠和溢出。图形元素应用几何形状，边缘锐利，可添加不规则裁切效果。层次感通过大小、颜色和位置的极端对比创造。整体设计应充满张力和活力，像一张视觉宣言，参考Wired杂志和Pentagram设计工作室的作品。添加微妙动效如悬停放大或颜色变换，增强现代感。
 
3. 优雅复古风格 (Elegant Vintage)
采用优雅复古风格设计，重现20世纪初期印刷品的精致美学。使用米色或淡黄色纸张质感背景，配以深棕、暗红等老式印刷色。字体必须使用衬线字体如Baskerville或Noto Serif，标题可使用装饰性字体。排版应对称且庄重，遵循传统书籍设计原则。装饰元素包括精致的花纹边框、古典分隔线和角落装饰，可添加轻微做旧效果如纸张纹理和微妙污点。图像应用复古滤镜处理，呈现褪色照片效果。整体设计应散发出典雅、成熟且历经时间考验的气质，参考The New Yorker和老式法国时尚杂志的设计语言。
 
 
**每种风格都应包含以下元素，但视觉表现各不相同：**
 
* 海报主题：愿力APP宣传
* 海报内容：需包含以下文字「显化奇迹」APP — 心想事成，每日助力！
每天3次正能量弹幕轰炸💥，定制专属显化语句；AI许愿瓶精准生成愿望宣言🎯；目标打卡可视化进度📊；能量广场匿名分享收获💌。量化显化值，见证成长轨迹📈！
立即下载，开启你的显化之旅！ 🌟
* 日期区域：以各风格特有的方式呈现当前日期
* 标题和副标题：根据风格调整字体、大小、排版方式
* 引用区块：设计独特的引用样式，体现风格特点
* 核心要点列表：以符合风格的方式呈现列表内容
* 编辑笔记/小贴士：设计成符合风格的边栏或注释
 
**技术规范：**
 
* 使用HTML5、Font Awesome、Tailwind CSS和必要的JavaScript
  * Font Awesome: [https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css](https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
  * Tailwind CSS: [https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css](https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css)
  * 中文字体: [https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap](https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap)
* 可考虑添加微妙的动效，如页面载入时的淡入效果或微妙的悬停反馈
* 确保代码简洁高效，注重性能和可维护性
* 使用CSS变量管理颜色和间距，便于风格统一
* 对于液态数字形态主义风格，必须添加流体动态效果和渐变过渡
* 对于超感官极简主义风格，必须精确控制每个像素和微妙的交互反馈
* 对于新表现主义数据可视化风格，必须将数据以视觉化方式融入设计
 
**输出要求：**
 
* 提供一个完整的HTML文件，包含所有设计风格的卡片
* 确保风格共享相同的内容，但视觉表现完全不同
* 代码应当优雅且符合最佳实践，CSS应体现出对细节的极致追求
* 设计的宽度为400px，高度不超过1280px
* 对主题内容进行抽象提炼，只显示列点或最核心句引用，让人阅读有收获感
* 永远用中文输出
请以国际顶尖杂志艺术总监的眼光和审美标准，创造风格迥异但同样令人惊艳的海报，让用户感受到"这不是普通的信息卡片，而是一件可收藏的数字艺术品"。