🎨 UI组件预览工具
实时预览和定制各类UI组件样式，支持主题色切换
🎨 主题颜色设置
按钮组件
输入框组件
徽章组件
主要徽章
辅助徽章
描边徽章
成功
警告
危险
进度条组件
项目进度
75%
成功进度
90%
危险进度
45%
开关组件
开关状态 (开)
开关状态 (关)
深色模式
滑块组件
卡片组件
🎨
设计工具
提供丰富的设计组件和模板，帮助设计师快速创建精美界面。
⚡
高效预览
实时预览组件效果，所见即所得，提高设计和开发效率。
🚀
轻量快捷
基于纯前端技术，无需后端支持，打开浏览器即可使用。
标签页组件
提供多种预设组件，包括按钮、输入框、卡片、徽章等常用UI元素。
所有组件均支持主题色定制，可一键切换整体配色方案。
遵循现代设计规范，采用一致的颜色、间距和字体系统。
组件支持响应式设计，完美适配各种屏幕尺寸。
选择主题颜色后，所有组件会自动应用新的配色方案。
点击各个组件可查看对应的HTML和CSS代码，方便复制使用。
提示框组件
✓
操作成功！您的更改已保存。
⚠
请注意，您的设置尚未完成。
✕
发生错误，请稍后重试。
ℹ
提示信息：请仔细阅读以下内容。
列表组件
按钮组件
支持多种样式和状态
输入框组件
验证和状态反馈
卡片组件
灵活的布局容器
工具提示组件
这是上方提示
这是下方提示
这是左侧提示
这是右侧提示
模态框组件
骨架屏组件
代码预览
<button class="openskil-btn openskil-btn-primary"> 主要按钮 </button>
.openskil-btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: #fff; padding: 12px 24px; border-radius: 8px; }
