环境：

OS: Windows 11
IDE：TREA
Model: Sonnet / Qwen (免费 Token 用完)

参考：

Claude Code Beginner Guide – Get Started in 20 Minutes (2025)

by Alex Finn 油管博客

https://www.youtube.com/watch?v=iYiuzAsWnHU&list=TLGG1L6Rr9WQcXAwNzA5MjAyNQ

可以试试：https://cobalt.tools/ 下载。

正文：

一、安装 Claude Code (以后用 CC 代替)

参考我之前的文章： https://blog.csdn.net/davenian/article/details/148855154

二、使用 QwenCode 代替 Sonnet

阿里有免费 90 天 Token，什么事儿还没做 token 用了 30%，推荐 GLM 20块充值包。它们的方法都一样，给 CC 一个接口 URL，然后是 API 格式的 KEY

TREA/Cursor 都是调用 PowerShell，我是用 npm 安装的 CC ，第一次要在终端里运行“Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser" 再执行 claude 来运行 CC

引自秋芝：https://ccnk05wgo092.feishu.cn/wiki/BxLTwlkvkiQhJkkJ7vgc95aZnMe

三、用 CC 制作一个日历

1 告诉要做什么

prompt: 
i want to build a calendar app using next.js. it should show a calender view of this week and make it so i can create new events and assign dates and times to the events. it should be a realty beautiful app.

用中文也一样，提示词：

我想使用 Next.js 构建一个日历应用。它应该显示本周的日历视图，并且让我能够创建新事件，为事件分配日期和时间。它应该是一个非常漂亮的应用。

当时没想写文章，第一版的截图没有做。大概是白色+浅灰线

2 告诉它改进

提示词，我用的中文

好的，干得不错。我首先想让这个日历看起来非常漂亮，有干净的颜色和易于阅读的简约界面。请为我制定执行这个任务的计划。现在它非常朴素有些丑，没有任何样式。

做出来是这样的，一行代码没敲，因为不会 next.js

3 创建规则文件 CLAUDE.md

角色类似项目管理员，来指定规划与规则。

留意文件名，CLAUDE 是大写, md 是小写。这个文章是用来设定规则。

## 标准工作流程
1. 首先，仔细思考问题，阅读代码库中的相关文件，并将计划写入任务文件 todo.md。
2. 该计划应包含一个待办事项列表，以便您在完成时可以勾选。
3. 在开始工作之前，请与我确认，我将核实该计划。
4. 然后，开始处理待办事项，并随时标记已完成的项目。
5. 在每一步中，请向我简要说明您所做的更改。
6. 使您执行的每项任务和代码更改都尽可能简单。我们希望避免进行任何大规模或复杂的更改。每次更改应影响尽可能少的代码。一切都以简单为中心。
7. 最后，在 todo.md 文件中添加一个审查部分，总结您所做的更改和任何其他相关信息。

英文：

## Standard Workflow
1. First think through the problem, read the codebase for relevant files, and write a plan to tasks file todo.md.
2. The plan should have a list of todo items that you can check off as you complete them
3. Before you begin working, check in with me and I will verify the plan.
4. Then, begin working on the todo items, marking them as complete as you go.
5. Please every step of the way just give me a high level explanation of what changes you made
6. Make every task and code change you do as simple as possible. We want to avoid making any massive or complex changes. Every change should impact as little code as possible. Everything is about simplicity.
7. Finally, add a review section to the todo.md file with a summary of the changes you made and any other relevant information.

用@CLAUDE.me 让CC过一下。视频只用几秒带过“we're going to put in a few rules here that are really powerful that are going to make Claude code even better at coding So here's the rules we're going to put in I'll also include this down below in the description ” 没有演示。所以我没领悟到，是在代码第二次生成后，才让 CC 读取这个规则。造成 todo.md 是空的。

todo.md 文件作用是，查看待办清单 / Check List

油管博客 Finn 用提示词让 AI 生成 PLAN

提示词：

what do you think we should add to make this calendar even more powerful?

中文：

你认为我们应该添加什么功能来让这个日历应用更加强大？

（到此，看一下白送的 TOKEN 还有多少？）

以下是 CC 的思考输出， FINN视频里用的 OPUS 模型，给出的 PLAN 要强些有限。

what do you think we should add to make this calendar even more powerful?

✻ Thinking…

The user is asking for my recommendations on what features we could add to make
the calendar even more powerful. They want me to think about what additional
functionality would enhance the calendar app. This is about planning and
suggesting features, not implementing them yet since I'm in plan mode.

Let me think about what would make a calendar app more powerful and useful:

1. Data Persistence - Currently events are only stored in local state, so they
disappear on refresh
2. Event Management - Can't edit, delete, or view event details
3. Different View Types - Only has weekly view, could add monthly, daily, year
view
4. Recurring Events - No support for repeating events
5. Categories/Tags - Better organization of events
6. Search and Filtering - Finding specific events
7. Import/Export - Integration with other calendar systems
8. Notifications/Reminders - Alert users about upcoming events
9. Time Zone Support - Handle different time zones
10. Drag and Drop - Moving events around visually
11. Multi-user Support - Sharing and collaboration
12. Event Templates - Quick creation of similar events
13. Analytics/Insights - Time tracking, productivity metrics
14. Mobile Responsiveness - Better touch interactions
15. Keyboard Shortcuts - Power user features
16. Print Support - Physical calendar printing
17. Dark/Light Mode - Theme switching
18. Integration APIs - Connect with other services
19. Event Conflicts - Detect overlapping events
20. Meeting Features - Video calls, attendees, locations

I should organize these into categories and prioritize them based on impact and
development effort.

● Looking at the current calendar app, I can see several areas where we could
significantly enhance its power and usability. Let me analyze what would make
the biggest impact:

● Read(calendar-app\src\components\Calendar.tsx)
⎿ Read 50 lines (ctrl+r to expand)
⎿ calendar-app\CLAUDE.md

✻ Thinking…

Based on my analysis of the current calendar app, I can see that it's beautiful
but has some fundamental limitations:

1. Current State:
- Only weekly view
- Events are stored in local state (lost on refresh)
- Can only create events, not edit/delete them
- No recurring events
- No categories or organization
- Basic event structure

Let me think about what would make the biggest impact for users while keeping
changes simple and manageable:

High Impact, Low Complexity:
1. Data Persistence - Save events to localStorage so they persist across sessions
2. Event Management - Edit, delete, and view event details
3. Multiple Views - Monthly and daily views in addition to weekly
4. Drag & Drop - Move events by dragging them around

Medium Impact, Medium Complexity:
5. Recurring Events - Daily, weekly, monthly repeating events
6. Event Categories - Color-coded categories for organization
7. Search & Filter - Find events quickly
8. Today Navigation - Quick jump to current date

High Impact, Higher Complexity:
9. Import/Export - .ics file support for integration with other calendars
10. Notifications - Browser notifications for upcoming events
11. Event Conflicts - Detect and warn about overlapping events
12. Mini Calendar - Small month view for navigation

I should prioritize based on user value and development complexity. The most
impactful improvements would be:

1. Data Persistence (Critical - events disappear on refresh)
2. Event Management (Critical - can't modify events once created)
3. Multiple Views (High value - see different time scales)
4. Drag & Drop (High UX improvement)
5. Event Categories (Organization and productivity)
6. Recurring Events (Common use case)
7. Search/Filter (Scales with more events)

8. Today Navigation - Implementing a quick return to the current date enhances
user experience by providing instant temporal context.

I'll map out a strategic approach to streamline calendar navigation and improve
overall usability.

● Read(calendar-app\src\types\event.ts)
⎿ Read 8 lines (ctrl+r to expand)

✻ Thinking…

Now I have a good understanding of the current calendar structure. Let me analyze
what would make this calendar significantly more powerful while keeping each
change simple and focused.

Current limitations I've identified:
1. Events are lost on page refresh (no persistence)
2. Can't edit or delete events once created
3. Only weekly view available
4. No event organization or categories
5. No recurring events
6. No quick navigation features
7. No search functionality
8. No drag-and-drop interaction

I should organize these improvements by priority and complexity, focusing on
features that provide the most user value with manageable implementation
complexity.

● Based on my analysis of the current calendar app, I can see several powerful
enhancements that would significantly improve the user experience. Let me
present a comprehensive plan for making this calendar much more powerful:

●User approved Claude's plan:
⎿ 🚀 Calendar Power-Up Enhancement Plan

🎯 Priority 1: Essential Missing Features

1. Data Persistence System

- Implement localStorage to save events permanently
- Events currently disappear on page refresh - critical fix
- Add import/export functionality for calendar data backup

2. Complete Event Management

- Edit Events: Click to modify existing events
- Delete Events: Right-click or button to remove events
- Event Details View: Full modal with all event information
- Duplicate Events: Quick copy function for similar events

3. Multiple Calendar Views

- Monthly View: Traditional month grid layout
- Daily View: Detailed single-day schedule
- Year View: Overview of entire year
- View Toggle: Smooth transitions between views

🎯 Priority 2: Enhanced User Experience

4. Drag & Drop Functionality

- Move events by dragging to different times/days
- Resize events by dragging edges to adjust duration
- Visual feedback during drag operations
- Snap-to-grid for precise placement

5. Event Categories & Organization

- Color-Coded Categories: Work, Personal, Health, etc.
- Category Management: Create/edit/delete categories
- Smart Filtering: Show/hide events by category
- Category Statistics: Time spent per category

6. Smart Navigation & Search

- Today Button: Instant jump to current date
- Date Picker: Calendar widget for quick navigation
- Search Bar: Find events by title, description, or category
- Quick Filters: Today, This Week, Upcoming, etc.

🎯 Priority 3: Advanced Features

7. Recurring Events System

- Repeat Options: Daily, weekly, monthly, yearly
- Custom Patterns: Every 2 weeks, specific weekdays
- End Conditions: Never, specific date, number of occurrences
- Exception Handling: Skip holidays, modify single instances

8. Time Zone & Scheduling Intelligence

- Multi-timezone Support: Handle different time zones
- Conflict Detection: Warn about overlapping events
- Suggested Times: Smart scheduling for new events
- Duration Templates: Common meeting lengths (15min, 30min, 1hr)

9. Productivity & Analytics

- Time Tracking: See how much time spent in different categories
- Weekly/Monthly Reports: Visual charts of time allocation
- Goal Setting: Target hours per category
- Productivity Insights: Patterns in your schedule

🎯 Priority 4: Integration & Polish

10. Import/Export & Integration

- ICS File Support: Import from Google Calendar, Outlook
- JSON Export: Backup and share calendar data
- URL Sharing: Share individual events or entire calendars
- Print Support: Beautiful printable calendar layouts

11. Notifications & Reminders

- Browser Notifications: Alerts for upcoming events
- Customizable Timing: 5min, 15min, 1hr before
- Sound Alerts: Optional audio notifications
- Snooze Function: Delay reminders

12. Advanced UI Features

- Keyboard Shortcuts: Power user navigation (n = new event, t = today)
- Mini Calendar: Small month view for quick navigation
- Event Templates: Save common event types for quick creation
- Dark/Light Mode: Theme switching
- Mobile-First Touch: Optimized gestures for mobile devices

📊 Implementation Strategy

Phase 1 (Week 1): Core functionality - persistence, editing, multiple views
Phase 2 (Week 2): UX improvements - drag/drop, categories, search
Phase 3 (Week 3): Advanced features - recurring events, analytics
Phase 4 (Week 4): Polish & integration - import/export, notifications

Each feature will be implemented incrementally with minimal code changes,
following the principle of simplicity and focused improvements.

✻ Thinking…

Great! The user has approved my comprehensive plan for making the calendar more
powerful. Now I need to start implementing this step by step, beginning with the
most critical features from Priority 1.

Let me create a detailed todo list for the implementation, starting with the
essential missing features that will have the biggest immediate impact.

I'll start with:
1. Data Persistence System (localStorage)
2. Complete Event Management (edit/delete events)
3. Multiple Calendar Views

These are the foundational improvements that will make the calendar actually
usable as a real productivity tool.

● Perfect! Let me create a comprehensive todo list to implement these powerful
calendar enhancements step by step.

✻ Thinking…

Great! Now I have my todo list ready. Let me start with the most critical feature
- implementing localStorage data persistence. This is essential because currently
all events disappear when the page is refreshed, which makes the calendar
basically unusable for real-world purposes.

I'll need to:
1. Create a utility for localStorage operations
2. Modify the main page component to save/load events from localStorage
3. Ensure proper serialization/deserialization of Date objects

Let me start by marking the first todo as in progress and then implementing the
localStorage functionality.

● Let me start implementing these powerful features! I'll begin with the most
critical improvement - data persistence so your events don't disappear when
you refresh the page.

✻ Thinking…

I'll start by creating a utility for localStorage operations to handle saving and
loading events. This will ensure proper serialization of Date objects and provide
a clean API for data persistence.