> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superun.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 部分重新设计

import Image from '@/components/Image';

部分重新设计可让您更新Frame的**一个特定区域**,而不影响布局的其余部分.
当您想要刷新Card片,重新设计某个部分或探索变化同时保持页面结构完整时,这非常有用.

***

## 1. 选择 **部分重新设计** 选项Card

打开 **prompt.to.design** 插件并点击 **Partial Redesign** 标签.\
此模式允许您在Frame内选择现有区域并僅重新生成该部分.

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/region-redesign/1.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=66fcc80bb0c1833dbb83fb77566a9d62" alt="打开插件并选择区域重新设计标签" width={700} data-path="images/region-redesign/1.png" />

***

## 2. 选择包含要重新设计的区域的Frame

首先,您必须在 Figma 画布上选择整个 **Frame**.
在您选择特定区域之前,插件需要知道您想要在哪个页面中工作.

### 为什么这一步很重要:

* 区域重新设计**仅在首先选择Frame时有效**
* 如果没有选择Frame,插件无法进入区域选择模式
* 选择Frame后,插件将display消息:
  **"在Frame中选择一个区域"**

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/region-redesign/2_A.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=0913bd71b63db5d0bc93ced1787e43cc" alt="单击Frame以启用区域选择模式" width={600} data-path="images/region-redesign/2_A.png" />

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/region-redesign/2_frame.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=ad0a317d672f8048633af51307b1a197" alt="将用于区域重新设计的选定Frame的示例" width={500} data-path="images/region-redesign/2_frame.png" />

***

## 3. 选择Frame内的区域

选择Frame后,单击要重新设计的特定区域 - 例如Card片,部分或内容块.

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/region-redesign/3_A.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=32b45bbc7983442b898ab8f5bf3fd9cd" alt="选择Frame区域后,插件display选定的区域" width={600} data-path="images/region-redesign/3_A.png" />

### 推荐方法（特别适合初学者）:

**使用左側的 Figma 图層面板选择确切的区域.**

即使層嵌套,这也可确保您选择正确的组件或容器.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/region-redesign/3_region.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=3382d4b4cafb2e291e3a20a3519439b4" alt="使用图層面板或画布选择Frame内的特定区域" width={675} data-path="images/region-redesign/3_region.png" />

***

## 4. 描述您要在所选区域更新的内容

键入一个简短的提示,描述您希望如何重新设计所选区域.
只有所选区域才会更新 - 页面的其余部分保持不变.

提示示例:

> "将这张评级Card重新设计成高级,豪华酒店style.
> 使用暖色调,柔和的立面和精致的版式.保留所有内容,但要让它感觉优雅和高端."

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/region-redesign/4.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=5290d4d21611f9fdc7eb9fce70f7195c" alt="输入如何重新设计所选区域的描述" width={350} data-path="images/region-redesign/4.png" />

***

## 5. 生成并审查重新设计的预览

单击"**生成**"以创建所选区域的新变体.\
预览将display与Frame现有样式系统相匹配的新设计.

您可以滾动或缩放来比较不和的版本.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/region-redesign/5.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=d77288322d4af791e8e46f8a7e6d38a7" alt="审查所选区域的 AI 生成变体" width={700} data-path="images/region-redesign/5.png" />

***

## 6. 将重新设计的区域插入 Figma

点击 **Insert to Figma** 以应用新版本.
只有选定的区域将被替换 - Frame的其余部分将保持完全相和.

更新后的区域将display为完全可编辑的 Figma 图层.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/region-redesign/6_newframe.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=c8bd90462af5ed8d6e91ba365036fc34" alt="将重新设计的区域插入现有Frame中" width={900} data-path="images/region-redesign/6_newframe.png" />

***

## 概括

通过部分重新设计,您可以:

* 只更新页面的一部分,而不影响其余部分
* 快速探索多种设计变体
* 保持页面结构和间距不变
* 在整个布局中保持style一致性
* 将所有生成的输出编辑为原生 Figma 图層

区域重新设计非常适合改进Card片,部分,模块或页面中需要煥然一新的外观的任何部分.

<div
  style={{
marginTop: '2rem',
display: 'flex',
justifyContent: 'center',
}}
>
  <a
    href="https://www.figma.com/community/plugin/1528325292196938261/prompt-to-design-by-superun-ai-10x-faster-with-ai-design-like-a-pro-prototype-instantly"
    style={{
  backgroundColor: '#0F172A',
  color: 'white',
  padding: '12px 28px',
  borderRadius: '8px',
  fontSize: '16px',
  fontWeight: '600',
  textDecoration: 'none',
  boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
  transition: 'all 0.2s ease',
}}
    onMouseOver="this.style.backgroundColor='#1E293B'"
    onMouseOut="this.style.backgroundColor='#0F172A'"
  >
    开始使用 prompt.to.design 设计
  </a>
</div>