Ripple UI 是主打「極簡冷淡」的純 CSS 語意化元件框架，與 daisyUI 同賽道但體積更小：不需要任何 JavaScript，元件類名直接接入 Tailwind 外掛，配色克制、線條乾淨；深色模式透過 CSS 自訂屬性切換。適合對包體積敏感、追求冷靜觀感的內容型與工具型專案。
Ripple UI前端框架
提示詞範本
基礎範本
Design a Ripple UI-inspired interface. - Pure CSS semantic components: no JavaScript required; - Minimal, cold aesthetic with restrained color palette; - Tailwind CSS plugin for seamless integration; - Ultra-lightweight: minimal bundle size impact; - Dark mode support with CSS custom properties. Colors: #6366F1, #10B981, #F59E0B, #EF4444 with #6366F1 accent. Typography: system-ui.
變體提示詞
📱 行動裝置
Design a mobile app with Ripple UI aesthetics. Use Ripple UI color identity with #6366F1 accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Ripple UI style. Use Ripple UI color identity with #6366F1 accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Ripple UI design language. Use Ripple UI color identity with #6366F1 accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Ripple UI visual identity. Use Ripple UI color identity with #6366F1 accents. Compelling, conversion-focused.
使用範例
Ripple UI Web 應用
Web 端Build a web app with Ripple UI design language, semantic CSS classes, and #6366F1 color system.
Ripple UI 儀表板
儀表板Create a dashboard using Ripple UI style with minimal components and Tailwind CSS.
✅ 適用情境
- 框架生態系
- 輕量專案
- 純 CSS 方案
❌ 不適用情境
- 複雜互動元件需求
- 非 Tailwind 專案
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。