Design.md Generator

创意输入

设计令牌编辑

基础信息

颜色配置

排版配置

圆角配置

间距配置

组件配置

设计说明

设计概览

颜色说明

排版说明

实时预览

---
version: "alpha"
name: "My Design"

colors:
  primary: "#0284c7"
  secondary: "#38bdf8"
  tertiary: "#0ea5e9"
  neutral: "#334155"
  accent: "#06b6d4"
  surface: "#f8fafc"

typography:
  h1:
    fontFamily: "Inter"
    fontSize: "2rem"
  h2:
    fontFamily: "Inter"
    fontSize: "1.5rem"
  body:
    fontFamily: "Inter"
    fontSize: "1rem"
  caption:
    fontFamily: "Inter"
    fontSize: "0.75rem"

rounded:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    padding: "{spacing.md} {spacing.lg}"
    borderRadius: "{rounded.md}"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "#e2e8f0"
    borderRadius: "{rounded.lg}"
    padding: "{spacing.lg}"
---

## Overview

这是一个现代化的设计系统，包含完整的颜色、排版和组件规范。

## Colors

主色调使用天空蓝色系，营造清爽、专业和可信赖的视觉感受。辅助色用于强调和交互元素。

## Typography

使用 Inter 字体作为主要字体，保持现代简洁的视觉风格。

## Layout

## Elevation & Depth

## Shapes

## Components

### button-primary

- backgroundColor: {colors.primary}
- textColor: #ffffff
- padding: {spacing.md} {spacing.lg}
- borderRadius: {rounded.md}

### card

- backgroundColor: {colors.surface}
- borderColor: #e2e8f0
- borderRadius: {rounded.lg}
- padding: {spacing.lg}