Перейти к основному содержимому

Дизайн-система

AppX строит каждое приложение на последовательной дизайн-системе — директории constants/, содержащей ваши цвета, типографику и отступы. Поскольку каждый экран ссылается на неё, а не задаёт значения жёстко, глобальное изменение дизайна — это правка в одну строку: измените файл (или просто попросите в чате), и всё приложение обновится. Это настоящий код Expo + React Native, так что вы можете читать и менять любую его часть.

Структура проекта​

Сгенерированные приложения включают:

constants/
  colors.ts        ← Цветовая палитра и семантические цвета
  typography.ts    ← Размеры, насыщенность, межстрочные интервалы
  spacing.ts       ← Шкала отступов и полей
  theme.ts         ← Общий экспорт темы (опционально)

Цвета​

constants/colors.ts определяет все цвета приложения:

export const colors = {
  // Brand
  primary: '#3b82f6',      // Main accent color
  primaryDark: '#2563eb',  // Pressed state
  secondary: '#06b6d4',    // Secondary accent

  // Neutrals
  background: '#ffffff',
  surface: '#f9fafb',
  border: '#e5e7eb',

  // Text
  textPrimary: '#111827',
  textSecondary: '#6b7280',
  textDisabled: '#d1d5db',

  // Semantic
  success: '#22c55e',
  warning: '#f59e0b',
  error: '#ef4444',
  info: '#3b82f6',
};

Каждый компонент ссылается на colors.* вместо жёсткого задания HEX-значений. Чтобы изменить основной цвет во всём приложении:

  1. Откройте constants/colors.ts в редакторе
  2. Измените primary: '#3b82f6' на нужный цвет
  3. Сохраните — все компоненты, использующие colors.primary, обновятся мгновенно

Или просто опишите в чате: «Измени основной брендовый цвет на фиолетовый #7c3aed» — AppX обновит файл цветов.

Типографика​

constants/typography.ts определяет стили текста:

export const typography = {
  // Sizes
  xs: 12,
  sm: 14,
  base: 16,
  lg: 18,
  xl: 20,
  '2xl': 24,
  '3xl': 30,
  '4xl': 36,

  // Weights
  regular: '400' as const,
  medium: '500' as const,
  semibold: '600' as const,
  bold: '700' as const,

  // Line heights
  tight: 1.25,
  normal: 1.5,
  relaxed: 1.75,
};

Использование в компонентах:

title: {
  fontSize: typography['2xl'],
  fontWeight: typography.bold,
  lineHeight: typography['2xl'] * typography.tight,
}

Тёмная тема​

Если попросить AppX добавить тёмную тему, он генерирует двойную цветовую систему:

export const lightColors = {
  background: '#ffffff',
  surface: '#f9fafb',
  textPrimary: '#111827',
  // ...
};

export const darkColors = {
  background: '#111827',
  surface: '#1f2937',
  textPrimary: '#f9fafb',
  // ...
};

Хук useTheme() читает предпочтение цветовой схемы устройства и возвращает нужную палитру.

Чтобы добавить тёмную тему в приложение:

"Add dark mode support. The app should follow the device's system setting (light/dark)."

Иконки​

AppX использует lucide-react-native для всех иконок. Библиотека включает более 1000 иконок в едином стиле.

Использование:

import { Home, User, Settings, ChevronRight } from 'lucide-react-native';

// In JSX:
<Home size={24} color={colors.primary} />

Просматривайте доступные иконки на lucide.dev.

Чтобы использовать конкретную иконку в дизайне:

"Use the Bell icon from lucide-react-native in the header for notifications"

Шрифты​

По умолчанию приложения AppX используют системный шрифт (San Francisco на iOS, Roboto на Android). Для кастомного шрифта:

"Use the Inter font family throughout the app"

AppX выполнит:

  1. Импортирует expo-font
  2. Загрузит шрифт из Google Fonts через @expo-google-fonts/inter
  3. Обновит _layout.tsx для ожидания загрузки шрифтов
  4. Применит Inter во всех константах типографики

Доступные семейства шрифтов из @expo-google-fonts: Inter, Roboto, Poppins, Nunito, Raleway, Montserrat, Lato, Merriweather и сотни других.

Шкала отступов​

Последовательные отступы делают вёрстку аккуратной:

export const spacing = {
  xs: 4,
  sm: 8,
  md: 12,
  base: 16,
  lg: 20,
  xl: 24,
  '2xl': 32,
  '3xl': 48,
};

Использование:

container: {
  padding: spacing.base,
  gap: spacing.md,
}

Настройка дизайн-системы​

Проще всего настраивать через чат:

"Update the design system:
- Primary color: #7c3aed (purple)
- Background: #faf5ff (very light purple)
- Rounded corners: 16px for cards, 8px for inputs
- Font: Poppins, semi-bold for headings"

AppX обновит constants/colors.ts, constants/typography.ts и применит изменения радиуса скругления по всем вашим компонентам.

Заметка о кредитах​

Редизайн через чат — это такая же правка, как любая другая: она тарифицируется по тому, сколько фактически меняется, с минимумом 1 кредит за ход, а повторы в рамках того же хода бесплатны. Если вы попросите AppX сгенерировать свежую дизайн-систему с нуля, это примерно 1 кредит. См. Кредиты для полной картины.

Редактор кода

Редактируйте файлы дизайна напрямую.

Редактирование через чат

Меняйте стиль приложения, описывая его.

Советы по промптам

Чётко описывайте замысел дизайна.

Кредиты

Сколько стоят правки и генерация.