---
name: kole-ui
description: Use this skill to generate well-branded interfaces for Kole UI. Contains colors, type, fonts, assets, and UI kit for prototyping dashboard UIs.
user-invocable: true
---
# Kole UI Design Skill

Read the `README.md` file within this skill, and explore the other available files.

If creating visual artifacts, copy assets out and create static HTML files. If working on production code, read the rules here to become an expert in designing with this brand.

## Quick map

- `README.md` — brand context, content fundamentals, visual foundations (read first)
- `colors_and_type.css` — drop-in CSS variables for colors, type, radius, shadow, spacing
- `css.json` — structured token understanding source
- `components.css` — aggregated component CSS extracted from previews
- `components/index.json` — 全量组件索引（79 项实现：10 个核心规范组件 + 69 个扩展，其中 6 个核心含契约与预览，含规格批次映射）
- `preview/` — small HTML cards illustrating foundations and components
- `uikit-plan.json` — component whitelist and UIKit planner output (only if present)
- `library-consumption.json` — recommended downstream read order

## Essentials at a glance

- Brand primary #2F54EB — 理性克制的科技蓝，B 端中后台核心交互色，无暖色点缀
- Radius 2/4/6/8 — 紧凑克制：2px 标签徽章、4px 控件、6px 面板、8px 卡片弹窗
- 32px 默认控件高度，4px 基准间距，8-pt 网格体系
- Type: PingFang SC / 思源黑体（中文）；Inter / DIN（数字英文）；无外部字体引入
- Voice: 中文优先，专业中性，界面无 emoji，信息密度适中
- Shadows 3 层：低 0 1px 4px / 中 0 4px 12px / 高 0 8px 24px，克制安静
- 桌面端优先（最小宽度 1280px），不推荐移动端

## Components

| Slug | Name | Key Insight |
|------|------|-------------|
| button | 按钮 Button | 5 种类型 × 3 尺寸，主色 #2F54EB 驱动，最小宽度 64px |
| input | 输入框 Input | 32/40/24px 三档高度，聚焦外发光 rgba(47,84,235,0.2) |
| select | 选择器 Select | 触发器同 Input，选中项浅蓝底 #F0F5FF + 品牌色文字 |
| table | 数据表格 Table | 48px 行高，表头 #FAFAFA，选中行 #F0F5FF，数字右对齐 |
| card | 卡片 Card | 圆角 8px，边框或低阴影，16/24px 内边距 |
| modal | 对话框 Modal | 320/480/680px 三档宽度，遮罩 rgba(0,0,0,0.45) |

核心契约之外的 **73 个组件**也已实现于 `../../frameworks/`（HTML / CSS / JSX / Vue2 / Vue3 五种形态，含核心规范中的 tag / tabs / steps / breadcrumb），完整清单与规格批次映射见 `components/index.json`。导航 / 菜单 / 标签三个 fixed slot 已由 SideMenu / Dropdown / Tag 实现补齐（见 `uikit-plan.json`）。