中文總教學 1：pxCode 是什麼？

總的來說，pxCode 的目標，以及想要解決的問題就是切版。

為什麼使用 pxCode？

1. 【優化生產力與溝通效率 Efficiency】

目前在市面上，並沒有什麼有效的切版工具，幾乎都必須經歷耗時的「手動切版」。這是非常煎熬、也消耗時間的，並且需要大量的溝通。pxCode 提供了有效的切版介面，讓我們可以在短時間內產出完善的響應式網頁（RWD）。

2. 【像素精準品質 不會跑版 Pixel Perfect】

pxCode 的誕生，幫助你的切版效率，提高生產力。我們甚至可以直接在編輯器上編輯 RWD、甚至預覽 RWD，提供多種快速完成切版的功能。因此可以說，在 pxCode 進行切版，就是可以達到精準的象素，且不會跑版。

3. 【產出易理解可維護的程式碼 Clean Code】

另外，pxCode 也堅持所生產出來的程式碼是清楚且可以維護的。我們也知道，AI（人工技術） 所生產的程式碼是並不是完全精確的，而且 RD（網頁開發師）接手之後也不能改，這對切版並沒有幫助。

因此為了達到產出可以維護使用的程式碼，我們提供簡單的方法讓使用者去自行編輯。

【編輯流程簡介】

在 pxCode 裡，我們支援 Sketch 和 Figma。導入設計稿進行編輯之後，就會自動產生 HTML 和 CSS 的程式碼。

【切版概念】

一個 Figma 或 Sketch 設計稿原本是定稿的，而我們在 pxCode 裡就必須讓他變成彈性變化的狀態，也就是所謂的 RWD。因此，當產出的網頁在不同解析度的裝置上時，都可以讓內容進行配合，呈現一個舒服的網頁視覺狀態。

**其中，當我們將設計稿導入 pxCode 後，所有內容元件的結構都會自動被攤平。這個原因是，雖然設計稿在設計軟體裡已有本身的結構，不過為了產生最好的結構（HTML程式碼），我們決定讓使用者在 pxCode 進行一個結構整理，來達到最完好的程式碼狀態。

因此簡單而言，就是將【絕對定位的設計稿】轉化成【有結構且適配的網頁程式】。

-

【關注 pxCode】 FB：https://www.facebook.com/pxCode Medium：https://medium.com/pxcode 官網：https://www.pxcode.io/