Naive UI 是 TypeScript 優先的 Vue 3 元件庫，以「可程式化主題」著稱：預設主色綠（#18A058），主題變數可在執行時整體重寫；3px 圓角、精確的 1px 描邊、34px 控制項高度帶來緊湊工整的觀感，n-data-table、n-form、n-config-provider 等組合式 API 覆蓋資料情境，表面安靜、零視覺雜訊。適合追求型別安全與主題客製的 Vue 3 管理端。
Naive UI前端框架
提示詞範本
基礎範本
Design a Naive UI-inspired interface. - Vue 3 + TypeScript-first component library; - Default primary #18A058 green with programmable theme overrides; - 3px radii, precise 1px borders, 34px default control height; - Composed APIs: n-data-table, n-form, n-config-provider; - Calm, work-focused surfaces with zero visual noise. Colors: #18A058, #2080F0, #FFFFFF, #333639 with #18A058 accent. Typography: system-ui.
變體提示詞
📱 行動裝置
Design a mobile app with Naive UI aesthetics. Use Naive UI color identity with #18A058 accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Naive UI style. Use Naive UI color identity with #18A058 accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Naive UI design language. Use Naive UI color identity with #18A058 accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Naive UI visual identity. Use Naive UI color identity with #18A058 accents. Compelling, conversion-focused.
使用範例
Naive UI 資料應用
儀表板Build a data app with Naive UI style: n-data-table, n-form validation, and #18A058 accent with programmable themes.
Naive UI 設定主控台
Web 端Create a configuration console with Naive UI design language: settings forms, tooltips, and calm work-focused surfaces.
✅ 適用情境
- Vue 3 專案
- TypeScript 專案
- 可主題化後台
❌ 不適用情境
- React 專案
- 視覺高度客製的品牌介面
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。