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 設定コンソール
WebCreate a configuration console with Naive UI design language: settings forms, tooltips, and calm work-focused surfaces.
✅ 適した用途
- Vue 3 プロジェクト
- TypeScript プロジェクト
- テーマ化可能な管理画面
❌ 適さない用途
- React プロジェクト
- ビジュアルを高度にカスタマイズするブランド UI
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。