在Web開發中，我們經常需要使用CSS來控制頁面的樣式。使用原型工具可以快速地將設計師的設計稿轉換為HTML和CSS代碼。這篇文章將介紹如何使用原型工具輸出CSS代碼。

首先，我們需要在原型工具中創建一個網頁設計稿，并將設計元素分配到不同的圖層中。接著，我們需要為設計元素添加樣式。在原型工具中，我們可以使用CSS面板來添加樣式。CSS面板可以讓我們設置元素在不同狀態下的樣式，比如hover、active、focus等。

.button {
color: #fff;
background: #0078e7;
border: none;
border-radius: 4px;
padding: 10px 20px;
font-size: 14px;
}
.button:hover {
background: #005d9e;
}
.button:active {
background: #004d81;
}

在原型工具中，我們還可以使用CSS樣式預設，這些預設包括了各種常見的樣式，如字體、顏色、背景、按鈕等。我們可以根據預設的樣式進行修改來達到我們所需的樣式效果。

輸出CSS代碼的方法也很簡單，在原型工具中我們只需要選擇導出CSS選項，然后選擇我們要導出的圖層和樣式。導出的CSS代碼將會自動生成，并且包括了CSS樣式預設的代碼以及我們自定義的CSS代碼。

總之，使用原型工具輸出CSS代碼可以幫助我們快速地將設計稿轉換為可用的CSS代碼。同時，預設的CSS樣式也讓我們更容易地添加各種樣式效果。這種方法可以提高我們的工作效率，減少代碼編寫的時間。