AetherPane

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

🎨 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 Claude, 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 Ready: Supports Claude Code, Codex, GLM, Kimi, MiniMax, Cursor, Windsurf
• ♿ Accessible: WCAG AA compliant with keyboard navigation
• ✅ Tested: Full test coverage with visual regression
• ⚡ Optimized: 57.65 kB gzipped bundle size

---

🚀 Quick Start

# Install dependencies
npm install

# Start dev server (interactive playground)
npm run dev
# Open http://localhost:5173

CLI Tools (Phase 2):

# Critique your HTML design
node skills/web-ui-polish/tools/cli.cjs critique your-page.html

# Browse and compose patterns
node skills/web-ui-polish/patterns/compose.cjs list
node skills/web-ui-polish/patterns/compose.cjs build --hero hero-centered-cta --theme classic --output landing.html

# Track design evolution
node skills/web-ui-polish/evolution/tracker.cjs init my-project
node skills/web-ui-polish/evolution/tracker.cjs save my-project v1 "Initial version" --file landing.html
node skills/web-ui-polish/evolution/tracker.cjs report my-project

# Allocate tasks to the best AI agent
node skills/web-ui-polish/collaboration/task-allocator.cjs --requirements semantic_html,copywriting

---

🏗️ Project Structure

aetherpane/
├── skills/web-ui-polish/          # AI skill — the core of Phase 1 & 2
│   ├── SKILL.md                   # Skill definition (YAML front matter + instructions)
│   ├── DESIGN_INTELLIGENCE.md     # Aesthetic judgment framework + scoring formulas
│   ├── COLLABORATION.md           # Multi-agent collaboration protocol
│   ├── critique/                  # AI Design Critique system
│   │   ├── critique-engine.cjs    # 4-dimension scoring engine
│   │   ├── report-generator.cjs   # HTML / Markdown / JSON report generation
│   │   └── visualizer.cjs         # Annotate HTML with issue highlights
│   ├── evolution/                 # Design Evolution Tracker
│   │   ├── tracker.cjs            # init / save / history / report commands
│   │   ├── diff-analyzer.cjs      # Structural diff between versions
│   │   └── pattern-extractor.cjs  # Extract improvement patterns from history
│   ├── collaboration/             # Multi-Agent Optimizer
│   │   ├── agent-profiles.json    # Capability profiles for 5 agents
│   │   ├── task-allocator.cjs     # Score + recommend best agent for a task
│   │   └── workflow-optimizer.cjs # Topological sort + parallel grouping
│   ├── patterns/                  # Design Pattern Library
│   │   ├── pattern-registry.json  # Master index
│   │   ├── compose.cjs            # Composition engine (list / show / build)
│   │   ├── hero-patterns/         # 3 hero patterns
│   │   ├── card-patterns/         # 3 card patterns
│   │   └── layout-patterns/       # 3 layout patterns
│   ├── tools/
│   │   └── cli.cjs                # Unified CLI (critique / track / collab / pattern)
│   ├── scripts/                   # Validation scripts
│   │   ├── validate-html.cjs
│   │   ├── validate-a11y.cjs
│   │   ├── validate-tokens.cjs
│   │   └── design-critique.cjs
│   ├── resources/                 # Machine-readable design rules
│   │   ├── style-guide.json
│   │   ├── tokens.json
│   │   ├── theme-personalities.json
│   │   ├── checklist.json
│   │   └── *.md                   # Human-readable rule files
│   ├── examples/                  # 7 golden-standard HTML examples
│   └── learning-data/             # Directory structure for visual learning data
├── src/                           # React demo application
│   ├── pages/                     # Demo pages
│   ├── styles.css                 # Design system styles
│   └── tokens.css                 # Design tokens
└── docs/                          # Documentation

---

🧠 Design Intelligence

AetherPane scores designs across 4 dimensions using executable formulas:

Dimension	Measures
Visual Hierarchy Score (VHS)	Heading contrast, focal points, CTA clarity, spacing tiers
Breathing Space Analysis (BSA)	Section padding, text measure, gap utilities
Glass Quality Metrics (GQM)	Blur strength, backdrop usage, layering depth
Typography Rhythm Score (TRS)	Fluid type, line height, font token usage

Run a critique:

node skills/web-ui-polish/critique/critique-engine.cjs your-page.html

Example output:

╔════════════════════════════════════��═════════╗
║        AetherPane Design Critique            ║
╚══════════════════════════════════════════════╝

File:     landing-classic.html
Grade:    B  (production-ready)
Overall:  8.2/10

  Visual Hierarchy     ██��███████ 10/10
  Breathing Space      ███████░░░  7/10
  Glass Quality        █████████░  9/10
  Typography           ███████░░░  6.5/10

Issues:
  ⚠ [WARNING] No fluid typography (clamp()) detected
    → Use clamp() for headings so they scale with viewport

---

🧩 Pattern Library

9 production-ready design patterns with variable substitution:

Category	Patterns
Hero	hero-centered-cta (9.0) · hero-split-content (8.8) · hero-video-background (8.5)
Card	card-feature-grid (9.0) · card-testimonial (8.5) · card-pricing-table (8.7)
Layout	layout-sidebar-content (8.8) · layout-masonry-grid (8.3) · layout-bento-box (8.6)

Compose a full page from patterns:

node skills/web-ui-polish/patterns/compose.cjs build \
  --hero hero-centered-cta \
  --theme classic \
  --output landing.html

---

🤝 Multi-Agent Collaboration

Agent capability profiles are defined in collaboration/agent-profiles.json. The task allocator recommends the best agent for any given task:

# Find the best agent for HTML structure + accessibility work
node skills/web-ui-polish/collaboration/task-allocator.cjs \
  --requirements semantic_html,accessibility,complex_layouts

# Output:
# Recommended: claude-code (score: 7)
# Ranking: claude-code (7) > cursor (5) > kimi (3) > glm (2) > windsurf (2)

---

📄 For AI Agents

AetherPane is designed to be used by AI agents. See SKILL.md for the full skill definition with YAML front matter.

Supported agents:

• Claude Code — Structure, layout, accessibility
• GLM — Chinese content, localization, copywriting
• Kimi — Visual polish, glass effects, theme application
• Cursor / Windsurf — General frontend development

---

📚 Documentation

• Skill Definition — How AI agents use this skill
• Design Intelligence — Scoring formulas and judgment framework
• Collaboration Protocol — Multi-agent workflow
• Pattern Library — Pattern usage and composition
• CLI Reference — All CLI commands
• For AI Agents — Project guidance for coding agents

---

🧪 Testing

# Run all tests
npm run test:run

# Build for production
npm run build

# Validate an HTML file
node skills/web-ui-polish/scripts/validate-html.cjs path/to/page.html
node skills/web-ui-polish/scripts/validate-a11y.cjs path/to/page.html

# Run design critique
node skills/web-ui-polish/critique/critique-engine.cjs path/to/page.html

---

📄 License

MIT License — see LICENSE for details.

---

中文

🎨 什么是 AetherPane？

AetherPane 是一个 AI 优先的 Web UI 系统，帮助 AI 编码代理（Claude Code、Codex、GLM、Kimi、MiniMax、Cursor、Windsurf 等）生成高质量、精美的前端页面。它不仅仅是一个组件库，而是一个完整的设计智能平台，包含设计评审、演化追踪、多代理协作和可复用模式库。

✨ 特性

设计系统

• 🎨 三套高级主题：可切换的 Classic、Editorial、Signal 风格
• 🎮 交互式 Playground：编辑 HTML 并实时预览效果
• 📦 基础组件：Tabs、Dropdown、Tooltip、Modal、Drawer、Toast
• 📄 四种页面类型：Landing、Showcase、Dashboard、Settings 及模板
• 🎯 设计 Tokens：所有设计变量可视化并可复制

AI 智能（Phase 1 & 2）

• 🧠 设计智能系统：美学判断框架，包含视觉层次、呼吸空间、玻璃质量、排版节奏四维评分
• 🔍 AI 设计评审：自动分析设计质量，给出问题位置、严重程度和代码修复建议
• 📊 演化追踪器：逐版本追踪设计改进，自动提取改进模式
• 🤝 多代理协作优化器：在 Claude、GLM、Kimi、Cursor、Windsurf 之间智能分配任务
• 🧩 设计模式库：9 个生产就绪的设计模式（Hero × 3、Card × 3、Layout × 3）及组合引擎
• 🛠️ CLI 工具：统一的命令行接口

---

🚀 快速开始

# 安装依赖
npm install

# 启动开发服务器（交互式 Playground）
npm run dev
# 打开 http://localhost:5173

CLI 工具（Phase 2）：

# 评审 HTML 设计质量
node skills/web-ui-polish/tools/cli.cjs critique your-page.html

# 浏览和组合设计模式
node skills/web-ui-polish/patterns/compose.cjs list
node skills/web-ui-polish/patterns/compose.cjs build --hero hero-centered-cta --theme classic --output landing.html

# 追踪设计演化
node skills/web-ui-polish/evolution/tracker.cjs init my-project
node skills/web-ui-polish/evolution/tracker.cjs save my-project v1 "初始版本" --file landing.html

# 为任务分配最合适的 AI 代理
node skills/web-ui-polish/collaboration/task-allocator.cjs --requirements semantic_html,copywriting

---

📄 许可证

MIT License - 详见 LICENSE

---

⭐ Star this repo if you find it helpful!

Made with ❤️ by the AetherPane community