Asosiy kontentga o'tish

Dizayn tizimi

AppX har bir ilovani kichik dizayn tizimi asosida quradi: constants/ ichidagi ikkita fayl ranglar, shriftlar, oraliqlar, burchak radiuslari va soyalarni saqlaydi. Ekranlar qiymatlarni qo'lda yozmasdan shu fayllarga murojaat qiladi, shuning uchun dizaynni o'zgartirish — bitta tahrir: faylni o'zgartiring (yoki chatda so'rang) va shu qiymatdan foydalanadigan har bir ekran ham o'zgaradi. Bu haqiqiy Expo + React Native kodi, uni o'qish va tahrirlash mumkin.

Loyiha tuzilmasi​

Yaratilgan ilovalarda quyidagilar bo'ladi:

constants/
  colors.ts        ← Ranglar palitrasi
  theme.ts         ← Shriftlar, oraliqlar, burchak radiuslari, soyalar

Ranglar​

constants/colors.ts bitta Colors obyektini eksport qiladi. Quyidagi nomlar boshlang'ich shablondan olingan; ilovangizdagi qiymatlar uning dizayniga moslab yaratiladi.

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;

Ekranlar hex qiymatlarni qo'lda yozmasdan Colors.* ga murojaat qiladi. Butun ilovada urg'u rangini o'zgartirish uchun:

  1. Muharrirda constants/colors.ts ni oching
  2. accent: '#C8A97E' ni o'z rangingizga almashtiring
  3. Saqlang — Colors.accent dan foydalanadigan har bir komponent ko'rinishda yangilanadi

Yoki shunchaki chatda yozing: "Change the accent color to purple #7c3aed" — AppX ranglar faylini yangilaydi.

Oraliqlar, burchaklar va soyalar​

constants/theme.ts barcha ekranlar uchun umumiy o'lchovlarni saqlaydi:

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

Shu fayl fonts va shadows (sm, md, lg, none) ni ham eksport qiladi.

Foydalanish:

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

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

Qorong'i mavzu​

Uni chatda so'rang:

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

Ikonkalar​

AppX barcha ikonkalar uchun lucide-react-native dan foydalanadi. Unda bir xil uslubdagi 1000 dan ortiq ikonka bor.

Foydalanish:

import { Home, User, Settings, ChevronRight } from 'lucide-react-native';
import Colors from '@/constants/colors';

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

Barcha ikonkalarni lucide.dev saytida ko'rishingiz mumkin.

Muayyan ikonkadan foydalanish uchun:

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

Shriftlar​

Mavjud shriftlar: Inter, DM Sans, Manrope, IBM Plex Sans, Space Grotesk, Sora, Outfit, Nunito, Fraunces, Playfair Display, Lora, IBM Plex Mono.

Shriftni almashtirish uchun chatda so'rang:

"Use the Inter font family throughout the app"

Dizayn tizimini sozlash​

Sozlashning eng oson yo'li — chat:

"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 va constants/theme.ts ni yangilaydi va o'zgarishni ekranlaringizga qo'llaydi.

Kreditlar haqida​

Uslubni chat orqali o'zgartirish — boshqa har qanday tahrir kabi: u ish hajmiga qarab hisoblanadi, har bir navbat uchun kamida 1 kredit. Dizayn bosqichi birinchi build'ning bir qismi va reja kartasidagi taxminga kiritilgan. Batafsil: Kreditlar.

Kod muharriri

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

Chat orqali tahrirlash

Ilova uslubini tasvirlab o'zgartiring.

Prompting bo'yicha maslahatlar

Dizaynni aniq tasvirlash.

Kreditlar

Build va tahrirlar qancha turadi.