Add prompt cheatsheet section with 7 copyable examples (PRD/TRD/code/iterate + bonus CSV+TG bot)
This commit is contained in:
parent
ee07b1fe5a
commit
3311df1232
266
index.html
266
index.html
@ -437,6 +437,97 @@ nav {
|
|||||||
}
|
}
|
||||||
.eq-note-text strong { color: var(--text); font-weight: 500; }
|
.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 ── */
|
/* ── TELEGRAM ── */
|
||||||
.tg-block {
|
.tg-block {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
@ -1161,7 +1252,7 @@ footer {
|
|||||||
<a href="#plan" class="nav-link">Action Plan</a>
|
<a href="#plan" class="nav-link">Action Plan</a>
|
||||||
<a href="#create" class="nav-link">Что создать</a>
|
<a href="#create" class="nav-link">Что создать</a>
|
||||||
<a href="#enterprise" 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>
|
<a href="#telegram" class="nav-link">Сообщество</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-cta-group">
|
<div class="nav-cta-group">
|
||||||
@ -1631,10 +1722,23 @@ footer {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</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: TELEGRAM COMMUNITY -->
|
||||||
<section class="section" id="telegram">
|
<section class="section" id="telegram">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">10 — Сообщество</div>
|
<div class="section-label">11 — Сообщество</div>
|
||||||
<h2 class="section-title">P2P-формат.<br><em>Не лекция — движение.</em></h2>
|
<h2 class="section-title">P2P-формат.<br><em>Не лекция — движение.</em></h2>
|
||||||
<p class="section-body">
|
<p class="section-body">
|
||||||
Это не курс «сверху вниз». Это сообщество сотрудников КТ, которые учатся <strong>друг у друга</strong>: показывают свои проекты, спрашивают, помогают, делятся находками. Заходи — там уже несколько групп инноваторов.
|
Это не курс «сверху вниз». Это сообщество сотрудников КТ, которые учатся <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 = [
|
const SCHEDULE = [
|
||||||
{
|
{
|
||||||
time: '09:00',
|
time: '09:00',
|
||||||
@ -1957,6 +2174,51 @@ const SCHEDULE = [
|
|||||||
projectsEl.appendChild(div);
|
projectsEl.appendChild(div);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Render prompt cheatsheet
|
||||||
|
const promptsEl = document.getElementById('prompts-list');
|
||||||
|
function escapeHtml(s) {
|
||||||
|
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||||
|
}
|
||||||
|
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 ──────────────────────────────────────────────
|
/* ── AUTH ──────────────────────────────────────────────
|
||||||
Smart single-form auth backed by register.telecom.quest.
|
Smart single-form auth backed by register.telecom.quest.
|
||||||
- Login first (works for both FIO and CDN inputs).
|
- Login first (works for both FIO and CDN inputs).
|
||||||
|
|||||||
Reference in New Issue
Block a user