diff --git a/西班牙语日记-实现计划.md b/西班牙语日记-实现计划.md
new file mode 100644
index 0000000..0c3bad0
--- /dev/null
+++ b/西班牙语日记-实现计划.md
@@ -0,0 +1,821 @@
+# Spanish Diary (Phase 1) Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build a pure-frontend Spanish learning diary app where users write daily entries in Spanish, see English/Chinese translations auto-displayed, hear pronunciation via Web Speech API, and manage entries via IndexedDB.
+
+**Architecture:** Single-page application with modular JavaScript files. Three-panel layout (entry list | Spanish editor | translation display). Each JS module encapsulates one concern (database, translation, speech). The HTML file loads all scripts and provides the DOM structure; CSS handles the three-column responsive layout.
+
+**Tech Stack:** HTML5, CSS3, Vanilla JavaScript (ES6+), IndexedDB (native API), Web Speech API.
+
+---
+
+## File Structure
+
+```
+spanish-diary/
+ index.html — Main HTML page with DOM skeleton
+ style.css — All styles, three-column layout, responsive
+ app.js — Application logic: state management, event wiring between panels
+ db.js — IndexedDB wrapper: open CRUD operations
+ translate.js — Translation module: mock dictionary lookup
+ speech.js — Speech module: Web Speech API wrapper
+```
+
+Each file has one clear responsibility. `app.js` is the coordinator that connects the other modules.
+
+---
+
+### Task 1: Create project directory and HTML skeleton
+
+**Files:**
+- Create: `spanish-diary/index.html`
+
+**Details:** The HTML must define the three-panel structure with IDs for JS targeting. No external dependencies. Load all JS files at the bottom.
+
+- [ ] **Step 1: Write the HTML file**
+
+```html
+
+
+
+ Mi Diario — 西班牙语日记
+
+
+
+
+
+
+ 输入西语后点击保存，右侧自动显示翻译
+
+
+
+
+
+
🇬🇧 English
+
-
+
🔊 朗读
+
+
+ ${e.date}
+ ${escHtml(preview)}
+
+ 🗑 删除
+
+ `;
+ }).join('');
+}
+
+function escHtml(s) {
+ const div = document.createElement('div');
+ div.textContent = s;
+ return div.innerHTML;
+}
+
+function renderTranslate(entry) {
+ document.getElementById('translate-en').textContent = entry ? entry.english : '-';
+ document.getElementById('translate-cn').textContent = entry ? entry.chinese : '-';
+}
+
+function setEditor(entry) {
+ document.getElementById('entry-date').value = entry ? entry.date : todayStr();
+ document.getElementById('entry-text').value = entry ? entry.spanish : '';
+ const hint = document.getElementById('entry-hint');
+ hint.textContent = entry && entry.spanish
+ ? '已保存。修改后点击保存更新。'
+ : '输入西语后点击保存，右侧自动显示翻译';
+}
+
+function clearEditor() {
+ state.currentId = null;
+ document.querySelectorAll('#entry-list li').forEach(el => el.classList.remove('active'));
+ setEditor(null);
+ renderTranslate(null);
+}
+
+// ----- Event handlers -----
+
+async function selectEntry(id) {
+ state.currentId = id;
+ const entry = await dbGetEntry(id);
+ if (entry) {
+ setEditor(entry);
+ renderTranslate(entry);
+ renderList();
+ }
+}
+
+async function saveCurrentEntry() {
+ const date = document.getElementById('entry-date').value;
+ const spanish = document.getElementById('entry-text').value.trim();
+ if (!spanish) { alert('请输入西语内容'); return; }
+
+ const translation = translateText(spanish);
+
+ if (state.currentId) {
+ const existing = await dbGetEntry(state.currentId);
+ existing.date = date;
+ existing.spanish = spanish;
+ existing.english = translation.english;
+ existing.chinese = translation.chinese;
+ existing.updatedAt = new Date().toISOString();
+ await dbUpdateEntry(existing);
+ } else {
+ const entry = {
+ id: uuid(),
+ date: date,
+ spanish: spanish,
+ english: translation.english,
+ chinese: translation.chinese,
+ createdAt: new Date().toISOString(),
+ updatedAt: new Date().toISOString()
+ };
+ await dbAddEntry(entry);
+ state.currentId = entry.id;
+ }
+
+ state.entries = await dbGetAllEntries();
+ renderList();
+ renderTranslate({ english: translation.english, chinese: translation.chinese });
+ setEditor(state.entries.find(e => e.id === state.currentId));
+ document.getElementById('btn-save').textContent = '💾 已保存 ✓';
+ setTimeout(() => { document.getElementById('btn-save').textContent = '💾 保存'; }, 1500);
+}
+
+async function deleteEntry(id) {
+ showDeleteModal(id);
+}
+
+async function confirmDelete(id) {
+ await dbDeleteEntry(id);
+ if (state.currentId === id) clearEditor();
+ state.entries = await dbGetAllEntries();
+ renderList();
+ hideDeleteModal();
+}
+
+function newEntry() {
+ clearEditor();
+ document.getElementById('entry-date').value = todayStr();
+ document.getElementById('entry-text').focus();
+}
+
+// ----- Modal -----
+
+let pendingDeleteId = null;
+
+function showDeleteModal(id) {
+ pendingDeleteId = id;
+ document.getElementById('modal-overlay').classList.add('show');
+}
+
+function hideDeleteModal() {
+ pendingDeleteId = null;
+ document.getElementById('modal-overlay').classList.remove('show');
+}
+
+// ----- Speech handler -----
+
+function handleSpeech(lang) {
+ const text = lang === 'en'
+ ? document.getElementById('translate-en').textContent
+ : document.getElementById('translate-cn').textContent;
+ if (text && text !== '-') speakText(text, lang);
+}
+
+// ----- Initialization -----
+
+async function init() {
+ state.entries = await dbGetAllEntries();
+ renderList();
+ setEditor(null);
+ renderTranslate(null);
+
+ // Event delegation for list clicks
+ document.getElementById('entry-list').addEventListener('click', (e) => {
+ const li = e.target.closest('li[data-id]');
+ if (!li) return;
+ if (e.target.closest('.btn-delete')) {
+ deleteEntry(li.dataset.id);
+ return;
+ }
+ selectEntry(li.dataset.id);
+ });
+
+ document.getElementById('btn-new').addEventListener('click', newEntry);
+ document.getElementById('btn-save').addEventListener('click', saveCurrentEntry);
+
+ document.querySelectorAll('.btn-speech').forEach(btn => {
+ btn.addEventListener('click', () => handleSpeech(btn.dataset.lang));
+ });
+
+ document.getElementById('modal-box').querySelector('.btn-cancel').addEventListener('click', hideDeleteModal);
+ document.getElementById('modal-box').querySelector('.btn-confirm').addEventListener('click', () => {
+ if (pendingDeleteId) confirmDelete(pendingDeleteId);
+ });
+
+ // Keyboard shortcut
+ document.addEventListener('keydown', (e) => {
+ if (e.ctrlKey && e.key === 'Enter') saveCurrentEntry();
+ });
+}
+
+document.addEventListener('DOMContentLoaded', init);
+```
+
+Also add the delete confirmation modal HTML to `index.html` before the ` `:
+
+```html
+