Radix UI 是 Headless 原語的開創者：Dialog、DropdownMenu、Tooltip、Tabs 只交付行為與可存取性，外觀完全由你決定。官方範例以近黑（#161618）表面配高對比白字、Inter 緊字距、8px 圓角與低透明髮絲描邊展示，焦點環高對比、樣式由 data-state 驅動。適合從零建構設計系統、只要可靠互動基座的團隊。
Radix UI前端框架
提示詞範本
基礎範本
Design a Radix UI-inspired interface. - Unstyled, accessible primitives: Dialog, DropdownMenu, Tooltip, Tabs; - Near-black #161618 surfaces with crisp white text; - Inter with tight tracking; 8px radii, hairline borders at low white opacity; - High-contrast focus rings and data-state driven styling; - Bring your own visual layer — Radix ships behavior, not skin. Colors: #161618, #FFFFFF, #1F1F23, #2A2A30 with #161618 accent. Typography: Inter.
變體提示詞
📱 行動裝置
Design a mobile app with Radix UI aesthetics. Use Radix UI color identity with #161618 accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Radix UI style. Use Radix UI color identity with #161618 accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Radix UI design language. Use Radix UI color identity with #161618 accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Radix UI visual identity. Use Radix UI color identity with #161618 accents. Compelling, conversion-focused.
使用範例
Radix 元件演練場
Web 端Build a component playground with Radix UI primitives: dialogs, dropdown menus, tooltips, and accessible keyboard navigation.
Radix 深色應用外殼
儀表板Create a dark app shell with Radix UI design language: tabs, popovers, and precise focus rings on #161618 surfaces.
✅ 適用情境
- React 專案
- 設計系統底座
- 無障礙關鍵情境
❌ 不適用情境
- 需要現成設計語言的團隊
- 非 React 技術堆疊
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。