专为 Vibe Coding 打造

可视化构建
你的设计系统

一个在线工具,帮助你理解设计系统概念、可视化配置设计令牌、并生成 AI 编程工具可用的规则文件。让 Cursor、Antigravity 更懂你的设计。

核心功能

从学习概念到生成代码,一站式解决设计系统搭建问题

可视化配置
通过直观的界面配置颜色、字体、间距等设计令牌,实时预览效果
代码生成
一键生成 Cursor Rules、Antigravity Skills、CSS Variables 等格式
概念学习
从零开始理解设计系统,交互式教程让编程小白也能轻松上手
AI 优化
专为 Vibe Coding 范式设计,让 AI 工具更准确理解你的设计意图

多种输出格式

支持主流 AI 编程工具和前端框架,一次配置,多处使用

Design System Skill

AI IDE 完整技能包

CursorCopilotWindsurfClineAugmentAntigravity

Cursor Rules

.cursorrules 文件

Antigravity Rules

架构漂移防护规则

CSS Variables

CSS 自定义属性

JSON Tokens

设计令牌 JSON

Tailwind Config

Tailwind 配置

准备好开始了吗?

只需几分钟,创建一个专属于你的设计系统,让 AI 更懂你的设计意图

立即开始