SuperAPI AI 工具集

ui-development-react

编程与开发

查看项目

更新于 10-16 04:59

技能介绍

用途:为 Alauda Container Platform(ACP)界面提供统一的设计系统,编码完整视觉标识、设计令牌与实现规范,适用于前端开发新 UI 功能、产品设计维护视觉一致性、全栈集成设计令牌以及采用 ACP 设计标准的团队。

主要能力:提供浅色与深色两套调色板(蓝、绿、青、中性灰及边框色,含具体十六进制值);10px 基础单位间距系统;系统字体栈与字号/字重层级;圆角、阴影与过渡效果;卡片、布局、交互状态与数据展示等设计模式;WCAG AA 对比度、键盘导航与屏幕阅读器无障碍指引;英简中双语本地化建议;深色模式检测与令牌适配方法。

使用方式:按技术栈选择集成方式——Next.js/React 用 design-tokens.ts 配合 Tailwind,CSS/SCSS 用 design-tokens.css 与 CSS 变量,设计工具用 design-tokens.json。建议使用语义化颜色名和间距令牌而非硬编码值,并在深浅两种模式下测试。资料提供的校验命令为:python3 scripts/design-validator.py audit --path=src --mode=dark

限制:警告状态(橙/琥珀)尚未完全实现,错误状态(红)不在当前调色板中;参考与指南文档位于 /references/ 与 /docs/ 目录,具体内容未在资料中展开;令牌带版本号,需查看 design-tokens.json 确认当前版本。价格、平台支持范围与使用步骤等未提供,暂未提供。