Add prompt cheatsheet section with 7 copyable examples (PRD/TRD/code/iterate + bonus CSV+TG bot)

2026-05-17 21:25:09 +05:00 · 2026-05-17 21:25:09 +05:00 · 3311df1232
commit 3311df1232
parent ee07b1fe5a
1 changed files with 264 additions and 2 deletions
--- a/index.html
+++ b/index.html
@ -437,6 +437,97 @@ nav {
 }
 .eq-note-text strong { color: var(--text); font-weight: 500; }

+/* ── PROMPT CHEATSHEET ── */
+.prompts {
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.prompt-card {
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+@media (max-width: 640px) { .prompt-card { padding: 16px 18px; } }
+
+.prompt-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.prompt-step {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 3px 8px;
+  border-radius: 6px;
+  background: rgba(0,102,204,0.08);
+  color: var(--blue);
+  flex-shrink: 0;
+}
+.prompt-step.bonus {
+  background: rgba(0,0,0,0.06);
+  color: var(--text-65);
+}
+
+.prompt-title {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.prompt-context {
+  font-size: 0.8125rem;
+  color: var(--text-55);
+  line-height: 1.5;
+}
+
+.prompt-box {
+  position: relative;
+  background: #1a1a1a;
+  border-radius: 8px;
+  padding: 16px 56px 16px 18px;
+}
+.prompt-box pre {
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.8125rem;
+  line-height: 1.55;
+  color: #e5e5e5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.prompt-copy {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  border: none;
+  background: rgba(255,255,255,0.08);
+  color: #e5e5e5;
+  font-size: 0.75rem;
+  font-family: inherit;
+  padding: 6px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  transition: background 150ms ease, color 150ms ease;
+}
+.prompt-copy:hover { background: rgba(255,255,255,0.15); }
+.prompt-copy.copied { background: var(--positive-bg); color: var(--positive); }
+.prompt-copy svg { width: 12px; height: 12px; }
+
 /* ── TELEGRAM ── */
 .tg-block {
  margin-top: 40px;
@ -1161,7 +1252,7 @@ footer {
          <a href="#plan" class="nav-link">Action Plan</a>
          <a href="#create" class="nav-link">Что создать</a>
          <a href="#enterprise" class="nav-link">Зачем</a>
-          <a href="#glossary" class="nav-link">Словарь</a>
+          <a href="#prompts" class="nav-link">Промпты</a>
          <a href="#telegram" class="nav-link">Сообщество</a>
        </div>
        <div class="nav-cta-group">
@ -1631,10 +1722,23 @@ footer {
        </div>
      </section>

+      <!-- SECTION: PROMPT CHEATSHEET -->
+      <section class="section" id="prompts">
+        <div class="container">
+          <div class="section-label">10 — Шпаргалка промптов</div>
+          <h2 class="section-title">Что писать<br><em>Claude'у</em></h2>
+          <p class="section-body">
+            Не знаешь с чего начать диалог? Скопируй готовый промпт, замени в нём текст в квадратных скобках на свой контекст. По шагам Action Plan + бонус для работы с Excel.
+          </p>
+
+          <div class="prompts" id="prompts-list"></div>
+        </div>
+      </section>
+
      <!-- SECTION: TELEGRAM COMMUNITY -->
      <section class="section" id="telegram">
        <div class="container">
-          <div class="section-label">10 — Сообщество</div>
+          <div class="section-label">11 — Сообщество</div>
          <h2 class="section-title">P2P-формат.<br><em>Не лекция — движение.</em></h2>
          <p class="section-body">
            Это не курс «сверху вниз». Это сообщество сотрудников КТ, которые учатся <strong>друг у друга</strong>: показывают свои проекты, спрашивают, помогают, делятся находками. Заходи — там уже несколько групп инноваторов.
@ -1811,6 +1915,119 @@ const PROJECTS = [
  }
 ];

+const PROMPTS = [
+  {
+    step: 'Шаг 1',
+    title: 'Помоги написать PRD',
+    context: 'Открой Claude. Опиши свою рабочую боль одним абзацем — Claude задаст уточняющие вопросы и оформит PRD.md.',
+    body: `Я финансист в Казахтелеком. Помоги мне написать PRD.md — описание идеи продукта простыми словами.
+
+Моя ситуация: [замени на свой текст — что болит, что хочешь автоматизировать]
+
+Сначала задай мне 3-5 уточняющих вопросов. Потом, на основе моих ответов, оформи PRD.md по структуре:
+- Что я хочу автоматизировать (одно предложение)
+- Кто будет пользоваться
+- Что должно произойти на выходе
+- Список из 3-5 главных функций
+- Что НЕ входит в задачу
+
+Пиши без программистских терминов.`
+  },
+  {
+    step: 'Шаг 2',
+    title: 'Сгенерируй TRD из PRD',
+    context: 'Когда PRD.md готов — попроси Claude перевести его в техническое задание. Зорро-документация ему уже доступна.',
+    body: `Прочитай два файла:
+- PRD.md (моя идея, написана простыми словами)
+- ZORRO.md (справочник по системе Zorro в Казахтелеком)
+
+Сгенерируй TRD.md — техническое задание для разработки MVP:
+- Какие сущности данных нужны
+- Какие BPMN-процессы (если нужны)
+- Какие API-эндпоинты Zorro надо вызывать
+- Минимальный стек (HTML/CSS/JS, или Python+FastAPI, или Node.js — выбери проще)
+- Структура папок проекта
+
+Цель — рабочий MVP за час, не идеальная архитектура.
+Сохрани результат в TRD.md, заменив текущее содержимое файла.`
+  },
+  {
+    step: 'Шаг 3',
+    title: 'Запусти Claude Code на TRD',
+    context: 'В терминале VS Code вызови claude code — потом вставь этот промпт. Claude напишет код прямо в твою папку.',
+    body: `Прочитай TRD.md в текущей папке. Реализуй MVP по нему.
+
+Принципы:
+- Простой стек (предпочтительно HTML+CSS+JS без сборки)
+- Все файлы в текущей папке
+- Никаких внешних API-ключей и платных сервисов
+- Если нужны данные — используй mock-значения, понятные финансисту
+
+В конце:
+1. Напиши команду запуска (например, "открой index.html в браузере" или "python3 -m http.server 8000")
+2. Список того, что готово, и что осталось доделать.`
+  },
+  {
+    step: 'Шаг 4',
+    title: 'Когда что-то сломалось',
+    context: 'Получил ошибку или результат выглядит странно — опиши Claude словами что видишь, остальное он разберёт сам.',
+    body: `Запусти приложение из текущей папки.
+Опиши, какую ошибку видишь (если есть). Если ошибки нет — опиши, что выглядит не так.
+Затем:
+1. Найди причину
+2. Исправь код
+3. Перезапусти
+4. Покажи, что теперь работает
+
+Не спрашивай у меня дополнительных деталей — действуй.`
+  },
+  {
+    step: 'Шаг 5',
+    title: 'Улучши результат',
+    context: 'MVP работает — теперь делаешь итерацию: одно улучшение за раз. Каждая правка — это новый промпт.',
+    body: `Сейчас в приложении нужно изменить одну вещь:
+[замени на свой запрос — например: "цифры должны быть с разделителями тысяч",
+"добавь фильтр по дате", "сделай заголовок жирным"]
+
+Внеси изменение. Не трогай остальное.
+Опиши одной строкой, что именно ты поменял.`
+  },
+  {
+    step: 'Бонус',
+    bonus: true,
+    title: 'Разобрать Excel/CSV-файл',
+    context: 'У тебя есть таблица из 1С или Excel? Сохрани её как CSV и попроси Claude найти полезное.',
+    body: `У меня есть файл [имя_файла.csv] с данными о [тип данных, например: "платежах за квартал"].
+
+Прочитай его и покажи мне:
+1. Сколько всего строк
+2. Какие колонки (с короткими комментариями что они значат)
+3. Топ-5 самых крупных значений
+4. 3-5 аномалий или выбросов (дубликаты, странные суммы, пустые поля)
+5. Один график, который покажет главную закономерность
+
+Используй простые слова — я финансист, не программист.`
+  },
+  {
+    step: 'Бонус',
+    bonus: true,
+    title: 'Сделай Telegram-бот',
+    context: 'Хочешь бот, который что-то считает или напоминает? Этот промпт даст работающий бот за один запуск.',
+    body: `Сделай простой Telegram-бот на Python (python-telegram-bot).
+
+Бот делает: [замени на задачу — например: "при команде /курс отвечает текущим курсом USD к KZT",
+"присылает напоминание каждый день в 9:00", "по сообщению с числом выдаёт его в разных валютах"]
+
+Требования:
+- Один файл bot.py
+- Токен бота читать из переменной окружения TG_TOKEN
+- Минимум зависимостей в requirements.txt
+- README.md: как получить токен через @BotFather и как запустить
+
+Покажи код и инструкцию.`
+  }
+];
+
 const SCHEDULE = [
  {
    time: '09:00',
@ -1957,6 +2174,51 @@ const SCHEDULE = [
      projectsEl.appendChild(div);
    });

+    // Render prompt cheatsheet
+    const promptsEl = document.getElementById('prompts-list');
+    function escapeHtml(s) {
+      return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+    PROMPTS.forEach((item, i) => {
+      const card = document.createElement('div');
+      card.className = 'prompt-card';
+      card.innerHTML = `
+        <div class="prompt-head">
+          <span class="prompt-step${item.bonus ? ' bonus' : ''}">${item.step}</span>
+          <span class="prompt-title">${item.title}</span>
+        </div>
+        <div class="prompt-context">${item.context}</div>
+        <div class="prompt-box">
+          <button type="button" class="prompt-copy" data-idx="${i}" aria-label="Скопировать">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="5" y="5" width="9" height="9" rx="1"/><path d="M11 5V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2"/>
+            </svg>
+            Скопировать
+          </button>
+          <pre>${escapeHtml(item.body)}</pre>
+        </div>
+      `;
+      promptsEl.appendChild(card);
+    });
+    // Wire copy buttons
+    promptsEl.addEventListener('click', async (e) => {
+      const btn = e.target.closest('.prompt-copy');
+      if (!btn) return;
+      const idx = +btn.dataset.idx;
+      try {
+        await navigator.clipboard.writeText(PROMPTS[idx].body);
+        const originalHTML = btn.innerHTML;
+        btn.classList.add('copied');
+        btn.innerHTML = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3,8 7,12 13,4"/></svg> Скопировано';
+        setTimeout(() => {
+          btn.classList.remove('copied');
+          btn.innerHTML = originalHTML;
+        }, 1800);
+      } catch (err) {
+        btn.textContent = 'Не вышло :(';
+      }
+    });
+
    /* ── AUTH ──────────────────────────────────────────────
       Smart single-form auth backed by register.telecom.quest.
       - Login first (works for both FIO and CDN inputs).