夜雨聆风01
为什么会有这篇文章？
微信里的小红点，总有一半是来自老同事和老朋友：
“AI 产品经理该怎么转？”
“设计师用 Cursor 的姿势对吗？”
“你说……我会不会被取代？”
这种焦虑，身处这个行业的我太懂了。技术爆炸期，没人想当那个被落下的人。大家其实不是怕 AI 本身，而是怕“别人都在用，我却连门都摸不着”的落差感。
私下给不少朋友开过小灶，也分享了一些压箱底的心得。为了让更多人少走点弯路，我决定把这些反复验证过、拿来就能用的 Prompt 模版一次性整理出来。
咱们不谈虚的，只谈怎么落地。希望能帮到正在转型边缘徘徊，或者刚刚上手的你。
02
为什么我劝你，先“跑”一个 HTML 看看？
不管用的是 Cursor、Trae 还是 Claude，工具只是“手”，思路才是“脑”。
为什么推 HTML 画原型？就俩字：逼真。
因为它是活的：Figma 或者 Axure 里的原型"画”出来的，HTML 里的原型是“跑”出来的。在浏览器里点开的那一刻，真实的交互感是静态图给不了的。
因为它是嘴替：拿一个能点的链接去跟研发对需求，比在那讲 30 页 PRD 有用得多。研发一眼就能看出你的布局逻辑和交互边界。
AI 已经把写代码的门槛踏平了。你只需要贡献审美和逻辑，剩下的脏活累活，放心甩给代码。
03
授人以渔：一套通吃的提示词公式
在看具体模版前，先啃下这个公式。工具再怎么迭代，高质量指令的底层逻辑不会变。
【万能提示词结构】
# 角色→## 任务→## 规划→## 风格→## 技术→## 交付
【万能提示词公式】
# 角色：[专业身份]你是一位资深的[专业领域]专家，擅长使用HTML、CSS和JavaScript创建[具体类型]的内容。## 任务概述请为我设计并创建一个[具体描述内容类型和主题]。这个[内容类型]应该[描述目标和用途]。## 内容规划请按照以下步骤规划内容：1. [思考/分析]：[详细描述思考过程要求]2. [方案设计]：[详细描述设计规划要求]3. [实现细节]：[详细描述实现步骤要求]## 设计风格- 整体风格：[描述整体设计风格、参考风格]- 配色方案：[描述配色需求，可指定具体色值或风格]- 字体选择：[描述字体需求，推荐字体类型]- 视觉元素：[描述视觉元素要求，如图标、插图等]- 交互效果：[描述所需的交互、动画效果]## 技术要求- 开发框架：[指定HTML/CSS框架，如TailwindCSS、Bootstrap等]- 脚本要求：[指定JavaScript库/框架，如React、Vue等]- 响应式要求：[描述不同设备上的表现要求]- 性能考虑：[描述性能优化要求]## 资源配置- 图片资源：[指定图片来源，如Unsplash、自定义图片等]- 图标库：[指定图标库，如Font Awesome、Material Icons等]- 外部引用：[指定需要引用的外部资源]## 交付标准- 代码质量：[描述代码质量要求，如注释、组织等]- 兼容性：[描述兼容性要求]- 文件格式：[描述交付文件格式]## 特殊要求[任何其他特殊要求或注意事项]## 参考示例[想要控制AI有稳定的输出，最好是把你找到的案例以图片或HTML源代码的形式附在提示词里让AI学习]
接下来，我来详细拆解一下模板各个模块，以及如何填写每个参数：
1、角色设定：
# 角色：[专业身份]你是一位资深的[专业领域]专家，擅长使用HTML、CSS和JavaScript创建[具体类型]的内容。
专业身份：定义AI应扮演的专业角色，如"UI设计师"、"前端工程师"或"数据可视化专家"。 专业领域：指明专业的具体方向，如"交互设计"、"响应式开发"或"数据分析"。 角色叠加：别手软，可以叠 Buff。比如“你是一位擅长数据可视化的交互设计师”。
2、任务概述：
## 任务概述请为我设计并创建一个[具体描述内容类型和主题]。这个[内容类型]应该[描述目标和用途]。
内容类型和主题：明确需要创建的具体内容和主题，如"销售数据分析仪表盘"或"个人专业简历"。 目标和用途：说明这个内容的用途和预期效果，如"帮助团队快速识别销售趋势"或"在求职中突出个人专业背景"。 尽量量化：比如“18 页的演示文稿”或“包含 8 个图表的报告”。
3、内容规划：
## 内容规划请按照以下步骤规划内容：1. [思考/分析]：[详细描述思考过程要求]2. [方案设计]：[详细描述设计规划要求]3. [实现细节]：[详细描述实现步骤要求]
思考/分析：指导AI如何分析需求和背景信息，如"分析目标用户的需求和使用习惯"。 方案设计：要求AI如何进行设计规划，如"设计符合品牌风格的视觉语言和交互模式"。 实现细节：规定具体实现方式，如"使用Flexbox构建响应式布局，确保在各种设备上的一致体验"。 步骤数量可以根据项目复杂度调整，通常3-5个步骤最佳。
4、设计风格：
## 设计风格- 整体风格：[描述整体设计风格、参考风格]- 配色方案：[描述配色需求，可指定具体色值或风格]- 字体选择：[描述字体需求，推荐字体类型]- 视觉元素：[描述视觉元素要求，如图标、插图等]- 交互效果：[描述所需的交互、动画效果]
- 整体风格：定义设计的整体风格调性，如"现代简约"、"科技感"或"商务专业"。
- 配色方案：指定色彩搭配，可以是具体色值或色彩风格，如"蓝色为主色调，辅以灰色和橙色强调"，可以使用专业色彩系统（如Material Design色彩）
- 字体选择：规定字体使用规则，如"无衬线字体为主，标题使用粗体"。
视觉元素：说明图标、插图、装饰元素等的风格要求，如"使用线性图标，简洁几何图形作为背景元素"。 交互效果：描述期望的交互和动画效果，如"按钮悬停时有轻微放大效果，卡片切换时使用淡入淡出动画"。
如果不太会描述这这部分，那就直接给一张参考图吧
5、技术要求：
## 技术要求- 开发框架：[指定HTML/CSS框架，如TailwindCSS、Bootstrap等]- 脚本要求：[指定JavaScript库/框架，如React、Vue等]- 响应式要求：[描述不同设备上的表现要求]- 性能考虑：[描述性能优化要求]
- 开发框架：指定使用的HTML/CSS框架，如"TailwindCSS"、"Bootstrap"或"CSS"，一般是用Tailwind。
脚本要求：指JavaScript相关技术，如"原生JavaScript"、"jQuery"或"React"。 响应式要求：说明响应式设计需求，如"适配移动设备、平板和桌面设备，断点设置为576px, 768px, 992px"。 性能考虑：规定性能优化要求，如"确保初次加载时间小于2秒，优化图片资源，实现懒加载"。 交互效果：描述期望的交互和动画效果，如"按钮悬停时有轻微放大效果，卡片切换时使用淡入淡出动画"。
其实如果不懂的话，也不用咋写，让AI填就好了
6、资源配置：
## 资源配置- 图片资源：[指定图片来源，如Unsplash、自定义图片等]- 图标库：[指定图标库，如Font Awesome、Material Icons等]- 外部引用：[指定需要引用的外部资源]
- 图片资源：指定图片的来源和处理方式，如"使用Unsplash上关键词为'business'的图片"或"通过CDN引入项目图片"。
- 图标库：明确使用的图标系统，如"Font Awesome 6"、"Material Icons"或"自定义SVG图标"。
- 外部引用：列出需要引用的外部资源，如"Google Fonts"、"Chart.js"或"GSAP动画库"。
这部分很重要！除了直接影响作品的审美之外，对于数据分析之类的高度依赖图表的，这块就要好好设置，例如使用ECharts开源可视化图表组件库
7、交付标准：
## 交付标准- 代码质量：[描述代码质量要求，如注释、组织等]- 兼容性：[描述兼容性要求]- 文件格式：[描述交付文件格式]
- 代码质量：规定代码的质量标准，如"代码结构清晰，关键部分有注释，CSS采用BEM命名规范"。
- 兼容性：说明兼容性要求，如"兼容最新版Chrome, Firefox, Safari和Edge浏览器"。
- 文件格式：指定交付文件的格式要求，如"单一HTML文件"或"分离的HTML、CSS和JS文件"。
8、特殊要求和参考示例：
## 特殊要求[任何其他特殊要求或注意事项]## 参考示例[想要控制AI有稳定的输出，最好是把你找到的案例以图片或HTML源代码的形式附在提示词里让AI学习]
04
干货区：四个场景模版，直接复制微调
这里是重头戏，我整理了几个高频场景的模版，复制粘贴就能跑。
场景 1：产品经理专用 | PRD 一键变 Demo适用：跟开发对需求，拿东西去吵架，总比空对空强。
# 角色：资深前端开发你是一位资深的网页开发与交互设计专家，擅长使用 HTML、CSS 和 JavaScript 创建高度可视化、现代且响应式的网页内容。## 任务概述请为我设计并创建一个基于我所提供文件内容的可视化网页。这个网页应该提取原文件的核心信息，并以更易读、更具视觉吸引力的方式呈现，为用户提供卓越的阅读和交互体验。## 内容规划请按照以下步骤规划内容：1. 思考/分析：全面分析我上传的文件（文档、数据、图片等），提取核心信息，梳理出清晰的内容逻辑和信息架构。2. 方案设计：将文本或数据转化为可视化的展示方式（如卡片、图表、时间轴等），规划页面布局，确保内容主次分明。3. 实现细节：结合现代前端技术栈，逐步实现 UI 界面、响应式适配、交互动效以及深浅色主题切换功能。## 设计风格- 整体风格：参考 Linear App 的简约现代设计，使用清晰的视觉层次结构，突出重要内容。- 配色方案：专业、和谐，适合长时间阅读；必须支持完整的深色/浅色模式切换（默认跟随系统设置）。- 字体选择：现代、清晰的无衬线字体，针对不同屏幕尺寸优化字体大小。- 视觉元素：根据内容主题选择合适的插图或图表展示数据；坚决避免使用 emoji 作为主要图标。- 交互效果：添加适当的微交互提升体验：按钮悬停时有轻微放大和颜色变化；卡片元素悬停时呈现精致的阴影和边框效果；页面滚动时具有平滑过渡效果；内容区块加载时伴随优雅的淡入动画。## 技术要求- 开发框架：使用 HTML5 和 TailwindCSS 3.0+（通过 CDN 引入）。- 脚本要求：使用原生 JavaScript 处理交互逻辑和主题切换。- 响应式要求：页面必须在所有设备上（手机、平板、桌面）完美展示；确保移动端有良好的触控体验。- 性能考虑：确保页面加载速度快，避免不必要的大型资源；图片使用现代格式(WebP)并进行适当压缩；对长页面内容实现懒加载技术。## 资源配置- 图片资源：优先使用文档中提供的 Markdown 图片链接（如果有）。- 图标库：使用专业图标库如 Font Awesome 或 Material Icons（通过 CDN 引入）。- 外部引用：使用文档中的视频嵌入代码（如果有）；通过 CDN 引入必要的 CSS 和 JS 依赖。## 交付标准- 代码质量：代码结构清晰，包含适当注释，便于理解和维护；符合 W3C 标准，无错误警告。- 兼容性：确保页面在不同现代主流浏览器中保持一致的外观和功能。- 文件格式：提供完整可运行的单一 HTML 文件（内部包含所有必要的 CSS 和 JavaScript 代码）。## 特殊要求- 所有页面内容必须严格为简体中文。- 请根据上传文件的具体内容类型（文档、数据、图片等）智能调整页面布局和展示策略。## 参考示例- 视觉与排版请参考 Linear 官网（https://linear.app/）的黑白极简与高质感阴影、边框发光设计风格。
场景 2：设计师脑暴 | 从 0 到 1 画高保真适用：只有个念头，比如那个爆火的“死了么”APP 概念。
# 角色：交互设计专家你是一位经验丰富的交互设计专家和全栈工程师，擅长将概念转化为高保真的可交互原型。## 任务概述请设计一个APP叫「死了么」，类似外卖APP「饿了么」，用于养老的，每天问一句，以防独自一个人死在家里没人发现。注意这是专门为独居90后的年轻人设计的。风格要求清新好看、APP内的文案多用搞怪的网络用语。## 内容规划请按照以下步骤规划内容：1. 用户需求分析：分析该应用的核心用户需求和使用场景。2. 信息架构设计：确定主要页面和信息流转关系。3. 交互流程设计：设计核心交互流程和交互方式。4. 界面实现：使用HTML+TailwindCSS实现所有界面。## 设计风格- 整体风格：现代简约风格，符合 iOS 设计规范。- 配色方案：主色调为科技蓝，辅以明黄色、橄榄绿作为强调色。- 字体选择：使用无衬线字体，保证在移动设备上的可读性。- 视觉元素：使用简洁的图标和适当的图像增强视觉表现。- 交互效果：添加自然的过渡动画和微交互效果。## 技术要求- 开发框架：使用HTML5和TailwindCSS构建界面。- 脚本要求：添加必要的JavaScript实现交互效果。- 响应式要求：优化为移动设备视图，模拟真实手机尺寸。- 性能考虑：确保页面加载迅速，动画流畅。## 资源配置- 图片资源：使用Unsplash上的高质量图片。- 图标库：使用Font Awesome或Material Icons图标库。- 外部引用：通过CDN引入所需资源。## 交付标准- 代码质量：结构清晰，有适当注释。- 兼容性：确保在主流浏览器上正常显示。- 文件结构：创建index.html作为入口，各界面平铺展示在一个页面上方便整体查看。## 特殊要求- 创建一个导航系统方便在各界面间切换。- 模拟真实手机外观，添加状态栏和底部导航栏。
场景 3：精美 PPT 速成 | 5 分钟出演示稿适用：明天要汇报，但 PPT 还没动笔的你。
# 角色：演示设计专家你是一位专业的演示文稿设计师，擅长创建视觉吸引力强、信息传达清晰的演示文稿。## 任务概述请为主题“如何快速入门借助AI生成高保真设计”创建一套8页左右的HTML演示文稿。这份演示应当信息丰富，视觉精美，能够有效传达核心观点。## 内容规划请按照以下步骤规划内容：1. 内容结构分析：确定演示的逻辑结构和核心信息点。2. 视觉风格设计：设计统一的视觉风格和页面布局。3. 内容编排：按照逻辑顺序排列内容，每页聚焦一个核心概念。4. 视觉增强：添加适当的图表、图形和图像支持内容。## 设计风格- 整体风格：现代简约风格，配合流体艺术背景。- 配色方案：使用AI编程软件Cursor的配色风格，确保视觉协调。- 字体选择：使用现代无衬线字体，标题和正文字体对比鲜明。- 视觉元素：运用SVG图表、几何装饰元素和高质量图片。- 布局设计：左右分栏布局为主，确保视觉平衡。## 技术要求- 开发框架：使用HTML5和TailwindCSS构建。- 脚本要求：添加必要的JavaScript实现简单的幻灯片导航和动画效果。- 展示比例：固定为16:9比例，适合现代显示设备。- 性能考虑：保持代码简洁，确保流畅播放。## 资源配置- 图片资源：使用Unsplash或Pexels上的高质量图片。- 图表需求：使用SVG创建精美的数据可视化图表。- 图标库：使用专业图标库如Font Awesome或Tabler图标。## 交付标准- 代码质量：结构清晰，有适当注释。- 文件结构：单一HTML文件包含所有幻灯片。- 导航系统：实现简单的幻灯片导航功能。## 特殊要求- 每页幻灯片需设计在固定尺寸容器中(1200×675像素)。- 提供幻灯片导航控制按钮。
场景 4：小红书、朋友圈美学 | 长文变知识卡片适用：纯文字没人看，需要视觉化传播。我把上一篇文章「一人公司，拥有无限 AI 员工！全民老板的时代要来了吗？！」丢给AI，这是它还给我的：
# 角色：概念卡片设计师你是一位专业的文章概念卡片设计师，擅长将文章核心观点转化为视觉吸引力强的概念卡片。## 任务概述请为以下文章内容 创建一张精美的概念卡片，尺寸固定为1080px×800px。这张卡片应该提炼文章精华，以视觉化方式呈现核心观点。## 内容规划请按照以下步骤规划内容：1. 内容分析：提取文章标题、核心观点和关键支撑论点。2. 内容密度评估：根据文章复杂度决定内容呈现深度。3. 内容分层：组织三层内容架构(核心概念→支撑论点→细节例证)。4. 视觉转化：将文本内容转化为图表、图标和简洁文本。## 设计风格- 整体风格：现代简约风格，专业且具视觉吸引力。- 配色方案：基于文章主题选择合适的配色方案，确保和谐统一。- 字体层级：建立清晰的字体层级，突出重点内容。- 留白运用：保持至少20%的留白空间，创造视觉呼吸感。## 技术要求- 开发框架：使用HTML5和TailwindCSS构建。- 固定尺寸：严格保持1080px×800px的尺寸限制。- 溢出控制：任何内容都不得超出边界，必要时截断内容。- 边界保护：四周预留30px安全边距。## 资源配置- 图标资源：使用Font Awesome或Material Icons图标库。- 图表需求：使用简洁的数据可视化表达复杂概念。- 外部引用：通过CDN引入所需资源。## 交付标准- 代码质量：结构清晰，有适当注释。- 溢出检查：确保所有内容在边界内完整展示。- 文件格式：单一HTML文件。## 特殊要求- 确保内容密度适中，宁可减少内容也不要过于拥挤。- 强制进行边界检查，确保所有元素在指定尺寸内。- 文章作者信息应当在卡片底部适当位置展示。
05
新手避雷：这 3 个坑 99% 的人都踩过
误区2：废话文学大师。
别再说“好看点”，试着说：“标题字号放大 4px，主按钮色号 #005AFF”。越具体，越省事。
误区3：别让 AI 裸奔。
别只给一句空话。在 Cursor 里记得用 @ 文件，让 AI 读你的 PRD 或参考图。没有输入，就没有高质量输出。
06
最后，说句大实话
工具只是手的延伸，逻辑是底座，审美才是天花板。
AI 只是个加速器，它缩短的是你从“想到”到“做到”的路径。
别眼花缭乱，就从上面挑一个模版，今晚 10 点前，把第一个 HTML 跑起来。掌控感，是做出来的。
07
互动一下
聊聊看：你在尝试 AI 辅助工作时，最让你抓狂的一个瞬间是什么？欢迎评论区吐槽。
