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