github开源AI技能:Awesome DESIGN.md让页面设计无限可能

从代码到设计：探索 Awesome DESIGN.md

项目概述

项目是什么 ：awesome-design-md 是一个 GitHub 仓库，提供了一系列从真实网站中提取的 DESIGN.md 文件，这些文件用于指导 AI 代理生成具有统一视觉风格的用户界面。每个 DESIGN.md 文件包含了网站的视觉主题和氛围、色彩调色板、字体规则、组件样式、布局原则、深度与层次、以及设计原则等内容。

项目地址 ：https://github.com/VoltAgent/awesome-design-md

解决什么问题 ：在现代软件开发中，设计与实现的分离是一个常见的挑战。通过使用 DESIGN.md 文件，开发团队可以明确地定义一个项目的视觉风格和用户体验，从而使自动化的设计过程更加高效和一致。

项目背景 ：Google Stitch 提出了 DESIGN.md 的概念，这是一种纯文本的设计系统文档，AI 代理可以阅读并生成一致的用户界面。awesome-design-md 项目旨在为开发人员提供易于使用的 DESIGN.md 文件集合，帮助他们快速实现项目的视觉设计。

核心功能详解

1. Visual Theme & Atmosphere

功能名称和作用：视觉主题和氛围部分定义了项目的整体视觉风格和设计哲学。

使用场景和适用情况：适用于需要明确描述项目视觉风格和氛围的设计团队。

核心代码示例：

markdown 复制代码

# Visual Theme & Atmosphere
## Mood
- Modern
- Minimalist
- Clean

## Density
- Sparse
- Dense

2. Color Palette & Roles

功能名称和作用：颜色调色板和角色部分定义了项目使用的颜色及其功能角色。

使用场景和适用情况：适用于需要定义项目颜色方案的设计团队。

核心代码示例：

markdown 复制代码

# Color Palette & Roles
## Color Name
- Primary
- Secondary
- Tertiary
- Background

## Hex Codes
- Primary: #007bff
- Secondary: #6c757d
- Tertiary: #28a745
- Background: #f8f9fa

3. Typography Rules

功能名称和作用：字体规则部分定义了项目使用的字体家族和层级。

使用场景和适用情况：适用于需要定义项目字体风格的设计团队。

核心代码示例：

markdown 复制代码

# Typography Rules
## Font Families
- Sans-Serif: "Arial", sans-serif
- Serif: "Times New Roman", serif

## Font Hierarchy
| Level | Font Family | Size | Weight |
|-------|-------------|------|--------|
| 1     | "Arial"     | 24px | 700    |
| 2     | "Arial"     | 18px | 400    |
| 3     | "Arial"     | 14px | 400    |

4. Component Stylings

功能名称和作用：组件样式部分定义了项目的按钮、卡片、输入框等组件的样式。

使用场景和适用情况：适用于需要定义项目组件样式的设计团队。

核心代码示例：

markdown 复制代码

# Component Stylings
## Buttons
- Primary: .btn-primary { background: #007bff; color: white; }
- Secondary: .btn-secondary { background: #6c757d; color: white; }

## Cards
- .card { background: #f8f9fa; border-radius: 0.25rem; }
- .card-header { background: #e9ecef; border-bottom: 1px solid #dee2e6; }
- .card-body { padding: 1rem; }

5. Layout Principles

功能名称和作用：布局原则部分定义了项目的间距、网格、空白区域等。

使用场景和适用情况：适用于需要定义项目布局风格的设计团队。

核心代码示例：

markdown 复制代码

# Layout Principles
## Spacing Scale
- 0.25rem
- 0.5rem
- 1rem
- 2rem

## Grid
- .container { max-width: 1200px; margin: auto; }
- .row { display: flex; flex-wrap: wrap; }
- .col-12 { flex: 0 0 100%; }

6. Depth & Elevation

功能名称和作用：深度与层次部分定义了项目的阴影系统和表面层次。

使用场景和适用情况：适用于需要定义项目视觉层次的设计团队。

核心代码示例：

markdown 复制代码

# Depth & Elevation
## Shadow System
- .shadow-sm { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
- .shadow-lg { box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1); }

## Surface Hierarchy
- .surface-1 { background: #f8f9fa; }
- .surface-2 { background: #e9ecef; }

7. Do's and Don'ts

功能名称和作用：设计原则部分定义了项目的正则和反例。

使用场景和适用情况：适用于需要定义项目设计原则的设计团队。

核心代码示例：

markdown 复制代码

# Do's and Don'ts
## Do
- Use consistent font sizes and weights for headings.
- Ensure sufficient contrast between text and background colors.

## Don't
- Avoid using overly complex or inconsistent font hierarchies.
- Do not use too many different shades of gray.

8. Responsive Behavior

功能名称和作用：响应行为部分定义了项目的断点、触控目标和折叠策略。

使用场景和适用情况：适用于需要定义项目响应行为的设计团队。

核心代码示例：

markdown 复制代码

# Responsive Behavior
## Breakpoints
- xs: 0px
- sm: 576px
- md: 768px
- lg: 992px
- xl: 1200px

## Touch Targets
- Ensure all interactive elements have a minimum touch target size of 44x44px.

## Collapsing Strategy
- Use media queries to collapse or expand elements based on screen size.

9. Agent Prompt Guide

功能名称和作用：代理提示指南部分提供了快速颜色参考和使用 AI 代理生成设计的提示。

使用场景和适用情况：适用于需要指导 AI 代理生成设计的设计团队。

核心代码示例：

markdown 复制代码

# Agent Prompt Guide
## Quick Color Reference
- Primary Color: #007bff
- Secondary Color: #6c757d

## Ready-to-Use Prompts
- Build me a page that looks like the Google homepage.
- Design a landing page with a similar visual style to Airbnb.

技术架构分析

技术栈介绍

awesome-design-md 项目使用 Markdown 作为设计系统的描述语言，这意味着任何支持 Markdown 的工具和平台都可以读取和处理这些设计文档。项目本身不依赖于特定的技术栈，而是通过简单的文本文件来定义设计规范。

核心模块和设计模式

核心模块包括设计系统文档的定义和生成过程。设计系统文档通过 Markdown 文件定义，而生成过程则是通过阅读这些文件并根据定义生成相应的用户界面。

架构亮点和创新点

awesome-design-md 的架构亮点在于其简洁性和灵活性。通过使用纯文本的 Markdown 文件，项目能够轻松地被各种工具和平台支持。此外，通过定义清晰的设计规范，项目能够确保生成的用户界面具有高度的一致性。

详细安装指南

环境要求

操作系统：Windows 10 及以上版本，macOS 10.15 及以上版本，Linux 发行版
依赖版本：Node.js 14.0.0 及以上版本

安装前准备

确保已经安装了 Node.js。
确保已经安装了 Git。

基础安装命令

bash 复制代码

git clone https://github.com/VoltAgent/awesome-design-md.git
cd awesome-design-md
npm install

配置说明

环境变量：无需设置环境变量。
配置文件：项目中没有特定的配置文件，所有配置均在 Markdown 文件中定义。

验证安装成功的命令

bash 复制代码

cd preview
python -m http.server 8000

然后在浏览器中打开 http://localhost:8000，查看预览页面。

常见安装问题及解决方案

问题：无法运行预览页面。
- 解决方案 ：确保已安装 Python，然后运行 python -m http.server 8000。

快速入门示例

最简单的 Hello World 示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            color: #343a40;
        }
        .container {
            max-width: 1200px;
            margin: auto;
        }
        .card {
            background: #ffffff;
            border-radius: 0.25rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            padding: 1rem;
        }
        h1 {
            font-size: 24px;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Hello World</h1>
        <p>This is a sample page built using the DESIGN.md file.</p>
    </div>
</body>
</html>

进阶使用示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            color: #343a40;
        }
        .container {
            max-width: 1200px;
            margin: auto;
        }
        .card {
            background: #ffffff;
            border-radius: 0.25rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            padding: 1rem;
        }
        h1 {
            font-size: 24px;
            font-weight: 700;
        }
        .btn-primary {
            background: #007bff;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            cursor: pointer;
        }
        .btn-secondary {
            background: #6c757d;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Hello World</h1>
        <p>This is a sample page built using the DESIGN.md file.</p>
        <button class="btn-primary">Primary Button</button>
        <button class="btn-secondary">Secondary Button</button>
    </div>
</body>
</html>

实际应用场景案例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            color: #343a40;
        }
        .container {
            max-width: 1200px;
            margin: auto;
        }
        .card {
            background: #ffffff;
            border-radius: 0.25rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            padding: 1rem;
        }
        h1 {
            font-size: 24px;
            font-weight: 700;
        }
        .btn-primary {
            background: #007bff;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            cursor: pointer;
        }
        .btn-secondary {
            background: #6c757d;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            cursor: pointer;
        }
        .btn-secondary:hover {
            background: #545b62;
        }
    </style>
</head>
<body>