轻盈的玻璃。
清晰的设计。

让光与背景进入界面。
一套为现代 Web 与 AI 开发打造的 React 设计系统。

开始使用探索组件

30 个 React 组件浅色 / 深色Skill + MCP

ALPINE STILLNESS材质 × 光 × 背景

让界面轻一点。

专注于此刻的工作

专注放松创作

允许桌面通知

工作区名称

当前模式：专注

Quiet mountains

一段静谧的工作时光

真实组件，可直接操作对比实色材质

MATERIAL, WITH PURPOSE

玻璃，不止于模糊。

背景透射、定向边缘光、内壁高光与柔和投影，共同建立真实的空间层次。

Solid稳定的内容表面

让文字与内容安心落在清晰的背景上。

Regular Glass轻盈的浮动功能层

背景依然可感知，功能层轻盈而清楚。

Thick Frosted柔和的厚磨砂层

增加遮蔽与厚度，让复杂背景退后一步。

进入主题实验室，比较材质 →

THE BUILDING BLOCKS

从一个按钮，到完整界面。

按任务组织的 30 个组件。真实属性、可操作示例与同源代码。

查看全部组件 →

基础

CwaProvider · Surface · Button · IconButton

布局与排版

Stack · Text · Heading · Separator

数据输入

Field · Input · Textarea · Checkbox · RadioGroup · Switch · Select · Slider · SegmentedControl

数据展示

Badge · Avatar · Card · Skeleton

反馈与浮层

Spinner · Tooltip · Popover · DropdownMenu · Dialog · Sheet · ToastProvider · Alert

A SMALL START

把设计带进你的代码。

统一主题与视觉偏好，保持熟悉的 React 使用方式。
从现有源码 workspace 开始，用真实 API 构建。

阅读上手指南 →

import { CwaProvider, Surface, Button } from "@cwa-design/react";
import "@cwa-design/react/styles.css";

<CwaProvider theme="system">
  <Surface material="glass">
    <Button onClick={save}>保存更改</Button>
  </Surface>
</CwaProvider>

DESIGNED TO FEEL NATURAL

每一次操作，都有回应。

即时按下反馈、连续的弹簧运动、清晰的焦点。
设计规则落实到实际组件，也尊重人的偏好。

自然的材质

同一功能板共用玻璃外壳，减少重复背景采样。

连续的运动

可中断的反馈，让输入始终优先。

清楚的语义

表单、焦点与键盘路径保留原生习惯。

自由的偏好

深色、减少动态与减少透明均有对应设计。

了解设计语言 →

READY FOR YOUR AGENT

让 AI 理解设计，
也理解真实代码。

组件、文档、Skill 与 MCP 使用同一份版本化契约。
模型能查询真实属性、源码与材质规则，再生成你的界面。

接入 AI 开发获取 Skill

CWA DESIGN · REGISTRY

{
  "version": "0.1.0-alpha.4",
  "component": "Surface",
  "props": {
    "material": [
      "solid",
      "frosted",
      "glass",
      "glass-clear"
    ]
  },
  "examples": "真实源码 + SHA-256",
  "tools": [
    "Skill",
    "CLI",
    "MCP"
  ]
}

同版本，可追溯，可离线读取

COMPOSE SOMETHING USEFUL