应切换至开发模式以准确查看尺寸、代码或切图数据；PxCook通过顶部Tab、新建项目设置或Ctrl+Shift+D快捷键切换角色，开发模式支持图层解析、代码生成与切图导出，设计模式仅支持静态标注。

如果您在使用PxCook时无法准确查看尺寸、代码或切图数据，则可能是当前处于错误的角色模式。PxCook通过角色切换实现设计与开发两种工作场景的分离，需明确区分并正确切换。以下是具体操作与差异说明：

一、通过顶部Tab切换角色模式

PxCook界面顶部设有固定Tab栏，提供“设计”与“开发”两个角色入口，切换后工具栏、功能响应及数据解析逻辑将随之改变。该切换不依赖文件类型，但实际使用中建议按文件来源匹配角色以获得完整支持。

1、启动PxCook软件并打开已有项目或拖入设计稿。

2、观察窗口顶部中央区域，找到标有“设计”和“开发”的并列Tab按钮。

3、点击“开发”Tab，界面自动切换至开发模式；点击“设计”Tab，即返回设计模式。

二、通过项目创建时指定初始模式

新建项目阶段可预设默认角色，避免每次打开都需手动切换。该设置影响初始工具栏布局与快捷键响应范围，尤其适用于团队统一规范流程。

1、点击右上角“创建项目”按钮。

2、在弹出面板中选择项目类型（如Web、iOS、Android）。

3、在项目名称输入框下方，勾选“默认进入开发模式”或“默认进入设计模式”选项。

4、点击“创建项目”，新项目将按所选模式初始化。

三、通过快捷键快速切换模式

在已打开设计稿状态下，可使用组合键跳过Tab点击操作，提升高频切换效率。该方式适用于熟悉操作节奏的用户，且不依赖鼠标定位。

1、确保PxCook主窗口为当前焦点（非最小化、非后台）。

2、按下Ctrl + Shift + D，立即切换至开发模式。

3、按下Ctrl + Shift + E，立即切换至设计模式。

四、设计模式与开发模式的核心区别

两种模式在底层解析逻辑、交互响应目标及输出能力上存在本质差异：设计模式面向视觉资产操作，聚焦标注、取色与量尺；开发模式面向工程交付，聚焦结构解析、代码生成与切图导出。

1、设计模式仅支持PNG、JPG等位图格式的静态标注，可使用吸管取色、尺子测距、文字标注，但无法解析图层结构或生成CSS/HTML代码。

2、开发模式专为PSD、Sketch源文件设计，可识别图层命名、分组关系、矢量形状，并一键获取尺寸、颜色、字体、间距等前端可用属性。

3、在开发模式下，鼠标悬停任意图层区域，界面实时显示box-sizing、padding、margin、border等盒子模型参数；设计模式下仅显示像素距离与十六进制色值。

4、切图功能仅在开发模式下启用，支持按图层、按画板、按命名规则批量导出，且可配置输出格式（PNG、SVG、WebP）与缩放倍率（@1x、@2x、@3x）。