# DesignFast

[![npm version](https://img.shields.io/npm/v/designfast.svg)](https://www.npmjs.com/package/designfast)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Node](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen)](https://nodejs.org/)
[![PowerShell](https://img.shields.io/badge/powershell-%3E%3D7.0-blue)](https://github.com/PowerShell/PowerShell)

基于 AI 的设计原型平台，支持 Git 版本控制和多格式导出。

## 🚀 安装

```bash
npm install -g designfast
```

## ✨ 功能特性

- **AI 驱动设计生成** - 从需求自动生成线框图和原型
- **设计系统管理** - 创建和管理一致的设计规范
- **交互式原型** - 使用 Tailwind CSS 生成 HTML/CSS 原型
- **自动化测试** - 集成 Playwright 进行可访问性和响应式测试
- **版本控制** - 基于 Git 的设计文件管理
- **多格式导出** - 导出为 HTML、PDF 和 JSON 格式

## 📋 环境要求

- **Node.js** 18.0.0 或更高版本
- **PowerShell** 7.0 或更高版本（适用于 Windows、macOS 或 Linux）
- **iFlow CLI**（可选，用于 AI 代理平台）

## 🎯 快速开始

### 1. 初始化设计项目

```bash
designfast init
```

### 2. 可用命令

```bash
# 设计文档生成
designfast generate-design-doc    # 从需求生成设计文档

# 原型相关
designfast create-prototype        # 创建交互式原型
designfast iterate-design          # 迭代优化设计

# 设计系统
designfast create-design-system    # 创建设计系统
designfast apply-design-system     # 应用设计系统

# 测试
designfast test-prototype          # 测试原型功能
designfast test-responsive         # 响应式测试

# 导出和版本
designfast export                  # 导出设计到多种格式
designfast version                 # 管理设计版本
```

## 📚 核心概念

### 设计工作流

1. **需求分析** - 解析需求并提取设计要点
2. **线框图创建** - 生成低保真线框图
3. **原型构建** - 创建交互式 HTML/CSS 原型
4. **测试验证** - 自动化可访问性和响应式测试
5. **导出分享** - 导出为多种格式

### 设计系统

创建一致的设计模式：

```bash
designfast design-system create my-design-system
designfast design-system apply my-design-system
```

### 版本控制

所有设计文件都通过 Git 进行版本管理：

```bash
designfast version list
designfast version create v1.0.0
designfast version compare v1.0.0 v1.1.0
```

## 🔧 配置

DesignFast 使用基于文件的配置，项目组织在 `workspace/` 目录中：

```
workspace/
├── designs/          # 设计文档和线框图
├── prototypes/       # HTML/CSS 原型
├── exports/          # 导出文件（HTML、PDF、JSON）
└── tests/           # Playwright 测试套件
```

## 🧪 测试

DesignFast 集成了 Playwright 进行自动化测试：

- **可访问性测试** - WCAG 2.1 AA 合规性验证
- **响应式测试** - 多设备布局测试
- **功能测试** - 用户交互验证
- **性能测试** - 加载时间和性能指标

## 🎨 设计系统

内置设计令牌和组件库支持：

- 色彩调色板
- 排版比例
- 间距系统
- 组件模式
- 可访问性指南

## 📖 文档

- [GitHub 仓库](https://github.com/okokkoko4414/DesignFast)
- [问题反馈](https://github.com/okokkoko4414/DesignFast/issues)

## 🤝 贡献

欢迎贡献！请访问我们的 [GitHub 仓库](https://github.com/okokkoko4414/DesignFast) 查看贡献指南。

## 📄 许可证

MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

## 🔗 相关链接

- **npm**: https://www.npmjs.com/package/designfast
- **GitHub**: https://github.com/okokkoko4414/DesignFast
- **问题**: https://github.com/okokkoko4414/DesignFast/issues

## 💡 支持

如果遇到任何问题或有疑问：

1. 查看[文档](https://github.com/okokkoko4414/DesignFast)
2. 搜索[现有问题](https://github.com/okokkoko4414/DesignFast/issues)
3. 创建[新问题](https://github.com/okokkoko4414/DesignFast/issues/new)

---

**用 ❤️ 为设计师和开发者打造**