Design System · Markdown

将设计系统转化为 AI 提示词

可视化定义设计系统规则，导出结构化的 .md 启动提示词用于 Vibe Coding，引导 LLM 在规范内生成前端 UI。

使用说明

开箱模板

从预设一键载入，再在编辑器中微调

Google Material Design 3

Dynamic Color、M3 令牌体系、Roboto、圆角组件

从此模板开始

Apple HIG (iOS/iPadOS)

SF Pro、动态字号、系统色板、安全区适配

从此模板开始

Microsoft Fluent 2

Segoe UI、4px 栅格、流畅动效、层级阴影

从此模板开始

NVIDIA 企业科技

NVIDIA Green、暗色主题、数据可视化、技术感

从此模板开始

Tesla 极简未来

极致留白、无衬线、低饱和、大字体排版

从此模板开始

Amazon 电商务实

Amazon Orange、高信息密度、清晰 CTA、务实高效

从此模板开始

iOS App（清新系）

蓝白主色、SF 体系、8pt 栅格

从此模板开始

SaaS Dashboard（专业系）

深蓝灰、数据后台、Inter

从此模板开始

内容类 App（温暖系）

暖绿主色、阅读友好

从此模板开始

灵感库

58 套品牌设计规范，拖拽旋转 3D 探索

我的模板

加载中…

可视化参数

色板、字号阶梯、间距尺度与组件规则分区编辑

DESIGN.md

Preview

Colors

Type Scale

Display 48

Heading 32

Body 16

Caption 12

Spacing

双模式预览

可视化看板与 Markdown 源码一键复制

云端与分享

Supabase 保存、历史记录与公开分享页