Anything Ui

AnythingUI模板

一个生产就绪的React Native入门模板，带有设计系统工作流、MCP集成和自动化工具。使用Claude Code和Cursor进行快速开发。

✨ 特性

• 🎨 设计系统优先 -带风格指南的综合设计代币系统
• 🤖 AI优化 -预配置的Claude代码和Cursor集成
• 📱 世博路由器 -具有类型安全的基于文件的路由
• 🎯 TypeScript -整个应用程序的全类型安全
• 🔧 预配置工具 -ESLint、Prettier和开发脚本
• 🚀 快速设置 -交互式设置脚本将在几分钟内开始
• 🎨 构件库 -美观、易用的UI组件
• 📦 状态管理 -Zustand用于简单、可扩展的状态
• 🔐 身份验证就绪 -开箱即用的Supabase集成
• 🎭 MCP服务器 -Figma MCP预配置用于设计导入

🚀 快速开始

1.使用此模板

在GitHub上点击“使用此模板”或克隆：

git clone https://github.com/[your-username]/AnythingUI my-app
cd my-app

2.运行安装程序

npm run setup
# or
bun run setup

这将：

• 配置项目名称和元数据
• 创建 .env 文件
• 设置初始配置

3.安装依赖项

npm install
# or
bun install

4.开始开发

npm start

📖 工作流程

从Figma或Mobbin导入设计

1. 在项目中打开Claude代码
2. 使用 /import-design 命令
3. 提供Figma URL或粘贴截图
4. Claude将提取设计令牌并更新您的设计系统

生成样式指南

/generate-style-guide

这创建了一个全面的风格指南 /design/style-guide.md 与：

• 调色板
• 排版系统
• 间距比例
• 组件样式
• 阴影、动画等

添加新组件

npm run new:component
# or
/add-component (in Claude Code)

添加新屏幕

npm run new:screen
# or
/add-screen (in Claude Code)

📁 项目结构

AnythingUI/
├── app/                      # Expo Router app directory
│   ├── (tabs)/              # Tab navigator screens
│   │   ├── index.tsx        # Home screen
│   │   ├── explore.tsx      # Explore screen
│   │   └── profile.tsx      # Profile screen
│   ├── _layout.tsx          # Root layout
│   └── modal.tsx            # Example modal
├── components/
│   ├── ui/                  # Reusable UI components
│   ├── layout/              # Layout components
│   └── features/            # Feature-specific components
├── constants/               # Design tokens
│   ├── colors.ts
│   ├── typography.ts
│   └── spacing.ts
├── contexts/                # React contexts
├── design/                  # Design system documentation
│   ├── style-guide.md
│   ├── design-tokens.json
│   └── design-references.md
├── lib/                     # Utilities and API clients
├── types/                   # TypeScript types
├── scripts/                 # Automation scripts
└── .claude/                 # Claude Code configuration
    ├── commands/            # Custom slash commands
    └── claude.json          # MCP server config

🎨 设计系统

该模板包括一个完整的设计系统，包括：

• 设计代币 -基于JSON的令牌 /design/design-tokens.json
• 平台文件 -中自动生成的TypeScript常量 /constants/
• 风格指南 -综合文档 /design/style-guide.md
• 构件库 -遵循设计系统的预制组件

使用设计令牌

import { colors, typography, spacing } from '@/constants';

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.background,
    padding: spacing.md,
  },
  title: {
    fontSize: typography.fontSize.h1,
    fontWeight: typography.fontWeight.bold,
    color: colors.text.primary,
  },
});

🤖 Claude代码集成

可用命令

• /generate-style-guide -创建全面的风格指南
• /import-design -从Figma或屏幕截图导入设计
• /add-component -生成新的UI组件
• /add-screen -生成新屏幕

MCP服务器

预配置的MCP服务器：

• Figma MCP -从Figma中提取设计和设计标记
• 可以添加更多服务器 .claude/claude.json

🛠️ 可用脚本

npm start           # Start Expo development server
npm run android     # Run on Android
npm run ios         # Run on iOS
npm run web         # Run on web

npm run setup       # Interactive project setup
npm run new:component   # Generate new component
npm run new:screen      # Generate new screen

npm run lint        # Run ESLint
npm run lint:fix    # Fix ESLint errors
npm run format      # Format code with Prettier
npm run type-check  # TypeScript type checking

📦 技术栈

• 框架： 博览会 ~52.0.0
• 路由： 世博路由器 ~4.0.0
• 语言： TypeScript ~5.3.3
• 国家： 状态 ^5.0.2
• 数据获取： TanStack查询 ^5.28.4
• UI库： React原生纸 ^5.12.5
• 后端： Supabase ^2.39.7
• 图标： Lucide React Native ^0.447.0
• 验证： 黄道 ^3.22.4

🔐 环境变量

复制 .env.example 到 .env 并填写您的值：

EXPO_PUBLIC_SUPABASE_URL=your-supabase-url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
FIGMA_ACCESS_TOKEN=your-figma-token

📝 许可证

麻省理工学院许可证-欢迎将此模板用于任何项目！

🤝 贡献

这是一个模板存储库。请随时根据您的需求进行分叉和定制！

📚 了解更多

• 世博会文件
• React原生文档
• TypeScript文档
• Supabase文档

______________________________________________________________________

内置❤️ 用于快速React Native开发