Skip to main content

Dizayn tizimi

AppX har bir ilovani izchil dizayn tizimi asosida quradi — constants/ katalogi sizning ranglaringiz, tipografiyangiz va bo'shliqlaringizni saqlaydi. Har bir ekran qiymatlarni qattiq kodlash o'rniga unga murojaat qilgani uchun, global dizayn o'zgarishi bir qatorlik tahrir: faylni o'zgartiring (yoki shunchaki chatda so'rang), butun ilova esa yangilanadi. Bu haqiqiy Expo + React Native kodi, shuning uchun siz uning istalgan qismini o'qishingiz va o'zgartirishingiz mumkin.

Loyiha tuzilishi​

Yaratilgan ilovalar quyidagilarni o'z ichiga oladi:

constants/
  colors.ts        ← Color palette and semantic colors
  typography.ts    ← Font sizes, weights, line heights
  spacing.ts       ← Padding and margin scale
  theme.ts         ← Combined theme export (optional)

Ranglar​

constants/colors.ts ilovangizda ishlatiladigan barcha ranglarni belgilaydi:

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',
};

Har bir komponent hex qiymatlarini qattiq kodlash o'rniga colors.* ga murojaat qiladi. Butun ilovangiz bo'ylab asosiy rangni o'zgartirish uchun:

  1. Muharrirda constants/colors.ts ni oching
  2. primary: '#3b82f6' ni o'z rangingizga o'zgartiring
  3. Saqlang — colors.primary dan foydalanadigan barcha komponentlar bir zumda yangilanadi

Yoki shunchaki chatda tasvirlab bering: "Asosiy brend rangini binafsha #7c3aed ga o'zgartiring" — AppX ranglar faylini yangilaydi.

Tipografiya​

constants/typography.ts matn uslublarini belgilaydi:

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,
};

Komponentlarda foydalanish:

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

Qorong'i rejim (Dark Mode)​

Agar AppX'dan qorong'i rejim qo'shishni so'rasangiz, u ikki rangli tizim yaratadi:

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

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

useTheme() hook'i qurilmaning rang sxemasi afzalligini o'qiydi va to'g'ri palitrani qaytaradi.

Ilovangizga qorong'i rejim qo'shish uchun:

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

Belgichalar (Icons)​

AppX barcha belgichalar uchun lucide-react-native dan foydalanadi. U izchil uslubdagi 1000 dan ortiq belgichani o'z ichiga oladi.

Foydalanish:

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

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

Mavjud belgichalarni lucide.dev saytida ko'rib chiqing.

Dizayningizda muayyan belgichadan foydalanish uchun:

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

Shriftlar​

Sukut bo'yicha AppX ilovalari tizim shriftidan foydalanadi (iOS'da San Francisco, Android'da Roboto). Maxsus shrift uchun:

"Use the Inter font family throughout the app"

AppX quyidagilarni bajaradi:

  1. expo-font ni import qiladi
  2. Shriftni Google Fonts'dan @expo-google-fonts/inter orqali yuklaydi
  3. Shriftlar yuklanishini kutish uchun _layout.tsx ni yangilaydi
  4. Inter'ni butun tipografiya konstantalari bo'ylab qo'llaydi

@expo-google-fonts dan mavjud shrift oilalari: Inter, Roboto, Poppins, Nunito, Raleway, Montserrat, Lato, Merriweather va yuzlab boshqalar.

Bo'shliq shkalasi (Spacing Scale)​

Izchil bo'shliq joylashuvlarni jilolangan ko'rinishga keltiradi:

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

Foydalanish:

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

Dizayn tizimini sozlash​

Sozlashning eng oddiy usuli — chat orqali:

"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 ni yangilaydi va komponentlaringiz bo'ylab border radius o'zgarishlarini qo'llaydi.

Kreditlar haqida eslatma​

Chat orqali qayta dizayn qilish boshqa har qanday tahrir kabi — u aslida qancha o'zgargani bo'yicha o'lchanadi, har bir navbatda minimal 1 kredit, va xuddi shu navbatdagi qayta urinishlar bepul. Agar AppX'dan noldan yangi dizayn tizimi yaratishni so'rasangiz, bu taxminan 1 kredit. To'liq manzara uchun Kreditlar bo'limiga qarang.

Kod muharriri

Dizayn fayllarini to'g'ridan-to'g'ri tahrirlang.

Chat orqali tahrirlash

Ilovangizni tasvirlab uslubini o'zgartiring.

Prompting bo'yicha maslahatlar

Dizayn niyatini aniq tasvirlang.

Kreditlar

Tahrirlar va generatsiya qancha turadi.