智能设计系统架构

HTMLPAGE 的设计系统不仅仅是一套静态的 UI 规范，而是一个活的、可进化的智能架构。它基于原子设计（Atomic Design）理论，结合 Design Tokens 技术，并通过 AI 引擎实现动态的样式生成与管理，确保从微小的原子组件到复杂的页面模板都能保持高度的视觉一致性和品牌识别度。

🏗️ 原子设计架构体系

五层构建模型

我们严格遵循原子设计方法论，构建了清晰的组件层级结构：

原子 (Atoms): 不可再分的最小单元（如颜色、字体、图标、按钮）。
分子 (Molecules): 由原子组成的简单功能组（如搜索框 = 输入框 + 按钮）。
生物 (Organisms): 由分子和原子组成的复杂区块（如导航栏、页脚）。
模板 (Templates): 页面级别的布局结构（如博客文章页布局）。
页面 (Pages): 填充了真实内容的模板实例。

组件库架构实现

基于 Vue 3 的组件实现示例

// atoms/Button/Button.vue
<script setup lang="ts">
import { computed } from 'vue';
import { useDesignTokens } from '@/composables/useDesignTokens';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  icon?: string;
}

const props = withDefaults(defineProps<ButtonProps>(), {
  variant: 'primary',
  size: 'md'
});

const tokens = useDesignTokens();

const buttonStyle = computed(() => ({
  backgroundColor: tokens.color[props.variant].main,
  color: tokens.color[props.variant].contrast,
  padding: tokens.spacing[props.size],
  borderRadius: tokens.radius.md,
  fontFamily: tokens.typography.fontFamily.primary
}));
</script>

<template>
  <button class="atomic-btn" :style="buttonStyle">
    <Icon v-if="icon" :name="icon" />
    <slot />
  </button>
</template>

🎨 Design Tokens 引擎

语义化 Token 系统

我们不直接使用十六进制颜色值，而是通过语义化的 Token 来管理设计变量。这使得设计系统具备了极强的可扩展性和主题切换能力。

Token 结构定义 (JSON)

{
  "global": {
    "color": {
      "blue": {
        "500": "#3B82F6",
        "600": "#2563EB"
      },
      "gray": {
        "100": "#F3F4F6",
        "900": "#111827"
      }
    },
    "spacing": {
      "base": "4px",
      "scale": [1, 2, 4, 8, 12, 16]
    }
  },
  "semantic": {
    "primary": {
      "main": "{global.color.blue.500}",
      "hover": "{global.color.blue.600}",
      "text": "{global.color.gray.100}"
    },
    "background": {
      "page": "{global.color.gray.100}",
      "card": "#FFFFFF"
    },
    "text": {
      "body": "{global.color.gray.900}",
      "muted": "{global.color.gray.500}"
    }
  }
}

自动化 CSS 生成

Design Token 引擎会自动将 JSON 配置编译为多平台的样式文件（CSS Variables, SCSS, iOS, Android）。

// build-tokens.js
const StyleDictionary = require('style-dictionary');

StyleDictionary.registerTransform({
  name: 'size/px',
  type: 'value',
  matcher: token => token.attributes.category === 'size',
  transformer: token => `${token.value}px`
});

const sd = StyleDictionary.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{
        destination: '_variables.css',
        format: 'css/variables'
      }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{
        destination: 'tokens.js',
        format: 'javascript/module'
      }]
    }
  }
});

sd.buildAllPlatforms();

🤖 AI 驱动的设计生成

智能样式推导

AI 引擎能够根据用户的品牌描述或上传的 Logo，自动推导出符合品牌调性的 Design Tokens。

品牌 DNA 提取算法

class BrandDNAExtractor:
    def __init__(self):
        self.color_analyzer = ColorPaletteAnalyzer()
        self.font_matcher = FontPairingModel()
        self.mood_classifier = DesignMoodClassifier()
    
    def generate_system_from_brand(self, brand_assets):
        # 1. 提取主色调
        primary_color = self.color_analyzer.extract_dominant(brand_assets.logo)
        
        # 2. 生成配色方案 (互补色、类比色等)
        palette = self.color_analyzer.generate_palette(
            base_color=primary_color,
            scheme='compound'
        )
        
        # 3. 确定设计情绪 (如：现代、复古、商务)
        mood = self.mood_classifier.classify(brand_assets.description)
        
        # 4. 匹配字体系统
        typography = self.font_matcher.suggest_pairing(mood)
        
        # 5. 生成完整 Token 集
        return self.construct_tokens(palette, typography, mood)

布局自适应组合

AI 不仅生成样式，还能根据内容结构自动组合原子组件，生成最佳的生物（Organisms）和模板（Templates）。

内容感知布局：如果标题很长，自动选择垂直堆叠布局；如果图片是竖图，自动调整卡片比例。
响应式重排：自动生成 Mobile, Tablet, Desktop 三端的布局规则，而不仅仅是简单的缩放。

📏 视觉一致性保证

自动化设计 Lint

我们在 CI/CD 流程中集成了设计规范检查工具，确保所有代码都使用了合法的 Design Tokens，而不是硬编码的魔法数值。

Stylelint 插件配置

// .stylelintrc.js
module.exports = {
  plugins: ['stylelint-design-tokens'],
  rules: {
    'design-tokens/value-no-hard-coded': [true, {
      ignoreValues: ['0', '100%', 'inherit', 'transparent'],
      severity: 'error',
      message: 'Please use design tokens instead of hard-coded values.'
    }],
    'design-tokens/color-no-hex': true,
    'design-tokens/font-family-no-string': true
  }
};

视觉回归测试集成

设计系统的每一次变更都会触发全量的组件库视觉回归测试，确保修改不会意外破坏现有的 UI 组件。

组件快照：为每个组件的每个变体（Variant）生成截图。
差异对比：对比新旧版本的截图，差异超过 0.1% 即报警。

🔄 动态主题与暗黑模式

运行时主题切换

得益于 CSS Variables 的使用，我们可以在运行时毫秒级切换整个设计主题，无需重新加载页面。

/* theme-dark.css */
[data-theme='dark'] {
  --color-background-page: #111827;
  --color-text-body: #F9FAFB;
  --color-primary-main: #60A5FA;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

/* theme-light.css */
[data-theme='light'] {
  --color-background-page: #F3F4F6;
  --color-text-body: #111827;
  --color-primary-main: #2563EB;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

智能对比度增强

在生成暗黑模式或高对比度模式时，AI 会自动计算前景色与背景色的对比度（Contrast Ratio），确保符合 WCAG AA 标准（至少 4.5:1）。

🔗 相关技术文档

设计系统是连接品牌创意与工程实现的桥梁。HTMLPAGE 通过智能化的设计系统架构，让每一次生成都既高效又精准。