Update content for vibe2
- Add side announcement block (VIBECODING password) - Replace section 03 with AI accounts registration (Claude, ChatGPT, Gemini) - Simplify section 04 (Action Plan) language - Rename Gitea to Git - Remove Terminal, Zorro, Camunda 7 from glossary - Clean Zorro/GITEA.md refs from other sections
This commit is contained in:
parent
c588988333
commit
6d4a077ccb
133
index.html
133
index.html
@ -1495,9 +1495,51 @@ footer {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Side announcement */
|
||||
.vibe-announce {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100;
|
||||
background: var(--blue);
|
||||
color: var(--text-on-blue);
|
||||
padding: 16px 18px;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-card);
|
||||
max-width: 200px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.vibe-announce-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.vibe-announce-pass {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
background: rgba(255,255,255,0.18);
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.vibe-announce { display: none; }
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="vibe-announce" aria-label="Объявление">
|
||||
<div class="vibe-announce-title">VIBECODING</div>
|
||||
<div>Пароль:</div>
|
||||
<div class="vibe-announce-pass">123456789</div>
|
||||
</aside>
|
||||
<div class="frame">
|
||||
|
||||
<!-- NAV -->
|
||||
@ -1722,13 +1764,13 @@ footer {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 3: WHAT YOU NEED -->
|
||||
<!-- SECTION 3: REGISTER AI ACCOUNTS -->
|
||||
<section class="section" id="tools">
|
||||
<div class="container">
|
||||
<div class="section-label">03 — Что тебе понадобится</div>
|
||||
<h2 class="section-title">Два инструмента.<br><em>Один опциональный.</em></h2>
|
||||
<div class="section-label">03 — Зарегистрируй себе аккаунты</div>
|
||||
<h2 class="section-title">Три ИИ-помощника.<br><em>У каждого своя сила.</em></h2>
|
||||
<p class="section-body">
|
||||
Установить — минут пять. Никаких регистраций корпоративных и API-ключей.
|
||||
До воркшопа создай бесплатные аккаунты в Claude, ChatGPT и Gemini. Можно через Google — 1 минута на каждый. Не нужно платить и не нужно API-ключи.
|
||||
</p>
|
||||
|
||||
<div class="tools-grid">
|
||||
@ -1740,10 +1782,10 @@ footer {
|
||||
</div>
|
||||
<div class="tool-name">Claude</div>
|
||||
<div class="tool-role">
|
||||
ИИ-помощник. Описываешь задачу словами — получаешь готовый план или код. Скачай приложение или используй в браузере.
|
||||
Anthropic. Лучший для длинных описаний и для генерации кода. Основной инструмент на воркшопе.
|
||||
</div>
|
||||
<a href="https://claude.ai/downloads" target="_blank" rel="noopener" class="tool-link">
|
||||
claude.ai/downloads
|
||||
<a href="https://claude.ai" target="_blank" rel="noopener" class="tool-link">
|
||||
claude.ai
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.7">
|
||||
<path d="M2 10L10 2M4 2h6v6"/>
|
||||
</svg>
|
||||
@ -1753,37 +1795,34 @@ footer {
|
||||
<div class="tool-card">
|
||||
<div class="tool-icon-wrap">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
|
||||
<circle cx="12" cy="12" r="9"/>
|
||||
<path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tool-name">VS Code в браузере</div>
|
||||
<div class="tool-name">ChatGPT</div>
|
||||
<div class="tool-role">
|
||||
Твой редактор кода и терминал. Кликнул «Войти» наверху — попал в свою папку. Никаких установок.
|
||||
OpenAI. Универсал. Хорош для брейншторма и быстрых ответов. Запасной канал, если Claude занят.
|
||||
</div>
|
||||
<a href="https://vibe.telecom.quest" class="tool-link">
|
||||
vibe.telecom.quest
|
||||
<a href="https://chatgpt.com" target="_blank" rel="noopener" class="tool-link">
|
||||
chatgpt.com
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.7">
|
||||
<path d="M2 10L10 2M4 2h6v6"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="tool-card optional">
|
||||
<span class="opt-badge">опционально</span>
|
||||
<div class="tool-card">
|
||||
<div class="tool-icon-wrap">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1"/>
|
||||
<rect x="14" y="3" width="7" height="7" rx="1"/>
|
||||
<rect x="3" y="14" width="7" height="7" rx="1"/>
|
||||
<path d="M14 17.5h7M17.5 14v7"/>
|
||||
<path d="M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tool-name">Camunda Modeler</div>
|
||||
<div class="tool-name">Gemini</div>
|
||||
<div class="tool-role">
|
||||
Для тех, кто хочет рисовать bpmn-процессы руками. Если впервые слышишь про bpmn — пропусти, Claude нарисует за тебя.
|
||||
Google. Силён в работе с Google-документами и таблицами. Удобен, если данные уже в Google Drive.
|
||||
</div>
|
||||
<a href="https://camunda.com/download" target="_blank" rel="noopener" class="tool-link">
|
||||
camunda.com/download
|
||||
<a href="https://gemini.google.com" target="_blank" rel="noopener" class="tool-link">
|
||||
gemini.google.com
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.7">
|
||||
<path d="M2 10L10 2M4 2h6v6"/>
|
||||
</svg>
|
||||
@ -1884,7 +1923,7 @@ footer {
|
||||
<div class="section-label">04 — Action Plan</div>
|
||||
<h2 class="section-title">Четыре шага<br><em>до рабочего MVP</em></h2>
|
||||
<p class="section-body">
|
||||
От «у меня есть боль» до «вот работающее приложение». Каждый шаг занимает 10–30 минут.
|
||||
От «у меня есть боль» до «вот работающее приложение». Каждый шаг — 10–30 минут.
|
||||
</p>
|
||||
|
||||
<div class="plan-flow">
|
||||
@ -1892,23 +1931,23 @@ footer {
|
||||
<div class="plan-step-num">Шаг 1</div>
|
||||
<div class="plan-step-title">Войди в свою папку</div>
|
||||
<div class="plan-step-desc">
|
||||
Кнопка <b>«Войти»</b> наверху → введи ФИО → откроется твой VS Code. В папке уже лежат <code>PRD.md</code>, <code>TRD.md</code>, <a href="GITEA.md" target="_blank"><code>GITEA.md</code></a>.
|
||||
Нажми <b>«Войти»</b> наверху, введи ФИО — откроется твой редактор кода. Внутри уже готовый файл <code>PRD.md</code> (для идеи) и <code>TRD.md</code> (для технической части).
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="plan-step">
|
||||
<div class="plan-step-num">Шаг 2</div>
|
||||
<div class="plan-step-title">Опиши боль в PRD.md</div>
|
||||
<div class="plan-step-title">Опиши свою задачу в PRD.md</div>
|
||||
<div class="plan-step-desc">
|
||||
Открой <code>PRD.md</code>. Простыми словами: что болит, кто пользователь, какой результат хочешь. Без терминов и кода.
|
||||
<code>PRD.md</code> — это файл, где ты простыми словами рассказываешь: что болит, кто будет пользоваться, как должно работать. Никакого кода. Это твоя идея на бумаге.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="plan-step">
|
||||
<div class="plan-step-num">Шаг 3</div>
|
||||
<div class="plan-step-title">Получи TRD от Claude</div>
|
||||
<div class="plan-step-title">Попроси Claude сделать TRD</div>
|
||||
<div class="plan-step-desc">
|
||||
Открой Claude. Приложи <code>PRD.md</code> + <a href="GITEA.md" target="_blank"><code>GITEA.md</code></a>. Скажи: «Сделай TRD на основе PRD и GITEA». Результат сохрани в <code>TRD.md</code>.
|
||||
Открой Claude, скинь свой <code>PRD.md</code> и попроси: «Сделай TRD по этому PRD». <code>TRD.md</code> — это твоя идея, переведённая на язык кода. Claude напишет, ты сохранишь.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1916,7 +1955,7 @@ footer {
|
||||
<div class="plan-step-num">Шаг 4</div>
|
||||
<div class="plan-step-title">Запусти Claude Code</div>
|
||||
<div class="plan-step-desc">
|
||||
В терминале VS Code: <code>claude code</code>. Скажи «реализуй TRD.md». Через 10–20 минут — рабочий MVP в твоей папке.
|
||||
В редакторе снизу открой строку для команд и напиши <code>claude code</code>. Скажи: «реализуй TRD.md». Через 10–20 минут — рабочее приложение в твоей папке.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2028,7 +2067,7 @@ footer {
|
||||
</svg>
|
||||
</div>
|
||||
<div class="eq-note-text">
|
||||
<strong>Sandbox — официальная среда КТ.</strong> Mock-копия реальной инфраструктуры — Zorro, базы, очереди. Можно ломать и переделывать, ничего ценного не сломаешь.
|
||||
<strong>Sandbox — официальная среда КТ.</strong> Mock-копия реальной инфраструктуры — базы, очереди, сервисы. Можно ломать и переделывать, ничего ценного не сломаешь.
|
||||
</div>
|
||||
</div>
|
||||
<div class="eq-note-item">
|
||||
@ -2039,7 +2078,7 @@ footer {
|
||||
</svg>
|
||||
</div>
|
||||
<div class="eq-note-text">
|
||||
<strong>Документация и помощь рядом.</strong> <a href="GITEA.md" target="_blank">GITEA.md</a> уже в твоей папке. Telegram-чат — для вопросов. Админы платформы — у тебя за плечом.
|
||||
<strong>Документация и помощь рядом.</strong> Справочные файлы лежат в твоей папке. Telegram-чат — для вопросов. Админы платформы — у тебя за плечом.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2066,7 +2105,7 @@ footer {
|
||||
<div class="section-label">08 — Словарь</div>
|
||||
<h2 class="section-title">Термины,<br><em>которые услышишь</em></h2>
|
||||
<p class="section-body">
|
||||
14 слов, которые встретятся сегодня. Без технического жаргона. Листай стрелками или свайпом.
|
||||
11 слов, которые встретятся сегодня. Без технического жаргона. Листай стрелками или свайпом.
|
||||
</p>
|
||||
|
||||
<div class="glossary-slider">
|
||||
@ -2075,7 +2114,7 @@ footer {
|
||||
<button type="button" id="gloss-prev" class="gloss-nav-btn" aria-label="Назад">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="10,3 5,8 10,13"/></svg>
|
||||
</button>
|
||||
<span class="gloss-counter" id="gloss-counter">1 / 14</span>
|
||||
<span class="gloss-counter" id="gloss-counter">1 / 11</span>
|
||||
<button type="button" id="gloss-next" class="gloss-nav-btn" aria-label="Вперёд">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,3 11,8 6,13"/></svg>
|
||||
</button>
|
||||
@ -2130,7 +2169,7 @@ footer {
|
||||
<span class="footer-copy">Казахтелеком · Движение инноваторов</span>
|
||||
<div class="footer-links">
|
||||
<a href="https://claude.ai/downloads" target="_blank" rel="noopener" class="footer-link">Claude</a>
|
||||
<a href="https://git.telecom.quest" target="_blank" rel="noopener" class="footer-link">Gitea</a>
|
||||
<a href="https://git.telecom.quest" target="_blank" rel="noopener" class="footer-link">Git</a>
|
||||
<a href="https://t.me/+9UI8dt-60l8yMzJi" target="_blank" rel="noopener" class="footer-link">Telegram</a>
|
||||
</div>
|
||||
</footer>
|
||||
@ -2176,11 +2215,6 @@ const GLOSSARY = [
|
||||
abbr: 'Prompt',
|
||||
definition: 'Твоя инструкция для Claude. Чем точнее описание — тем точнее результат. Хороший промпт = хороший PRD: контекст, задача, ограничения, критерий успеха. Всё что ты пишешь в Claude Desktop — это промпты.'
|
||||
},
|
||||
{
|
||||
term: 'Terminal',
|
||||
abbr: 'Terminal',
|
||||
definition: '<strong>Чёрный экран, куда пишут команды.</strong> В VS Code открывается снизу клавишей <code>Ctrl + `</code> (или через меню View → Terminal). Большинство магии происходит там — например, запуск <code>claude code</code>.'
|
||||
},
|
||||
{
|
||||
term: 'Dream to be',
|
||||
abbr: 'Dream',
|
||||
@ -2200,16 +2234,6 @@ const GLOSSARY = [
|
||||
term: 'Markdown',
|
||||
abbr: '.md',
|
||||
definition: '<strong>Файл <code>.md</code></strong> — обычный текст с минимальным форматированием (заголовки, списки, ссылки). PRD.md, TRD.md, README.md — всё это markdown. Открывается в любом редакторе.'
|
||||
},
|
||||
{
|
||||
term: 'Zorro',
|
||||
abbr: 'Zorro',
|
||||
definition: 'Внутренняя система КТ для исполнения bpmn-процессов. Туда твой MVP может подключиться, чтобы стать частью корпоративной автоматизации. Сегодня знать про неё не обязательно — Claude сам справится по файлу <a href="GITEA.md" target="_blank">GITEA.md</a>.'
|
||||
},
|
||||
{
|
||||
term: 'Camunda 7',
|
||||
abbr: 'Camunda',
|
||||
definition: 'Опциональный редактор bpmn-схем для тех, кто хочет рисовать процессы руками. Если впервые слышишь — пропусти, Claude нарисует схему за тебя.'
|
||||
}
|
||||
];
|
||||
|
||||
@ -2285,17 +2309,14 @@ const PROMPTS = [
|
||||
{
|
||||
step: 'Шаг 2',
|
||||
title: 'Сгенерируй TRD из PRD',
|
||||
context: 'Когда PRD.md готов — попроси Claude перевести его в техническое задание. Зорро-документация ему уже доступна.',
|
||||
body: `Прочитай два файла:
|
||||
- PRD.md (моя идея, написана простыми словами)
|
||||
- GITEA.md (справочник по Gitea Pages в Казахтелеком)
|
||||
context: 'Когда PRD.md готов — попроси Claude перевести его в техническое задание.',
|
||||
body: `Прочитай файл PRD.md (моя идея, написана простыми словами).
|
||||
|
||||
Сгенерируй TRD.md — техническое задание для разработки MVP:
|
||||
- Какие сущности данных нужны
|
||||
- Какие BPMN-процессы (если нужны)
|
||||
- Какие API-эндпоинты Zorro надо вызывать
|
||||
- Какие данные нужны
|
||||
- Минимальный стек (HTML/CSS/JS, или Python+FastAPI, или Node.js — выбери проще)
|
||||
- Структура папок проекта
|
||||
- Как запускать
|
||||
|
||||
Цель — рабочий MVP за час, не идеальная архитектура.
|
||||
Сохрани результат в TRD.md, заменив текущее содержимое файла.`
|
||||
|
||||
Reference in New Issue
Block a user