业务页面布局与高保真设计生成

解决的具体问题

在Figma中维护业务页面设计稿时，团队常面临三个核心痛点：一是组件复用混乱，不同设计师可能使用不同版本的按钮、卡片组件，导致视觉不一致；二是设计tokens（如颜色、字体、间距）与代码实现脱节，业务页面迭代时，设计稿与代码产物的视觉还原度难以保证；三是从需求描述或代码到Figma高保真稿的转换依赖人工拖拽，业务页面频繁迭代时，更新设计稿的时间成本高，且容易因人为操作出现布局错位。

核心能力与工作方式

这个技能基于Figma设计系统组件与design tokens，实现从代码或文字描述到高保真Figma屏幕的自动生成/更新，核心流程可分为三步：

1. 输入解析：接收代码片段（如React组件代码）或自然语言描述（如“用户登录页面，包含邮箱输入框、密码输入框和登录按钮”），提取页面结构、组件层级及视觉要素（颜色、字体、间距）；
2. 组件映射：匹配项目预设的Figma设计系统组件库，将解析出的结构化信息映射为Figma原生组件（如将“登录按钮”映射为设计系统中的PrimaryButton组件），确保组件可编辑、可复用；
3. Token同步：自动应用设计tokens，确保颜色（如#FF6B6B）、字体（如Inter 16px）、间距（如16px）等视觉变量与设计规范一致，生成的设计稿可直接对接代码实现。

适用边界与注意点

1. 依赖前置条件：需提前在Figma中配置好设计系统组件与design tokens，若项目未建立设计规范，生成的设计稿可能缺少统一视觉标准；
2. 定制化限制：对于高度定制化、非组件化的复杂交互页面（如含大量自定义动效或特殊布局的页面），生成的设计稿可能需要人工调整组件层级或布局细节；
3. 素材与动效：暂不直接处理位图素材、复杂动效或3D内容，需结合Figma原生工具或其他插件补充。