前端開發利器 - - PxCook（像素大廚）

• 1、PxCook簡述
• 2、PxCook安裝
• 3、PxCook基本操作
• • 3.1 通過軟件打開設計圖
  • 3.2 常用快捷鍵
  • 3.3 常用工具
  • 3.4 從psd文件中直接獲取數據

---

1、PxCook簡述

前端開發軟件：

• PS（Photoshop）收費、占用磁盤空間大
• PxCook本地免費，輕量，高效

PxCook

高效易用的自動標注工具, 生成前端代碼, 設計研發協作利器

PxCook功能

• 代碼生成：包括 CSS, XML, Objective-C, Swift, ReactNative…
• 自動標注：在開發模式下，可直接查看設計稿中元素的內容，間距，尺寸和樣式等。同時會根據當前所選擇的元素，在右側屬性欄中生成對應的樣式代碼。
• 智能標注：支持智能標注出設計稿中，需要特殊注意的地方，以便加快工程師的開發效率。
• 單位換算：支持 iOS, Android 和 H5 平臺的不同單位類型和分辨率換算。
• 切圖協作：支持 iOS, Android 和 H5 三種平臺的 切圖協作 。導入到PxCook中的切圖種類和命名，會根據當前的設備類型，自動進行換算。
• 主流設計工具跨平臺支持：支持 Photoshop，Sketch 和 Adobe XD 等設計工具，支持 macOS 和 Windows 兩個操作系統。
• 項目制管理設計稿：支持項目制管理您的設計稿中的每一個畫板，同時支持對畫板進行分組。
• 協作項目的支持：支持云端協作項目，可以自由邀請項目的參與者到該項目中。
• 本地項目的支持： 支持本地項目，所有項目數據可以以 pxcp 文件格式保存到本地，隱私保護更加有效。

---

2、PxCook安裝

下載地址：PxCook - 高效易用的自動標注工具
)

---

3、PxCook基本操作

3.1 通過軟件打開設計圖

打開軟件

創建web項目

拖拽入設計圖，png用設計模式 psd用開發模式

3.2 常用快捷鍵

放大設計圖：ctrl + +

縮小設計圖：ctrl - -

移動設計圖：空格按住不放，鼠標拖動

3.3 常用工具

量尺寸

吸顏色

3.4 從psd文件中直接獲取數據

切換到開發界面，直接點擊獲取數據

---

總結

以上是生活随笔為你收集整理的前端开发利器--PxCook（像素大厨）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。