aetherpane

# AetherPane

<div align="center">

**A premium web UI system for AI coding agents**

Transform rough pages into polished interfaces with glassmorphism, Apple-inspired layouts, and three switchable themes.

[English](#english) | [中文](#中文)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
[![Version](https://img.shields.io/badge/version-0.3.0-green.svg)](https://github.com/lihytaihe-lang/aetherpane/releases)

</div>

---

## English

### 🎨 What is AetherPane?

AetherPane is an **AI-first web UI system** that helps coding agents (Claude Code, Codex, GLM, Kimi, MiniMax, Cursor, Windsurf, etc.) generate premium, polished frontend pages. Beyond a component library, it's a complete design intelligence platform with critique, evolution tracking, multi-agent collaboration, and a reusable pattern library.

### ✨ Features

**Design System**
- 🎨 **Three Premium Themes**: Switchable Classic, Editorial, and Signal styles
- 🎮 **Interactive Playground**: Edit HTML and see live preview
- 📦 **Essential Components**: Tabs, Dropdown, Tooltip, Modal, Drawer, Toast
- 📄 **Four Page Types**: Landing, Showcase, Dashboard, Settings with templates
- 🎯 **Design Tokens**: All design variables visualized and copyable

**AI Intelligence (Phase 1 & 2)**
- 🧠 **Design Intelligence System**: Aesthetic judgment framework with Visual Hierarchy, Breathing Space, Glass Quality, and Typography scoring
- 🔍 **AI Design Critique**: Automated quality analysis with issue detection, severity levels, code-fix suggestions, and HTML problem annotation
- 📊 **Evolution Tracker**: Version-by-version design improvement tracking with pattern extraction
- 🤝 **Multi-Agent Collaboration**: Intelligent task allocation across Cursor, GLM, Kimi, Cursor, Windsurf
- 🧩 **Pattern Library**: 9 production-ready design patterns (Hero × 3, Card × 3, Layout × 3) with a composition engine
- 🛠️ **CLI Tool**: Unified command-line interface for all capabilities

**Quality**
- 🤖 **Multi-Agent R