Мазмұны
Дизайн қайта жасаушы — әзірленудеҚайта жасалған дизайннан не шығадыСіз оны қалай пайдаланасызШабыт, көшіру емесНеге Rekreate оны жасап жатырЖиі қойылатын сұрақтарДизайнерлер мен фронт-энд әзірлеушілер интерфейстерді күн сайын кері инженериялайды: скриншоттан арақашықтықты өлшейді, шрифт шкаласын болжайды, компонентті қайта құрастырып, оның қалай жұмыс істейтінін көреді. Дизайнды қайта жасау бұл процесті бір қадамға айналдырады — скриншот немесе URL жүктеп, дизайн токендерін, компоненттердің бөлшектелуін және жұмыс істейтін фронт-энд кодын алыңыз.
Бұл құрал Rekreate-де әзірленуде. Төменде ол не шығаратыны және қазіргі құралдарымыз сізге не істей алатыны көрсетілген.
- Кіріс: скриншот, Figma кадры немесе URL. Шығыс: токендер, компоненттер, код.
- Түстер палитрасы, шрифт шкаласы, арақашықтық ритмі, радиустар және көлеңкелер айнымалылар ретінде алынады.
- Компонент деңгейіндегі нәтиже — карта, навигация, баға кестесі — бір тегіс белгілеу блогы емес.
- Әзірленуде.
/makeішіндегі сурет құралдары қазір қолжетімді.
Дизайн қайта жасаушы — әзірленуде
Интерфейсті енгізіп, оның артындағы жүйені алыңыз: атауы бар токендері бар түстер палитрасы, шрифт шкаласы, аралық ритмі, бұрыш радиустары және биіктігі, содан кейін әрбір компонент HTML және CSS арқылы қайта құрастырылған, ақылды класс атаулары және жауап беретін мінез-құлық.
Мақсат біреудің өнімін көшіру емес. Бұл әр дизайнер скриншотқа қоятын сұраққа жауап беру — бұл қалай жасалған? — бірнеше секундта, бір күннің орнына.
Бұл құрал әлі іске қосылған жоқ. Тегін аккаунт жасаңыз, және ол ашылғанда қосымшада хабарлаймыз.
Бүгін не істей аласыз
Rekreate-де қазірдің өзінде жұмыс істейтіндер:
- Фотоны қайта жасау — визуалды, макетті немесе иллюстрацияны өз стиліңізде қайта құрастыру.
- Логотипті қайта жасау — мөлдір фонмен таза бренд активтері.
- Идеограмма — мәтіні оқылатын интерфейс стиліндегі графика.
Код үшін бүгін арнайы скриншоттан кодқа құралды пайдаланыңыз; қайта жасаушы ашылғанда осында оралыңыз.
Қайта жасалған дизайннан не шығады
| Қабат | Жоспарланған нәтиже |
|---|---|
| Түс | Рөлдері бар палитра — бет, мәтін, күңгірт, акцент, семантикалық — CSS айнымалылары ретінде, ашық және қараңғы режимдерде |
| Шрифт | Шрифт отбасылары, қолданылатын шкала, салмақтар, жол биіктігі және әріпаралық арақашықтық |
| Арақашықтық | Негізгі ритм (4/8pt немесе басқа) плюс контейнер ені және аралықтары |
| Компоненттер | Түймелер, карталар, навигация, формалар, кестелер — әрқайсысы оқшауланған HTML және CSS ретінде |
| Күйлер | Қалқымалы, фокус, өшірілген және қате күйлері болжанған жағдайда |
| Қол жетімділік ескертпелері | Контраст ескертулері және жоқ фокус күйлері белгіленеді, үнсіз көшірілмейді |
Сіз оны қалай пайдаланасыз
Сілтемені тастаңыз
Сізге ұнайтын өнімнің скриншоты, Figma кадры немесе тірі URL.
Ауқымды таңдаңыз
Бүкіл экран немесе сізге түсінікті болуы керек бір компонент — баға картасы, бүйірлік панель, бос күй.
Жүйені қарап шығыңыз
Алдымен токендер: палитра дұрыс па, шрифт шкаласы сәйкес келе ме, арақашықтық торда ма? Модель қате болжаған нәрсені түзетіңіз.
Кодты алыңыз
Компоненттерді жобаңызға көшіріңіз немесе командаңыз нақты нәрсені жасағанша оларды анықтама ретінде сақтаңыз.
Шабыт, көшіру емес
Интерфейс үлгілері — ортақ қолөнер. Біреудің логотипі, иллюстрация стилі, арнайы шрифттері, бейнелері және мәтіні сияқты визуалды сәйкестікке ешкім иелік етпейді; бірақ өнімнің визуалды сәйкестігі мен кез келген жеке кодына иелік етіледі. Қайта жасалған дизайн сізге механиканы үйретуі керек, содан кейін оны өз брендіңізбен безендіру керек.
Егер сіздің экраныңыз басқа біреудің экранына ұқсаса, тек логотипі басқаша болса, сіз олардың сәйкестігін көшірдіңіз, құрылымынан үйренген жоқсыз. Токендерді бастапқы нүкте ретінде пайдаланыңыз және оларды өз жүйеңізге қарай жылжытыңыз.
Неге Rekreate оны жасап жатыр
Біздің бүкіл өніміміз бір идеядан тұрады: жұмыс істейтін нәрседен бастаңыз, содан кейін оны өзіңізге бейімдеңіз. Бұл вирустық бейнелерден басталды, жарнамаларға, фотоларға және дауыстарға көшті, ал дизайн интерфейстерге қолданылатын сол қозғалыс.
Бұл сондай-ақ командалар үшін /make отбасын аяқтайды: жарнаманы қайта жасаңыз, қону бетін қайта жасаңыз, оның артындағы дизайн жүйесін қайта жасаңыз — бәрі бір жерде, сіз жұмыс істейтін тілде.
Егер сіз көрші құралдарды қаласаңыз, веб-сайт қайта жасаушыны және қосымша қайта жасаушыны бақылаңыз.
Жиі қойылатын сұрақтар
AI скриншоттан UI дизайнды қайта жасай ала ма?
Иә — көру модельдері суреттен палитра, шрифт шкаласы және орналасуды шығарып, компоненттерді кодта қайта құра алады. Rekreate-дің дизайн қайта жасаушысы әзірленуде; бүгінгі таңда біздің тірі құралдарымыз суреттерді, логотиптерді және бейнелерді қамтиды.
Бұл маған Figma файлдарын бере ме?
Жоспарланған нәтиже — дизайн токендері мен фронт-энд коды. Токендер көптеген дизайн құралдарына таза импортталады, бірақ құрал жұмыс істейтін кодқа жетуге бағытталған.
Біреудің UI-ын қайта жасау заңды ма?
Орналасу және өзара әрекеттесу үлгілері бренд активтері сияқты қорғалмайды. Олардың логотипін, иллюстрацияларын, арнайы шрифттерін, мәтінін немесе жеке кодын қайта пайдаланбаңыз — құрылымды алыңыз, өз сәйкестігіңізді әкеліңіз.
Бұл қараңғы режимді қолдай ма?
Иә, бұл жоспар: токендер әр тақырып бойынша алынады, сондықтан қайта жасалған компоненттер бір режимге қатты кодталудың орнына екі негізде жұмыс істейді.
Бұл қашан іске қосылады?
Әзірге жарияланған күн жоқ. Тегін есептік жазба жасаңыз, және жаңа /make құралдары ашылған кезде қолданбада пайда болады.
Осы уақытта не қолдануым керек?
Rekreate-дің сурет қайта жасаушысы визуалдар үшін және логотип қайта жасаушысы бренд активтері үшін, сонымен қатар белгілеу үшін арнайы скриншоттан кодқа құрал.
Келесі вирустық видеоңызды Rekreate арқылы жасаңыз
Дәлелденген қысқа видеоны табыңыз, оны өз сценарийіңізбен, аватарыңызбен және дауысыңызбен қайта жасаңыз, және Seedance, Kling және Veo арқылы көріністерді бір жұмыс кеңістігінде жасаңыз.
Тегін сынақ нұсқасын бастаңыз →