Open Claude UI qo‘llanmasi: yuqori aniqlikdagi AI suhbat interfeysi va ishlab chiqarish darajasidagi interaktiv animatsiyalarni yaratish

Loyiha haqida

open-claude-ui zamonaviy desktop AI mijozlari uchun ochiq kodli UI komponentlar kutubxonasi va animatsiya dvigatelidir. Loyiha REA reverse engineering freymvorki asosida statik AST tahlili, yopiq kodni deobfuskatsiya qilish, runtime kuzatuvi va ASAR resurslarini ajratish ishlarini amalga oshiradi hamda tadqiqot natijalarini qayta foydalanish mumkin bo‘lgan React komponentlari, Hooks, mavzu uslublari va texnik hujjatlar ko‘rinishida jamlaydi.

U faqat interfeys ko‘rinishini takrorlamaydi, balki o‘zaro aloqa sifatiga ta’sir qiluvchi muhandislik mexanizmlarini ham tiklaydi: fizik prujina parametrlari, CJK kiritish usulini himoyalash, aylantirish chetlarida so‘nish, oqimli xabarlarni aylantirishni boshqarish, kursor markazli masshtablash, sudrash o‘lik zonasi va Web Audio orqali sintez qilinadigan ogohlantirish tovushlari.

Muvofiqlik izohi: loyiha tijoriy shriftlar, yozuv fayllari kabi xususiy ikkilik aktivlarni tarqatmaydi; buning o‘rniga tizim shriftlari zaxira steki va Web Audio API asosidagi sof kodli ovoz effektlaridan foydalanadi. Loyiha MIT License asosida tarqatiladi, tegishli natijalar ta’lim, tadqiqot va muhandislik almashinuvi uchun ishlatiladi.

Qaysi loyihalar uchun mos

Agar siz AI chat mijozi, model konsoli, vosita chaqiruvlarini tasdiqlash interfeysi, desktop yordamchi, media ko‘ruvchi yoki ko‘p agentli hamkorlik makonini ishlab chiqayotgan bo‘lsangiz, vizual tokenlar va murakkab o‘zaro aloqalarni qayta sozlamasdan, ushbu repozitoriydan kerakli komponentlarni import qilishingiz mumkin.

• Web AI ilovalari: sessiya pufakchalari, boy matnli kiritish maydoni, model almashtirgich va Token panelidan foydalaning.
• Oqimli generatsiya interfeysi: aylantirish pinlari, fikrlash jarayonini yig‘ish va so‘nuvchi niqoblardan foydalaning.
• Desktop ilovalari: Electron oynalar fabrikasi, macOS sarlavha paneli va Vibrancy material sxemasidan foydalaning.
• Artifacts va multimedia ilovalari: ustunlararo sudrash, media lightbox, umumiy element o‘tishlari va iframe sandbox ko‘prigidan foydalaning.
• Inklyuziv ilovalar: WAI-ARIA tamoyillariga mos Roving TabIndex fokus navigatsiyasi Hookidan foydalaning.

Asosiy imkoniyatlar

Dizayn tokenlari va vizual tizim

Loyiha Surface 0 dan Surface 3 gacha bo‘lgan past kontrastli sirt pog‘onalarini, terrakota to‘q sariq #d97757 rangini, yuqori DPI ekranlardagi soch tolasidek ingichka chegara kompensatsiyasini, tizim shriftlari zaxira stekini hamda tugmalar, panellar, pufakchalar va kiritish maydonlari uchun burchak radiuslari matritsasini taqdim etadi. Global mavzu o‘zgaruvchilari va asosiy keyframe’lar code-examples/cds-theme.css faylida jamlangan.

30 ta mustaqil kod moduli

Repozitoriyda 11 ta asosiy atomar boshqaruv elementi va 19 ta arxitektura yoki o‘zaro aloqa moduli mavjud. Komponent manba kodi code-examples ichida, yagona TypeScript eksport nuqtasi esa src/index.ts da joylashgan. Ushbu modullar tugmalar, segmentli tanlov, kiritish maydonlari, sessiya pufakchalari, MCP qaror kartalari, media ko‘ruvchi, oqimli Diff, desktop oynalari va ko‘p agentli canvas kabi holatlarni qamrab oladi.

Production darajasidagi o‘zaro aloqa mexanizmlari

• Bouncy, Snappy, Gentle va Heavy Snap nomli 4 ta fizik prujina presetlari.
• Aylantirish sohalari 7 pog‘onali nochiziqli Alpha niqobidan foydalanadi va tepaga yoki pastga yetilganiga qarab dinamik ravishda moslashadi.
• Kiritish maydoni CJK kiritish usulini isComposing va keyCode === 229 shartlari orqali ikki karra himoyalaydi.
• Oqimli chiqishda 40px pastki tolerantlik va 150ms qo‘lda aylantirish sovitish vaqti ishlatiladi, bu avtomatik aylantirishning ko‘rish oynasini egallab olishiga yo‘l qo‘ymaydi.
• Mikrofon to‘lqin shaklida 8% shovqin chegarasi va 0.7 darajali Gamma siqish ishlatiladi.
• Sudrash va galereya o‘zaro aloqalarida qo‘lning kichik titrashlarini filtrlash uchun 4px ko‘rsatkich harakati o‘lik zonasi qo‘shilgan.

Oflayn komponent ko‘rigi

Repozitoriyda bitta fayldan iborat interaktiv storybook docs/claude-components-storybook.html ham mavjud. Mahalliy development serverini ishga tushirmasdan terrakota ranglar tizimi, qorong‘i rejim, tugma reaksiyalari, segmentli kapsulalar, prujina animatsiyalari, biriktirma plitkalari va nusxalash holati animatsiyasini ko‘rish mumkin.

O‘rnatish va muhitni tayyorlash

Texnologik stekni tekshirish

Repozitoriydagi belgilarga ko‘ra, loyiha quyidagi muhitga ega bo‘lishi tavsiya etiladi:

• React 18 yoki undan yuqori versiya.
• TypeScript 5.5 yoki undan yuqori versiya.
• Tailwind CSS 3.4 yoki undan yuqori versiya.
• Framer Motion 11 yoki undan yuqori versiya.

README muayyan paket menejeri uchun o‘rnatish buyrug‘ini bermaydi. Boshlashdan oldin ish maydoningiz, Git bog‘liqliklari yoki paketni nashr qilish usuliga muvofiq loyiha open-claude-ui yo‘li orqali foydalaniladigan holatga keltirilishi va yuqoridagi tengdosh texnologiyalar steki sozlangan bo‘lishi kerak.

Avval oflayn storybookni ko‘ring

Repozitoriy manba kodini olgan bo‘lsangiz, avval ko‘rish faylini bevosita ochishingiz mumkin:

open docs/claude-components-storybook.html

Bu qadam biznes loyihasini o‘zgartirmasdan komponentlarning vizual ko‘rinishi, qorong‘i mavzu va interaktiv animatsiyalar loyiha talablariga mosligini tekshirishga yordam beradi.

Mavzu uslublarini sozlash

Global CSS ni ulash

Ilovaning global uslublar kirish nuqtasida CDS mavzu faylini ulang. Unda CSS maxsus xususiyatlari va komponentlar uchun zarur keyframe’lar mavjud:

@import "open-claude-ui/code-examples/cds-theme.css";

Ushbu mavzu sirt ranglari, terrakota brend rangi, chegaralar, soyalar va animatsiya asoslarini taqdim etadi. Komponentlar orasidagi izchillikni saqlash uchun mavjud CSS o‘zgaruvchilaridan ustun foydalanish va har bir komponentda ranglarni takroran qattiq kodlamaslik tavsiya etiladi.

Tailwind konfiguratsiyasini kengaytirish

Loyihaning tailwind.config.js faylida repozitoriy taqdim etgan mavzu kengaytmasini yuklang:

const cdsTheme = require("open-claude-ui/code-examples/tailwind.config.js");

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/open-claude-ui/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      ...cdsTheme.theme.extend
    }
  }
};

content massivi ilovangiz manba kodini hamda open-claude-ui ichida Tailwind sinf nomlari mavjud fayllarni qamrab olishi kerak. Aks holda production build vaqtida komponentlar ishlatadigan utility sinflari yaratilmasligi mumkin.

Asosiy foydalanish: model boshqaruvi va chat kiritish qismini yaratish

Quyidagi misol uchta asosiy modulni birlashtiradi:

1. ScrollFadeContainer aylantiriladigan sohaga yuqori va pastki chetlarda so‘nish effektini qo‘shadi.
2. ModelSwitcherWithTokenGauge model tanlovi, Extended Thinking holati va Token byudjetini ko‘rsatadi.
3. ChatComposer asosiy xabar kiritish va yuborish callbackini taqdim etadi.

import React, { useState } from 'react';
import {
  ChatComposer,
  ModelSwitcherWithTokenGauge,
  ScrollFadeContainer
} from 'open-claude-ui';

export function App() {
  const [model, setModel] = useState<
    'sonnet-3.5' | 'haiku-3.5' | 'opus-3'
  >('sonnet-3.5');
  const [thinking, setThinking] = useState(true);

  return (
    <div className="flex h-screen w-full bg-[var(--cds-surface-1)]">
      <ScrollFadeContainer
        axis="vertical"
        fadeSize={32}
        className="flex-1 p-6"
      >
        <div className="mx-auto max-w-3xl space-y-4">
          <ModelSwitcherWithTokenGauge
            currentModel={model}
            onModelChange={setModel}
            extendedThinking={thinking}
            onThinkingChange={setThinking}
            tokenBudget={{
              inputTokens: 12400,
              outputTokens: 3200,
              cacheReadTokens: 48000,
              cacheWriteTokens: 16000,
              maxContextWindow: 200000
            }}
          />

          <ChatComposer
            onSend={(text) => console.log('Send message:', text)}
          />
        </div>
      </ScrollFadeContainer>
    </div>
  );
}

Holat boshqaruvini tushunish

currentModel va extendedThinking ilova qatlami tomonidan boshqariladi, shuning uchun model almashtirgichni haqiqiy model so‘rovi konfiguratsiyasi bilan sinxronlashtirish mumkin. Misoldagi tokenBudget kirish, chiqish, keshdan o‘qish, keshga yozish va maksimal kontekst oynasini panelga alohida uzatadi.

Misolda ChatComposer ning onSend callbacki faqat jurnal chiqaradi. Haqiqiy loyihaga ulaganda bu callback ichida sessiya xizmatingizni chaqirishingiz, xabarlar ro‘yxatini yangilashingiz va oqimli javob holatini ishga tushirishingiz mumkin.

Ko‘p ishlatiladigan komponentlarni tanlash qo‘llanmasi

Asosiy boshqaruv elementlari

• CdsButton: XS, SM, MD, LG o‘lchamlari hamda Primary, Secondary, Ghost, Outline, Danger variantlarini taqdim etadi.
• SegmentedControl: rejimlarni almashtirish uchun ishlatiladi; sof geometrik joylashuv va Framer Motion layoutId animatsiya sxemasini qo‘llab-quvvatlaydi.
• StatusIndicators: terrakota nafas chirog‘i, real vaqt faoliyat impulsi, uch nuqtali fikrlash animatsiyasi va skelet bo‘ylab nur sochilishini o‘z ichiga oladi.
• ConfirmationDialog: oddiy yoki xavfli amallarni tasdiqlash uchun ishlatiladi; xiralashtirilgan niqob va klaviatura fokusini cheklashni o‘z ichiga oladi.
• AttachmentCard: desktop plitkasi va kiritish maydonidagi satr ichki kapsulasi ko‘rinishidagi ikki xil biriktirma taqdimotini qo‘llab-quvvatlaydi.

Sessiya va vosita chaqiruvlari

• ChatMessageBubbles: foydalanuvchi pufakchasi va yordamchining shaffof tipografik ko‘rinishini ajratadi.
• ThinkingAccordion: yig‘iladigan fikrlash jarayonini ko‘rsatadi va generatsiya paytida majburan ochiq holda saqlanishi mumkin.
• RichComposerWithMentions: / buyruqlari, @ konteksti va Token prognoziga ega kiritish terminali uchun mos.
• McpToolDecisionCard: vositani avtorizatsiya qilish jarayoni uchun ishlatiladi va pending_approval, running, success hamda error holatlarini qamrab oladi.

Media, kod va Artifacts

• MediaLightboxViewer: 75vw galereya yo‘lagi, kursor markazli Pan/Zoom, sudrash o‘lik zonasi va Ctrl bilan g‘ildirak orqali masshtablashni taqdim etadi.
• ArtifactsSplitPaneResizer: ikki ustunli masshtablash, chetni yig‘ish, ikki marta bosganda 50/50 holatiga yopishish va iframe ko‘rsatkich hodisalari xalaqitini boshqaradi.
• EpitaxyIframeBridge: Origin tekshiruvi va izolyatsiyalangan postMessage RPC protokoli orqali preview sandboxiga ulanadi.
• StreamingDiffViewer: inkremental oqimli qo‘shishni hamda birlashtirilgan va yonma-yon ikki xil Diff rejimini qo‘llab-quvvatlaydi.
• CodeBlock: kod konteyneri va 2.5 soniyalik nusxalash holatining so‘nishini taqdim etadi.

Ilg‘or amaliyotlar

Xitoy, yapon va koreyscha kiritish usullarini himoyalash

Agar chat kiritish maydoni klaviatura hodisalarini mustaqil ravishda kengaytirishi kerak bo‘lsa, kiritish usuli kompozitsiyasini himoyalashni saqlab qolish shart. Foydalanuvchi pinyin yoki kana nomzodlar oynasida Enter tugmasini bosganda, xabar yuborilmasligi kerak. Loyihada ikki tomonlama tekshiruv qo‘llanadi:

const composing =
  event.nativeEvent.isComposing || event.keyCode === 229;

if (event.key === 'Enter' && !composing) {
  // Xabarni yuborish
}

Escape tugmasi uchun ham kiritish usulining nomzodlar qatlami yopilayotganda hodisaning yuqoriga tarqalib, dialog oynasini tasodifan yopishiga yo‘l qo‘ymaslik kerak.

Oqimli chiqish scroll joylashuvini egallab olmasin

Uzluksiz qo‘shiladigan tokenlarni boshqarish uchun useClaudeScrollPinning dan foydalanish mumkin. Uning asosiy strategiyasiga pastki qism uchun 40px tolerantlik, foydalanuvchi scroll qilganidan keyingi 150ms sovish davri va 35vh elastik bufer kiradi. Foydalanuvchi pastki qism yaqinida turganda, interfeys chiqishni kuzatib borishi mumkin; foydalanuvchi tarixiy xabarlarni ko‘rish uchun yuqoriga qo‘lda scroll qilishi bilanoq, avtomatik scroll ko‘rinish oynasini darhol pastga qaytarmasligi kerak.

Animatsiya presetlaridan yagona tarzda foydalanish

Loyiha ClaudeMotionPresets.ts faylida sozlangan to‘rtta prujina sxemasini taqdim etadi. Yangi komponent ishlab chiqishda har bir animatsiya uchun qattiqlik va so‘nishni o‘zboshimchalik bilan belgilash o‘rniga Bouncy, Snappy, Gentle yoki Heavy Snap presetlaridan qayta foydalanish afzal. Shu orqali tugmalar, panellar, sudrab joyiga biriktirish va umumiy elementlar o‘tishlari yagona fizik uslubni saqlaydi.

iframe ustunlarini to‘g‘ri sudrash

Bo‘luvchi chiziq iframe ustidan o‘tkazilganda, iframe ko‘rsatkich hodisalarini tutib olib, sudrashni to‘xtatib qo‘yishi mumkin. ArtifactsSplitPaneResizer sudrash faollashganda hodisalarni yutib yuborishning oldini olish mexanizmini yoqadi hamda 4px harakat o‘lik zonasi, chekka cheklovlari va ikki marta bosganda markazga biriktirish funksiyasi bilan ishlaydi. Agar ilovada Artifacts ko‘rib chiqish oynasi mavjud bo‘lsa, faqat bo‘luvchi chiziqning o‘zidagi sichqoncha hodisalarini tinglash o‘rniga ushbu moduldan qayta foydalanish kerak.

Klaviatura foydalanuvchilari uchun to‘liq navigatsiyani saqlash

useClaudeRovingFocus bir o‘lchamli yoki ikki o‘lchamli yo‘nalish tugmalari navigatsiyasini, Home va End orqali chegaralarga o‘tishni hamda RTL oynavand akslantirishni qo‘llab-quvvatlaydi. Model panjarasi, biriktirmalar ro‘yxati yoki vosita kartalari qatorini yaratishda to‘g‘ri ARIA semantikasi va ko‘rinadigan fokus holatini ham saqlash kerak.

Model cheklovlari va xizmat xatolarini qayta ishlash

useRateLimitBackoff 429 va 503 javoblariga mo‘ljallangan bo‘lib, kesilgan eksponensial kechikish, jitter qo‘shish hamda uch marta avtomatik sug‘urta uzgichni tiklash mexanizmini taqdim etadi. U model so‘rovlari qatlamida foydalanish uchun mos, biroq biznes mantiqi qachon qayta urinish, qachon xatoni ko‘rsatish va qachon foydalanuvchiga qo‘lda tiklashga ruxsat berishni o‘z API javob tuzilmasiga ko‘ra belgilashi kerak.

Texnik qo‘llanma orqali chuqurroq o‘rganish

Komponentlar manba kodidan tashqari, repozitoriyda 3 000 satrdan ortiq dizayn tizimi texnik qo‘llanmasi ham mavjud. Uni quyidagi tartibda o‘qish tavsiya etiladi:

1. Avval dizayn falsafasi, Surface ranglar pog‘onalari, burchaklar matritsasi va soch tolasidek ingichka chegara qoidalarini o‘qing.
2. Keyin tugmalar, segmentli boshqaruvlar, holat indikatorlari va tasdiqlash dialoglarini o‘rganing.
3. Shundan so‘ng sessiya kiritishi, CJK himoyasi, model almashtirish va MCP holatlar mashinasini tadqiq qiling.
4. Murakkab animatsiyalar kerak bo‘lganda, prujina parametrlari, atrof-muhit yorug‘ligi va scroll niqoblarini ko‘rib chiqing.
5. Desktop, media vositalari yoki hamkorlik makonlarini ishlab chiqishda tegishli tizim arxitekturasi boblarini o‘qing.

To‘liq qo‘llanma docs/Claude Design System (CDS).md manzilida joylashgan. Loyihaning teskari tahlil ishlari REA yordamida bajarilgan.

AI Coding Agent bilan hamkorlik

Repozitoriyda AGENTS.md, CLAUDE.md, .cursorrules va Copilot ko‘rsatmalari fayli mavjud. Cursor, Claude Code, GitHub Copilot kabi vositalar yordamida yangi interfeys yaratishda Agentdan repozitoriydagi mavjud tokenlar, prujina presetlari, chegara tamoyillari va kiritish usuli himoyasi qoidalariga rioya qilishni so‘rash mumkin.

Namuna prompt: Iltimos, ushbu repozitoriydagi AGENTS.md qoidalariga qat’iy rioya qilib, joriy komponentni CDS sopol dizayn tokenlari va ClaudeMotionPresets prujina presetlari yordamida yarating.

Xulosa

open-claude-ui AI mijozidagi vizual tokenlar, sessiya boshqaruvlari, animatsiya fizikasi, multimedia interaksiyalari va desktop arxitekturasini qayta foydalanish mumkin bo‘lgan modullarga jamlaydi. Integratsiyaning eng ishonchli usuli avval natijani offline Storybook orqali tasdiqlash, keyin mavzu CSS va Tailwind kengaytmalarini kiritish, oxirida esa chat kiritish maydoni, model almashtirgich va scroll konteyneri kabi asosiy komponentlardan boshlab kompozitsiya qilishdir. Oqimli chiqish, CJK kiritishi, iframe sudrashi va klaviatura navigatsiyasi kabi murakkab holatlarda yuzaki uslublarni shunchaki nusxalash o‘rniga, repozitoriydagi mavjud Hooklar va holatlar mashinasidan imkon qadar qayta foydalanish kerak.