Run any Skill in Manus with one click

ui-design

Stars3

Forks0

UpdatedMay 29, 2026 at 02:12

sw-ui component library for enterprise admin dashboards and AI-powered interfaces. Pure HTML+CSS+JS, Ant Design Pro style, zero dependencies. Use when building admin pages, management systems, dashboards, forms, tables, or any enterprise UI — including AI chat interfaces, streaming output, and loading states. Provides exact class names and copy-paste HTML snippets for buttons, cards, forms, tables, modals, drawers, alerts, navigation, AI chat input boxes, message bubbles, thinking animations, and more.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

tangvhon-art

tangvhon-art/UIdesign-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	ui-design
description	sw-ui component library for enterprise admin dashboards and AI-powered interfaces. Pure HTML+CSS+JS, Ant Design Pro style, zero dependencies. Use when building admin pages, management systems, dashboards, forms, tables, or any enterprise UI — including AI chat interfaces, streaming output, and loading states. Provides exact class names and copy-paste HTML snippets for buttons, cards, forms, tables, modals, drawers, alerts, navigation, AI chat input boxes, message bubbles, thinking animations, and more.
metadata	{"author":"UI Design Team","version":"1.1.0"}

sw-ui 企业级组件库

框架无关 · 零依赖 · Ant Design Pro 风格 · 支持亮色/暗色主题 · 内置 AI 对话组件

使用前必读

第一步：确认平台

PC 端（中后台/管理系统/AI 产品）→ 使用本规范
移动端（H5/小程序）→ 不适用本规范，改用移动端方案

第二步：读取参考文件

需求	读取文件
查找组件 HTML 结构和 class 名	`references/component-classes.md`
查找 CSS 变量（颜色/间距/阴影）	`references/design-tokens.md`

第三步：直接复制代码 references/component-classes.md 中每个组件都有完整可用的 HTML 片段，按需提取相关内容进行复用，复用过程中不要改变 UI 风格。

页面初始化模板

每个页面必须按此顺序引入，缺一不可：

<!doctype html>
<html lang="zh-CN" data-theme="light">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>页面标题</title>
  <link rel="stylesheet" href="./styles/tokens.css" />
  <link rel="stylesheet" href="./styles/base.css" />
  <link rel="stylesheet" href="./styles/components.css" />
</head>
<body>
  <!-- 页面内容 -->
  <script src="./scripts/app.js"></script>
</body>
</html>

切换暗色主题：将 <html data-theme="light"> 改为 <html data-theme="dark">

文件结构（每个业务系统完整复制）

业务系统/
├── index.html
├── styles/
│   ├── tokens.css       ← 完整复制，禁止修改
│   ├── base.css         ← 完整复制，禁止修改
│   └── components.css   ← 完整复制，禁止修改
└── scripts/
    └── app.js           ← 完整复制，禁止修改

业务自定义样式写在单独的 styles/custom.css 中，不覆盖上述四个文件。

组件速查索引

按需求关键词快速定位 → 在 references/component-classes.md 中找对应章节：

需求关键词	组件章节
整体页面框架、侧边栏、顶部栏	`## 布局 Shell`
栅格、列、行排列	`## 栅格 Grid`
卡片、面板、容器	`## 卡片 Card`
按钮、操作、提交、新增、删除	`## 按钮 Button`
输入框、文本域、搜索框	`## 输入 Input`
下拉选择、Select	`## 下拉选择 Select`
复选框、单选框、开关	`## 选择控件 Checkbox/Radio/Switch`
标签、状态标记、徽标、头像	`## 标签 Tag / 徽标 Badge / 头像 Avatar`
侧边菜单、导航菜单、垂直菜单	`## 菜单 Menu` → 垂直菜单
顶部导航栏、水平菜单	`## 菜单 Menu` → 水平菜单（`sw-menu--horizontal`）
顶部导航下拉、悬浮子菜单、树形导航	`## 菜单 Menu` → 水平菜单 + 悬浮下拉子菜单（`sw-menu__item--has-sub`）
子菜单、可展开菜单	`## 菜单 Menu` → 可展开父菜单项（`aria-expanded`）
日期选择、日历	`## 日期时间选择器` → 仅日期选择（DatePicker）
日期范围、起止日期	`## 日期时间选择器` → 日期范围选择（DateRangePicker）
时间选择、时分秒	`## 日期时间选择器` → 时分秒选择（TimePicker）
仅时分、HH:mm	`## 日期时间选择器` → 仅时分选择（`data-tp-mode="hm"`）
时间范围、开始结束时间	`## 日期时间选择器` → 时间范围选择（TimeRangePicker）
标签页、Tab 切换	`## 标签页 Tabs`
分段控制器、视图切换	`## 分段控制器 Segmented`
表格、列表数据、行列	`## 表格 Table`
分页	`## 分页 Pagination`
进度条	`## 进度条 Progress`
步骤条、流程	`## 步骤条 Steps`
数据统计、KPI 卡片	`## 数据统计 KPI / Statistic`
详情描述、字段展示	`## 描述列表 Descriptions`
时间轴、操作记录	`## 时间轴 Timeline`
列表、信息流	`## 列表 List`
树形结构、层级	`## 树形 Tree`
提示条、警告、成功/错误提示	`## 提示 Alert`
弹窗、确认框、对话框	`## 弹窗 Modal`
抽屉、侧滑面板	`## 抽屉 Drawer`
消息通知、Toast	`## 消息通知 Toast`
折叠面板、手风琴	`## 折叠面板 Collapse`
空状态、无数据	`## 空状态 Empty`
骨架屏、加载占位	`## 骨架屏 Skeleton`
横幅、宣传区块	`## 横幅 Banner`
文件上传	`## 上传 Upload`
分割线	`## 分割线 Divider`
下拉菜单、用户菜单	`## 下拉菜单 Dropdown`
标题、正文、文本样式	`## 排版 Typography`
页签导航、多标签页、浏览器标签、动态追加 tab	`## 页签导航 PageTabs`
AI 对话框、聊天界面、对话输入框	`## AI 对话 AI Chat`
AI 等待、思考动画、三点跳动	`## AI 对话 AI Chat` → 完整对话框 → 等待状态
流式输出、打字光标、逐字显示	`## AI 对话 AI Chat` → 完整对话框 → 流式输出
AI 加载提示、处理中提示条	`## AI 对话 AI Chat` → 行内等待提示条（`sw-ai-loading`）
多步骤进度、AI 任务步骤	`## AI 对话 AI Chat` → 进度式等待（`sw-ai-progress`）
CSS 颜色变量、间距变量	`references/design-tokens.md`

强制规则

class 名必须从 references/component-classes.md 中复制，不得自行命名
四个核心文件（tokens/base/components/app.js）禁止修改
交互组件（Modal、Drawer、Select、Switch、Tabs、Toast、AI Chat 等）依赖 app.js，必须引入
需要 JS 交互的组件必须保留对应的 id 或 data-* 属性，否则交互失效：
- Modal：id="swModalOverlay" / id="swCloseModal" / id="swOkModal"
- Drawer：id="swDrawer" / id="swCloseDrawer"
- Select：data-open="false" 属性
- Switch：role="switch" + aria-checked 属性
- Tabs：data-tab + data-tabpanel + data-tabs-root 属性
- Collapse：data-open="false" 属性
- Toast：页面需有 <div class="sw-toasts"></div> 容器
- DatePicker（单日期）：id="dp1"，内部 id="dp1-text" / id="dp1-cal" / data-dp-today / data-dp-ok
- DateRangePicker：id="drp1"，内部 id="drp1-start" / id="drp1-end" / id="drp1-cal-l" / id="drp1-cal-r"
- TimePicker（时分秒）：id="tp1"，内部 id="tp1-text" / id="tp1-cols" / data-tp-now / data-tp-ok
- TimePicker（仅时分）：在 sw-timepicker 上加 data-tp-mode="hm"，id 自定义（如 id="tp2"），内部 id="{id}-text" / id="{id}-cols"
- TimeRangePicker：id 自定义（如 id="tr1"），内部 id="tr1-start" / id="tr1-end"，data-tr-mode="hm" 可选，data-tr-now / data-tr-ok
- 水平菜单下拉：父菜单项加 sw-menu__item--has-sub，内部放 .sw-menu__dropdown，纯 CSS hover 驱动，无需额外 id
- AI Chat：容器需设置固定高度（如 style="height:600px"）；sw-chat__textarea + sw-chat__send 由 app.js 自动初始化，无需额外 id；sw-ai-loading / sw-ai-progress 为纯 CSS，无需 JS
- PageTabs：sw-pagetabs 由 app.js 自动初始化；触发器加 data-pagetab-open="标题" 即可动态追加 tab；多个页签栏时用 data-pagetab-target="barId" 指定目标栏