Данный гайд подойдёт для тех кто хочет себе UI "Как на маджестике"
Это первый мой гайд так что не судите строго.
1. Нам понадобится:
IDE с AI - Trae (https://www.trae.ai)
Cloud маджа - https://cloud.majestic-files.net/
И немного времени.
2. Заходим на Cloud и видим что ничего нету
Открываем Консоль через F12 или Правой кнопкой мыши -> Посмотреть код
В строку вписываем: app.$store.state;и открываем Target должно отобразится.
После чего выбираем вам нужный и вызываем через команду предварительно в строку название Target которое вписывали:
app.$store.state.Название Target например iphone
.show = true;
Чтобы скачать можно это сделать как в ручную так и через команду в консоли вводим:
Нажимаете скачать.
3. После скачивания переходим в Trae
3 файла которые были скачены переносим в папку с src_cef желательно в отедльную папку как например 123 как у меня
После чего пишем промт ИИ.
123 Вот тут страница приложения Настройки его перенеси на svelte в папку apps с отдельным файлом css папку под css создай и от туда бери
Чтобы посмотреть что получилось в браузере вам нужно:
Открыть cmd в папке Src_cef и написать команду npm run dev
После чего если такая уж лень даёте ещё 1 промт ИИ на то чтобы сразу же открывался вам нужно UI.
После того как ИИ всё сделает можем проверять что получилось
Если будет не сходится с тем что вы хотели пишите дальше правки не нужно писать по типу "Сделай в точности как в файлах он этого не поймёт и сделает хуже"
Лучше либо скриншоты прикладывайте что именно хотит изменить либо смотрите у какого класса нужно подправить или изменить тогда он вам сделает так как надо
Вроде понятно объяснил и надеюсь что люди прекратят покупать UI маджестика чтобы поставить себе на сервер.
Лучше делать свои либо "Не спиздил а переделал под себя
"
ВНИМАНИЕ через эту полу бесплатную ИИ подключить UI будет либо очень сложно либо криво лучше за подключением обратитесь к квалифицированному Backend разработчику
Это первый мой гайд так что не судите строго.
1. Нам понадобится:
IDE с AI - Trae (https://www.trae.ai)
Cloud маджа - https://cloud.majestic-files.net/
И немного времени.
2. Заходим на Cloud и видим что ничего нету
Открываем Консоль через F12 или Правой кнопкой мыши -> Посмотреть код
В строку вписываем: app.$store.state;и открываем Target должно отобразится.
После чего выбираем вам нужный и вызываем через команду предварительно в строку название Target которое вписывали:
app.$store.state.Название Target например iphone
.show = true;
Чтобы скачать можно это сделать как в ручную так и через команду в консоли вводим:
JavaScript:
(function() {
// Удаляем старый UI если есть
const oldUI = document.getElementById('download-ui-panel');
if (oldUI) {
oldUI.remove();
}
// Создаем контейнер для UI
const panel = document.createElement('div');
panel.id = 'download-ui-panel';
panel.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
z-index: 999999;
background: white;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
padding: 20px;
min-width: 280px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
`;
// Заголовок
const title = document.createElement('div');
title.textContent = '📥 Скачать HTML, CSS и JS';
title.style.cssText = `
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 15px;
text-align: center;
`;
panel.appendChild(title);
// Поле ввода для класса
const inputLabel = document.createElement('label');
inputLabel.textContent = 'Класс элемента (оставьте пустым для всей страницы):';
inputLabel.style.cssText = `
display: block;
font-size: 13px;
color: #666;
margin-bottom: 8px;
font-weight: 500;
`;
panel.appendChild(inputLabel);
const classInput = document.createElement('input');
classInput.type = 'text';
classInput.placeholder = 'Например: .modal, .container, #myId';
classInput.id = 'download-class-input';
classInput.style.cssText = `
width: 100%;
padding: 10px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 14px;
margin-bottom: 15px;
box-sizing: border-box;
transition: border-color 0.3s ease;
`;
classInput.onfocus = () => {
classInput.style.borderColor = '#667eea';
};
classInput.onblur = () => {
classInput.style.borderColor = '#e0e0e0';
};
panel.appendChild(classInput);
// Кнопка скачивания
const downloadBtn = document.createElement('button');
downloadBtn.textContent = 'Скачать';
downloadBtn.style.cssText = `
width: 100%;
padding: 12px 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
`;
// Hover эффект
downloadBtn.onmouseenter = () => {
downloadBtn.style.transform = 'translateY(-2px)';
downloadBtn.style.boxShadow = '0 6px 20px rgba(102, 126, 234, 0.6)';
};
downloadBtn.onmouseleave = () => {
downloadBtn.style.transform = 'translateY(0)';
downloadBtn.style.boxShadow = '0 4px 15px rgba(102, 126, 234, 0.4)';
};
// Статус
const status = document.createElement('div');
status.id = 'download-status';
status.style.cssText = `
margin-top: 12px;
padding: 10px;
border-radius: 6px;
font-size: 13px;
display: none;
text-align: center;
`;
panel.appendChild(status);
// Кнопка закрытия
const closeBtn = document.createElement('button');
closeBtn.textContent = '✕';
closeBtn.style.cssText = `
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
border: none;
background: #f0f0f0;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
color: #666;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
`;
closeBtn.onclick = () => panel.remove();
closeBtn.onmouseenter = () => {
closeBtn.style.background = '#e0e0e0';
};
closeBtn.onmouseleave = () => {
closeBtn.style.background = '#f0f0f0';
};
panel.appendChild(closeBtn);
panel.appendChild(downloadBtn);
document.body.appendChild(panel);
// Функция для сбора всех CSS стилей
async function collectAllStyles(element) {
let css = '';
// 1. Собираем все <style> теги из документа
const styleTags = document.querySelectorAll('style');
styleTags.forEach(style => {
css += style.textContent + '\n';
});
// 2. Собираем все <link rel="stylesheet"> теги
const linkTags = document.querySelectorAll('link[rel="stylesheet"]');
const cssPromises = Array.from(linkTags).map(async (link) => {
try {
const href = link.href;
if (href && !href.startsWith('data:')) {
const response = await fetch(href);
const text = await response.text();
return `/* ${href} */\n${text}\n`;
}
} catch (e) {
console.warn('⚠️ Не удалось загрузить CSS:', link.href);
}
return '';
});
const externalCSS = await Promise.all(cssPromises);
css += externalCSS.join('\n');
// 3. Собираем computed styles для всех элементов
const allElements = element.querySelectorAll('*');
const inlineStyles = new Set();
// Добавляем сам элемент
const elementsToProcess = [element, ...Array.from(allElements)];
elementsToProcess.forEach(el => {
const computed = window.getComputedStyle(el);
let styleText = '';
// Собираем важные стили
const importantProps = [
'display', 'position', 'top', 'left', 'right', 'bottom',
'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height',
'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
'border', 'border-width', 'border-style', 'border-color', 'border-radius',
'background', 'background-color', 'background-image', 'background-size', 'background-position',
'color', 'font-family', 'font-size', 'font-weight', 'line-height',
'text-align', 'text-decoration', 'text-transform',
'flex', 'flex-direction', 'flex-wrap', 'justify-content', 'align-items',
'grid', 'grid-template-columns', 'grid-template-rows', 'grid-gap',
'transform', 'transition', 'opacity', 'z-index', 'overflow', 'overflow-x', 'overflow-y',
'box-shadow', 'cursor', 'pointer-events', 'user-select'
];
importantProps.forEach(prop => {
const value = computed.getPropertyValue(prop);
if (value && value !== 'none' && value !== 'normal' && value !== 'auto' && value !== '0px') {
styleText += `${prop}: ${value}; `;
}
});
if (styleText) {
// Используем ID если есть, иначе класс, иначе создаем уникальный
if (el.id) {
css += `#${el.id} { ${styleText} }\n`;
} else if (el.className) {
const classNameStr = String(el.className || '').split(' ')[0];
if (classNameStr && !inlineStyles.has(classNameStr)) {
inlineStyles.add(classNameStr);
css += `.${classNameStr} { ${styleText} }\n`;
}
}
}
// Добавляем inline стили
if (el.style && el.style.cssText) {
const classNameStr = el.className ? String(el.className).split(' ')[0] : '';
const selector = el.id ? `#${el.id}` : (classNameStr ? `.${classNameStr}` : '');
if (selector) {
css += `${selector} { ${el.style.cssText} }\n`;
}
}
});
return css;
}
// Функция для сбора всех JavaScript файлов
async function collectAllScripts(rootElement) {
let js = '';
// Если указан конкретный элемент, собираем скрипты только внутри него
// Иначе собираем все скрипты со страницы
const isFullPage = rootElement === document.documentElement;
const searchRoot = isFullPage ? document : rootElement;
// 1. Собираем все <script> теги (inline скрипты)
const scriptTags = searchRoot.querySelectorAll('script:not([src])');
scriptTags.forEach(script => {
// Если указан конкретный элемент, проверяем что скрипт внутри него
if (!isFullPage && !rootElement.contains(script)) {
return;
}
if (script.textContent) {
js += `/* Inline script */\n${script.textContent}\n\n`;
}
});
// 2. Собираем все внешние <script src=""> теги
const externalScripts = searchRoot.querySelectorAll('script[src]');
const jsPromises = Array.from(externalScripts).map(async (script) => {
// Если указан конкретный элемент, проверяем что скрипт внутри него
if (!isFullPage && !rootElement.contains(script)) {
return '';
}
try {
const src = script.src;
if (src && !src.startsWith('data:') && !src.startsWith('blob:')) {
const response = await fetch(src);
const text = await response.text();
return `/* ${src} */\n${text}\n\n`;
}
} catch (e) {
console.warn('⚠️ Не удалось загрузить JS:', script.src);
}
return '';
});
const externalJS = await Promise.all(jsPromises);
js += externalJS.join('\n');
return js;
}
// Функция для скачивания файла
function downloadFile(content, filename, mimeType) {
const blob = new Blob([content], { type: mimeType });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
// Функция для скачивания HTML, CSS и JS в отдельные файлы
async function downloadHTMLAndCSS() {
const btn = downloadBtn;
const statusEl = status;
const selector = classInput.value.trim();
try {
btn.disabled = true;
btn.textContent = '⏳ Скачиваю...';
statusEl.style.display = 'block';
statusEl.style.background = '#d1ecf1';
statusEl.style.color = '#0c5460';
let targetElement;
let elementHTML;
let elementName = 'page';
// Определяем целевой элемент
if (selector) {
statusEl.textContent = `⏳ Ищу элемент: ${selector}...`;
targetElement = document.querySelector(selector);
if (!targetElement) {
throw new Error(`Элемент не найден по селектору: ${selector}`);
}
elementHTML = targetElement.outerHTML;
// Получаем имя из класса или ID
if (targetElement.id) {
elementName = targetElement.id.replace(/[^a-z0-9]/gi, '-');
} else if (targetElement.className) {
const className = String(targetElement.className).split(' ')[0];
elementName = className.replace(/[^a-z0-9]/gi, '-');
} else {
elementName = 'element';
}
statusEl.textContent = `⏳ Найден элемент, собираю HTML, CSS и JS...`;
} else {
// Если селектор не указан, скачиваем всю страницу
targetElement = document.documentElement;
elementHTML = document.documentElement.outerHTML;
statusEl.textContent = '⏳ Собираю HTML, CSS и JS всей страницы...';
}
// Получаем CSS
statusEl.textContent = '⏳ Собираю CSS...';
const css = await collectAllStyles(targetElement);
// Получаем JS
statusEl.textContent = '⏳ Собираю JavaScript...';
const js = await collectAllScripts(targetElement);
// Имя файла с текущей датой и временем
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
const htmlFilename = `${elementName}-${timestamp}.html`;
const cssFilename = `styles-${timestamp}.css`;
const jsFilename = `scripts-${timestamp}.js`;
// Создаем HTML файл со ссылками на CSS и JS
let fullHTML;
if (selector) {
// Если скачиваем конкретный элемент, оборачиваем его в минимальную структуру
fullHTML = `<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Скачанный элемент: ${selector}</title>
<link rel="stylesheet" href="${cssFilename}">
</head>
<body>
${elementHTML}
<script src="${jsFilename}"></script>
</body>
</html>`;
} else {
// Если скачиваем всю страницу
fullHTML = `<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Скачанная страница</title>
<link rel="stylesheet" href="${cssFilename}">
</head>
<body>
${document.body.innerHTML}
<script src="${jsFilename}"></script>
</body>
</html>`;
}
// Скачиваем HTML
downloadFile(fullHTML, htmlFilename, 'text/html;charset=utf-8');
console.log('✅ HTML скачан: ' + htmlFilename);
// Небольшая задержка перед скачиванием CSS
setTimeout(() => {
// Скачиваем CSS
downloadFile(css, cssFilename, 'text/css;charset=utf-8');
console.log('✅ CSS скачан: ' + cssFilename);
// Еще одна задержка перед скачиванием JS
setTimeout(() => {
downloadFile(js, jsFilename, 'text/javascript;charset=utf-8');
console.log('✅ JavaScript скачан: ' + jsFilename);
statusEl.style.background = '#d4edda';
statusEl.style.color = '#155724';
const selectorText = selector ? ` (${selector})` : '';
statusEl.textContent = `✅ Скачано: ${htmlFilename}, ${cssFilename} и ${jsFilename}${selectorText}`;
btn.disabled = false;
btn.textContent = 'Скачать';
}, 100);
}, 100);
} catch (error) {
statusEl.style.background = '#f8d7da';
statusEl.style.color = '#721c24';
statusEl.textContent = '❌ Ошибка: ' + error.message;
btn.disabled = false;
btn.textContent = 'Скачать';
console.error('Ошибка:', error);
}
}
downloadBtn.onclick = downloadHTMLAndCSS;
console.log('✅ UI панель создана! Нажмите кнопку "Скачать" для скачивания HTML, CSS и JS.');
})();Нажимаете скачать.
3. После скачивания переходим в Trae
3 файла которые были скачены переносим в папку с src_cef желательно в отедльную папку как например 123 как у меня
После чего пишем промт ИИ.
123 Вот тут страница приложения Настройки его перенеси на svelte в папку apps с отдельным файлом css папку под css создай и от туда бери
Чтобы посмотреть что получилось в браузере вам нужно:
Открыть cmd в папке Src_cef и написать команду npm run dev
После чего если такая уж лень даёте ещё 1 промт ИИ на то чтобы сразу же открывался вам нужно UI.
После того как ИИ всё сделает можем проверять что получилось
Если будет не сходится с тем что вы хотели пишите дальше правки не нужно писать по типу "Сделай в точности как в файлах он этого не поймёт и сделает хуже"
Лучше либо скриншоты прикладывайте что именно хотит изменить либо смотрите у какого класса нужно подправить или изменить тогда он вам сделает так как надо
Вроде понятно объяснил и надеюсь что люди прекратят покупать UI маджестика чтобы поставить себе на сервер.
Лучше делать свои либо "Не спиздил а переделал под себя
"ВНИМАНИЕ через эту полу бесплатную ИИ подключить UI будет либо очень сложно либо криво лучше за подключением обратитесь к квалифицированному Backend разработчику
Последнее редактирование:
