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 编程工具使用。