# 设计师
#### 适用角色
UI/UX设计师、视觉设计师、交互设计师
#### 核心能力概览
| 能力     | 说明                      | 典型场景       |
|:---|:---|:---|
| 前端开发   | 直接生成可运行的 HTML/CSS/JS 页面 | 产品着陆页、交互原型 |
| 汇报材料生成 | 设计提案演示文稿                | 方案汇报、设计评审  |
| 文档处理   | 设计说明、规范文档输出             | 设计交付文档     |
| 内容总结   | 竞品截图整理、设计趋势提炼           | 竞品分析报告     |
| 深度研究   | 设计趋势调研                  | 行业设计方向研究   |
   
#### 前提条件
已启用如下技能（平台预置，默认开启）：
- frontend-dev（前端开发）
- pptx-craft（汇报材料生成）
- docx-craft（Word文档创建与编辑）
- deepresearch（深度研究）
- summarize（内容总结）
 
#### 实操一：直接生成可预览的产品网页
**场景**：需要快速出一个产品着陆页，可以直接在浏览器打开预览。
**操作步骤**
1. 在左侧导航栏，单击"新建会话"，在对话框下方单击"选择文件夹"，选择或新建一个专用文件夹作为[工作空间](https://support.huaweicloud.com/usermanual-officeace/officeace_02_0009.html#section1)。
2. 在对话框输入页面需求。 
   ```
   帮我做一个产品着陆页，可以直接在浏览器打开预览。  
   产品：[产品名称]
   产品定位：[一句话定位]
   目标用户：[用户画像]
   页面包含：
    - 首屏：产品名称 + 一句话卖点 + 主视觉区域 + CTA按钮
    - 功能介绍：3-4个核心功能，每个配图标和一句话说明
    - 用户评价：3条用户评价（先用占位文案）
    - 底部：联系方式 + 简要公司介绍  
   风格：简洁现代，主色调[颜色]，字体大小适配桌面和手机 
   技术要求：纯HTML+CSS+JS，单文件，不依赖外部框架  
   完成后在右侧预览里直接看效果
   ```
   
   
3. 预览与迭代。 
   - 在右侧"工作产物"区域直接预览效果。
   
   - 不满意继续追问：
     - "首屏的标题再大一号"
     
     - "功能区改成两列布局"
     
     - "加一个渐变背景"
     
     - "把主色调改成深紫色"
      
   
   
   
   
 
#### 实操二：快速搭建交互原型
**场景：**产品需求刚定下来，需要快速出一个能点击交互的原型给产品经理看。
**操作步骤**
1. 在左侧导航栏，单击"新建会话"，在对话框下方单击"选择文件夹"，选择或新建一个专用文件夹作为[工作空间](https://support.huaweicloud.com/usermanual-officeace/officeace_02_0009.html#section1)。
2. 在对话框输入页面需求。 
   ```
   帮我做一个[功能名称]的交互原型页面，目的是给产品经理演示流程。  
   用户流程： 
   第1步：用户进入首页，看到[XX内容]
   第2步：点击[按钮]，跳转到[表单页面]
   第3步：填写[信息]，点击提交 
   第4步：显示提交成功页面  
   要求：
    - 页面之间可以点击跳转
    - 不需要真实数据，用占位内容
    - 移动端尺寸（375px宽）
    - 风格简洁，灰白色调，重点按钮用蓝色  
   生成为HTML文件，可以直接在浏览器打开点击操作
   ```
   拿着这个原型去跟产品对齐，几分钟出来的东西就能说清楚问题。
   
   
 
#### 实操三：制作设计提案汇报材料
**场景：**设计方案要汇报，需要一份结构清晰的提案汇报材料。
**操作步骤**
1. 在左侧导航栏，单击"新建会话"，在对话框上方选择"幻灯片"，可选择风格模板或开启"引导模式"。
2. 输入汇报材料需求。 
   ```
   帮我做一份设计提案汇报材料的结构和文案。  
   提案内容：[产品/功能]的UI改版方案 
   汇报对象：[产品总监/客户] 
   核心要传达的：为什么这么设计  
   PPT结构：
    - 设计背景和目标
    - 用户洞察（痛点和行为分析）
    - 设计策略（思路和原则）
    - 方案对比（改版前后，我自己补设计稿截图）
    - 预期效果和验证方法 
   帮我写每页的标题和要点文案，设计稿区域留空，我自己贴 
   语气：专业但不堆砌术语，让非设计背景的人也能看懂
   ```
   
   
3. 二次修改**。**
   
   汇报材料生成后，可直接在对话框中提出修改意见。
   
   
 
#### 实操四：竞品设计分析
**场景：**需要调研竞品的界面设计和交互体验，输出分析报告。
**操作步骤**
1. 在左侧导航栏，单击"新建会话"，在对话框下方单击"选择文件夹"，选择或新建一个专用文件夹作为[工作空间](https://support.huaweicloud.com/usermanual-officeace/officeace_02_0009.html#section1)。
2. 在对话框上方选择"深度研究"，输入如下提示词： 
   ```
   帮我做一份[产品领域]的竞品设计分析，重点分析[竞品A][竞品B][竞品C]。  
   分析维度：
    - 视觉风格（配色、字体、图标风格）
    - 交互模式（导航结构、操作手势、反馈机制）
    - 信息架构（页面层级、内容组织方式）
    - 新手引导（首次使用体验、教程设计）
    - 情感化设计（空状态、加载动画、微交互）
   输出： 
   - 每个竞品的设计特点总结
   - 一张对比表（维度×竞品）
   - 3条对我们产品有参考价值的设计洞察
   ```
   
   
3. 将竞品截图放到工作空间文件夹中，然后说： 
   ```
   帮我分析工作空间中的竞品截图，按以下维度整理：
    - 配色方案
    - 布局模式
    - 交互特点
   输出一份结构化的竞品视觉分析报告
   ```
   
   
 
#### 实操五：设计说明文档
**场景**：需要写设计说明，解释设计决策的理由。
**操作步骤**
1. 在左侧导航栏，单击"新建会话"，在对话框下方单击"选择文件夹"，选择或新建一个专用文件夹作为[工作空间](https://support.huaweicloud.com/usermanual-officeace/officeace_02_0009.html#section1)。
2. 在对话框上方输入提示词，示例如下： 
   ```
   帮我写一份设计说明文档。  
   设计项目：[产品/功能名称] 
   设计版本：V2.0 
   主要改动：[简述改动内容]  
   文档结构：
    1. 设计背景（为什么做这次改版）
    2. 设计目标（要解决什么问题）
    3. 设计策略（核心思路）
    4. 关键页面说明（每个页面的设计决策和理由）
    5. 设计规范更新（配色/字体/组件变化）
    6. 交互说明（关键流程的交互逻辑）  
   语气：专业、清晰，让开发能准确理解设计意图
   ```
   
   
 
#### 使用建议
- **给参考样本：**上传你满意的参考页面截图，告诉 AI"照这个风格来"。
- **分步调整：**先调布局结构，再调文案，最后调配色和动画。
- **善用预览：**生成后在右侧工作产物区直接预览，所见即所得。
- **纯前端输出：**要求"纯 HTML+CSS+JS，单文件"，方便直接打开预览。
- **响应式适配：**明确要求"适配桌面和手机"，AI 会自动处理。
- **保留迭代空间：**不要一次要求太完美，先出框架再逐步打磨。