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

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

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

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

В сгенерированных приложениях есть:

constants/
  colors.ts        ← Цветовая палитра
  theme.ts         ← Шрифты, отступы, скругления, тени

Цвета​

constants/colors.ts экспортирует один объект Colors. Имена ниже взяты из стартового шаблона; значения в вашем приложении генерируются под его дизайн.

const Colors = {
  background: '#FAFAF8',
  surface: '#F0EDE8',
  card: '#FFFFFF',
  primary: '#0D0D0D',
  secondary: '#6B6B6B',
  tertiary: '#A3A3A3',
  accent: '#C8A97E',
  divider: '#E8E5E0',
  error: '#C44D4D',
  // …
};

export { Colors };
export default Colors;

Экраны ссылаются на Colors.*, а не прописывают hex-значения. Чтобы изменить акцентный цвет во всём приложении:

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

Или просто опишите это в чате: «Change the accent color to purple #7c3aed» — AppX обновит файл цветов.

Отступы, скругления и тени​

constants/theme.ts хранит шкалы, общие для всех экранов:

export const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 48,
};

export const borderRadius = {
  sm: 6,
  md: 12,
  lg: 20,
  xl: 28,
  full: 999,
};

Тот же файл экспортирует fonts и shadows (sm, md, lg, none).

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

import { spacing, borderRadius, shadows } from '@/constants/theme';

card: {
  padding: spacing.md,
  borderRadius: borderRadius.md,
  ...shadows.sm,
}

Тёмная тема​

Попросите о ней в чате:

"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';
import Colors from '@/constants/colors';

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

Все иконки можно посмотреть на lucide.dev.

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

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

Шрифты​

Доступные шрифты: Inter, DM Sans, Manrope, IBM Plex Sans, Space Grotesk, Sora, Outfit, Nunito, Fraunces, Playfair Display, Lora, IBM Plex Mono.

Чтобы сменить шрифт, попросите в чате:

"Use the Inter font family throughout the app"

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

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

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

AppX обновит constants/colors.ts и constants/theme.ts и применит изменение на экранах.

О кредитах​

Смена стиля через чат — такая же правка, как любая другая: она считается по объёму работы, минимум 1 кредит за ход. Шаг дизайна входит в первую сборку и учтён в оценке на карточке плана. Подробности — в разделе Кредиты.

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

Правьте файлы дизайна напрямую.

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

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

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

Как ясно описать дизайн.

Кредиты

Сколько стоят сборки и правки.