PxCook

产品简介

PxCook（像素大厨）是由FancyNode（幻想节点）公司推出的一款面向UI设计师和前端开发者的设计协作工具。它定位为一站式设计稿交付平台，旨在解决设计与开发之间高效协作的痛点。该工具的核心价值在于能够智能地处理设计稿，自动生成标注、切图和代码，从而显著提升团队的工作效率，减少因手动操作带来的误差和沟通成本。

PxCook支持多种主流设计文件格式，其中最突出的是其对Adobe XD和Sketch设计稿的深度支持。用户可以直接打开或拖拽这些设计文件到PxCook中，软件会自动解析图层信息。此外，它也提供了独立的标注与切图工具，即使不使用XD或Sketch的设计师也能通过安装插件或手动导入的方式利用其核心功能。总的来说，PxCook致力于成为连接设计与开发环节的“桥梁”软件。

主要功能

PxCook的功能体系主要围绕设计稿的解析、标注、切图和代码生成展开，其核心功能可以概括为以下几点：

1. 智能标注
这是PxCook的旗舰功能。软件能够自动识别设计稿中的各个元素，并生成精准、全面的标注信息。这包括：
* 尺寸与间距标注： 自动测量元素自身的宽高，以及元素与元素之间、元素与画布边缘的间距。
* 颜色标注： 自动拾取并显示文字、形状、边框等元素的颜色值，支持HEX、RGB等多种格式。
* 文字样式标注： 自动识别字体家族、字号、字重、行高、对齐方式、颜色等文本属性。
* 阴影与效果标注： 能够解析并输出图层所应用的阴影、模糊等效果的参数。

2. 一键切图
PxCook可以快速、批量地从设计稿中导出所需的图片资源。用户只需在设计稿中标记好需要导出的图层或画板，软件即可一键导出为PNG、JPG、SVG等多种格式，并支持为不同分辨率（如1x, 2x, 3x）的设备生成多倍图，极大地简化了前端开发者的资源准备工作。

3. 代码生成
该功能是PxCook区别于早期单一标注工具的显著特点。它能够自动生成前端代码片段，包括：
* CSS代码： 生成与设计稿视觉效果对应的CSS样式代码，如盒模型、字体样式、背景、阴影等。
* 小程序代码： 针对国内市场，支持生成微信小程序等平台的WXML和WXSS代码。
* Vue/React组件代码（实验性）： 提供生成主流前端框架组件代码的能力，助力开发快速搭建页面结构。

4. 设计稿管理
PxCook提供了简单的团队协作和设计稿管理功能。用户可以将标注好的设计稿上传至云端，生成在线链接分享给团队成员。开发人员无需安装任何软件，直接在浏览器中即可查看标注、下载切图和复制代码，实现了信息的集中管理和无缝流转。

使用方法

使用PxCook的流程非常直观，主要分为以下几个步骤：

1. 获取与安装
用户需要访问FancyNode官方网站，根据自身操作系统（Windows或macOS）下载对应的PxCook客户端并完成安装。对于Sketch用户，可能还需要安装相应的插件以启用更强大的功能。

2. 导入设计稿
打开PxCook客户端后，用户可以通过直接拖拽的方式将Sketch或XD文件导入软件中。对于其他格式（如PSD、PNG），也可以通过“打开文件”的方式进行导入，但智能解析能力可能因格式而异。

3. 进行标注与切图
导入成功后，设计稿会以图层结构的形式呈现在软件界面中。用户只需点击画布上的任意元素，右侧面板便会自动显示该元素的所有标注信息。对于需要导出的图片资源，用户可以通过右键点击图层，选择“标记为切图”，然后在切图面板中进行批量导出设置和操作。

4. 分享与协作
完成标注后，用户可以通过顶部工具栏的“上传”按钮，将当前设计稿同步到PxCook的云端。系统会生成一个唯一的链接，将此链接分享给项目经理、开发者或其他相关人员，他们即可在Web端查看完整的标注信息和下载资源。

5. 开发者查看
开发团队成员在收到分享链接后，用浏览器打开即可进入一个专门的预览模式。在此模式下，他们可以点击页面元素查看其所有样式参数，直接复制代码或下载切图，整个过程无需来回沟通确认。

产品价格

PxCook采用“免费+增值”的商业模式，为不同需求的用户提供了灵活的选项。

* 个人版（免费）：

内容由AI生成，实际功能由于时间等各种因素可能有出入，请访问网站体验为准