设计师

适用角色

UI/UX设计师、视觉设计师、交互设计师

核心能力概览

前提条件

实操一：直接生成可预览的产品网页

场景：需要快速出一个产品着陆页，可以直接在浏览器打开预览。

操作步骤

1. 在左侧导航栏，单击“新建任务”或“新建会话”，在对话框下方单击“选择文件夹”，选择或新建一个专用文件夹作为工作空间。
2. 在对话框输入页面需求。

   帮我做一个产品着陆页，可以直接在浏览器打开预览。  
   
   产品：[产品名称]
   产品定位：[一句话定位]
   目标用户：[用户画像]
   页面包含：
    - 首屏：产品名称 + 一句话卖点 + 主视觉区域 + CTA按钮
    - 功能介绍：3-4个核心功能，每个配图标和一句话说明
    - 用户评价：3条用户评价（先用占位文案）
    - 底部：联系方式 + 简要公司介绍  
   
   风格：简洁现代，主色调[颜色]，字体大小适配桌面和手机 
   技术要求：纯HTML+CSS+JS，单文件，不依赖外部框架  
   
   完成后在右侧预览里直接看效果 

3. 预览与迭代。
   • 在右侧“工作产物”区域直接预览效果。
   • 不满意继续追问：
     • “首屏的标题再大一号”
     • “功能区改成两列布局”
     • “加一个渐变背景”
     • “把主色调改成深紫色”

实操二：快速搭建交互原型

场景：产品需求刚定下来，需要快速出一个能点击交互的原型给产品经理看。

操作步骤

1. 在左侧导航栏，单击“新建任务”或“新建会话”，在对话框下方单击“选择文件夹”，选择或新建一个专用文件夹作为工作空间。
2. 在对话框输入页面需求。

   帮我做一个[功能名称]的交互原型页面，目的是给产品经理演示流程。  
   
   用户流程： 
   第1步：用户进入首页，看到[XX内容]
   第2步：点击[按钮]，跳转到[表单页面]
   第3步：填写[信息]，点击提交 
   第4步：显示提交成功页面  
   
   要求：
    - 页面之间可以点击跳转
    - 不需要真实数据，用占位内容
    - 移动端尺寸（375px宽）
    - 风格简洁，灰白色调，重点按钮用蓝色  
   
   生成为HTML文件，可以直接在浏览器打开点击操作 

   拿着这个原型去跟产品对齐，几分钟出来的东西就能说清楚问题。

实操三：制作设计提案汇报材料

场景：设计方案要汇报，需要一份结构清晰的提案汇报材料。

操作步骤

1. 在左侧导航栏，单击“新建任务”或“新建会话”，在对话框上方选择“幻灯片”，可选择风格模板或开启“引导模式”。
2. 输入汇报材料需求。

   帮我做一份设计提案汇报材料的结构和文案。  
   
   提案内容：[产品/功能]的UI改版方案 
   汇报对象：[产品总监/客户] 
   核心要传达的：为什么这么设计  
   
   PPT结构：
    - 设计背景和目标
    - 用户洞察（痛点和行为分析）
    - 设计策略（思路和原则）
    - 方案对比（改版前后，我自己补设计稿截图）
    - 预期效果和验证方法 
   
   帮我写每页的标题和要点文案，设计稿区域留空，我自己贴 
   语气：专业但不堆砌术语，让非设计背景的人也能看懂 

3. 二次修改。

   汇报材料生成后，可直接在对话框中提出修改意见。

实操四：竞品设计分析

场景：需要调研竞品的界面设计和交互体验，输出分析报告。

操作步骤

1. 在左侧导航栏，单击“新建任务”或“新建会话”，在对话框下方单击“选择文件夹”，选择或新建一个专用文件夹作为工作空间。
2. 在对话框上方选择“深度研究”，输入如下提示词：

   帮我做一份[产品领域]的竞品设计分析，重点分析[竞品A][竞品B][竞品C]。  
   
   分析维度：
    - 视觉风格（配色、字体、图标风格）
    - 交互模式（导航结构、操作手势、反馈机制）
    - 信息架构（页面层级、内容组织方式）
    - 新手引导（首次使用体验、教程设计）
    - 情感化设计（空状态、加载动画、微交互）
   
   输出： 
   - 每个竞品的设计特点总结
   - 一张对比表（维度×竞品）
   - 3条对我们产品有参考价值的设计洞察

3. 将竞品截图放到工作空间文件夹中，然后说：

   帮我分析工作空间中的竞品截图，按以下维度整理：
    - 配色方案
    - 布局模式
    - 交互特点
   输出一份结构化的竞品视觉分析报告 

实操五：设计说明文档

场景：需要写设计说明，解释设计决策的理由。

操作步骤

1. 在左侧导航栏，单击“新建任务”或“新建会话”，在对话框下方单击“选择文件夹”，选择或新建一个专用文件夹作为工作空间。
2. 在对话框上方输入提示词，示例如下：

   帮我写一份设计说明文档。  
   
   设计项目：[产品/功能名称] 
   设计版本：V2.0 
   主要改动：[简述改动内容]  
   
   文档结构：
    1. 设计背景（为什么做这次改版）
    2. 设计目标（要解决什么问题）
    3. 设计策略（核心思路）
    4. 关键页面说明（每个页面的设计决策和理由）
    5. 设计规范更新（配色/字体/组件变化）
    6. 交互说明（关键流程的交互逻辑）  
   
   语气：专业、清晰，让开发能准确理解设计意图 

使用建议

• 给参考样本：上传你满意的参考页面截图，告诉 AI“照这个风格来”。
• 分步调整：先调布局结构，再调文案，最后调配色和动画。
• 善用预览：生成后在右侧工作产物区直接预览，所见即所得。
• 纯前端输出：要求“纯 HTML+CSS+JS，单文件”，方便直接打开预览。
• 响应式适配：明确要求“适配桌面和手机”，AI 会自动处理。
• 保留迭代空间：不要一次要求太完美，先出框架再逐步打磨。