Pico CSS 讓語意化 HTML 本身成為樣式：不寫 class，用標籤結構就獲得克制的預設外觀。天藍 #0172AD 是唯一主色，system-ui 字型配 4px 圓角和柔和的多層陰影，頁面天生安靜、輕盈、幾乎零配置——文件網站與快速原型最省心的起點。
Pico CSS設計系統
提示詞範本
基礎範本
Design a Pico CSS-inspired minimal interface. - Classless semantic HTML with restrained defaults; - Azure #0172AD as the single primary on a white canvas; - system-ui typography, 4px radii, layered soft shadows; - Quiet cards, forms, and tables with generous spacing; - Zero-config documentation and prototype layouts. Colors: #0172AD, #FFFFFF, #646B79, #373C44 with #0172AD accent. Typography: system-ui.
變體提示詞
📱 行動裝置
Design a mobile app with Pico CSS aesthetics. Use Pico CSS color identity with #0172AD accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Pico CSS style. Use Pico CSS color identity with #0172AD accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Pico CSS design language. Use Pico CSS color identity with #0172AD accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Pico CSS visual identity. Use Pico CSS color identity with #0172AD accents. Compelling, conversion-focused.
使用範例
Pico 文件網站
Web 端Build a documentation site with Pico CSS style: semantic HTML, classless navigation and cards, azure #0172AD links, and soft layered shadows.
Pico 產品原型頁
到達頁Design a product prototype landing page with Pico CSS aesthetics: simple hero, semantic sections, system fonts, and quiet azure accents.
✅ 適用情境
- 文件與部落格
- 快速原型與 MVP
- 極簡內容網站
❌ 不適用情境
- 複雜的企業級後台
- 高客製表單介面
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。