At one o'clock in the morning, I stared at the Canvas file just generated in Obsidian, feeling a little dazed. Figure 1: Automatically generated visual log - including timeline, activity grouping, and statistical data. This picture arranges my browsing records, learning tracks, and even tweets today according to the timeline. Each activity has a detailed card, marking which GitHub projects I looked at, the number of stars, and what the core functions are. More importantly, these contents were not compiled manually by me - they were generated by Claude Code himself who ran scripts, visited web pages, extracted information, and finally generated them. I actually held this idea back for a long time. As someone who likes to tinker with tools, I have always wanted a system that can automatically record learning trajectories. It's not a simple export of browsing history, but a truly valuable accumulation of knowledge: What technology did I study today? What important documents have you read? What's new? The traditional approach is to write a diary manually, but to be honest, recalling the day's activities every night is too tiring. Moreover, human memory can embellish or omit details, and what is written is often not accurate enough. Can I ask AI to do this for me? From idea to implementation Speaking of which, the starting point of this project is simple: I want a visual log that is automatically generated every day. But how? I have several vague directions in my mind: Export Chrome browsing history Extract system logs (although I later found out that this is not very reliable) Use Python to generate Obsidian Canvas files. Schedule tasks to be automatically executed at 11pm every night. It doesn’t sound complicated, but when you actually do it, you will find that there are pitfalls in every step. Step 1: The path to data collection Chrome browsing history is ~/Library/Application Support/Google/Chrome/Default/History. Command to query the browsing history of the day: sqlite3 "$CHROME_HISTORY" " SELECT datetime(last_visit_time/1000000-11644473600,'unixepoch','localtime'), url, title, visit_count FROM urls WHERE date(datetime(last_visit_time/1000000-11644473600,'unixepoch','localtime')) = '$DATE' ORDER BY last_visit_time DESC " | jq -R -s -c 'split("\n") | map(select(length > 0))' This code looks a bit convoluted, mainly because Chrome's timestamp format is special (from 1601 The number of microseconds starting in the year), required To convert to Unix timestamp. The exported data is in JSON format, including time, URL, title, and number of visits. This was raw material, but it wasn't enough - I needed to extract the real valuable information from these URLs. [ { "time": "2026-01-13 00:04:04", "url": "https://github.com/obra/superpowers", "title": "obra/superpowers: Claude Code superpowers", "visit_count": 1 }, { "time": "2026-01-13 00:11:51", "url": " "title": "Sunshine Arbor on I have 52 views, but not all of them are worth recording. For example, a homepage like x.com/home or a Google search page are of little significance. What’s really valuable are those GitHub projects, technical articles, and YouTube videos. So how to extract detailed information from these URLs? At first I wanted to use a crawler, but soon found that it was unrealistic. GitHub's page structure is complex, YouTube has an anti-crawling mechanism, and Mo Wen's articles are rendered with JavaScript. If you want to write a general crawler, the workload is too much. Then I thought, since I'm using Claude Code, why not let it do it for me? I discovered the playwright-skill plugin. Its core capability is: you tell Claude which web pages you want to visit and what information you want to extract, and it will automatically write Playwright code, open the browser, crawl the content, and return the results. This idea is very clever. I don’t need to write a crawler myself, I just need to describe my requirements, and Claude will dynamically generate code based on the structure of the web page. And because it is a real browser environment, problems such as JavaScript rendering and login verification can be solved. In actual operation, I asked Claude to visit 4 key web pages: github.com/obra/superpowers - Extract project introduction, Star number, core functions github.com/PleasePrompto/notebooklm-skill - Extract function description note.mowen.cn/detail/xxx - Extract article titles and opinions github.com/lackeyjb/playwright-skill - Extract project information The data returned by Claude is very detailed. For example, the Superpowers project not only told me that it has 19.9k stars, but also extracted 5 core functions: interactive design refinement, sub- Agent-driven development, TDD enforcement, Git Worktrees management, plan execution and code review. ## Extraction result example ### obra/superpowers - Title: Superpowers - Claude Code superpowers: core skills library - Star count: 19,907 ⭐ - Introduction: A complete software development workflow, built on a set of composable "skills" Main function points:
- Interactive design refinement - refine requirements by asking questions before writing code
- Subagent driven development - start multiple subagents to handle engineering tasks
- Test Driven Development - Enforcing the RED-GREEN-REFACTOR Process
- Git Worktrees Management - Create an isolated workspace on a new branch
- Plan execution and code review - Break down the work into small tasks of 2-5 minutes 4: GitHub project details extracted by Claude This information would have taken me at least half an hour to sort through manually. It's fully automatic now. Step 3: Canvas generation Obsidian's Canvas file is essentially a JSON, including nodes and edges. There are several types of nodes: text - text card file - file link group - group container. However, it can be automatically generated after installing ob-skills. Pitfalls Encountered The whole process was not smooth sailing. Pitfall 1: The system log export is stuck. I originally wanted to export the system log of macOS to record which applications I opened and which commands I executed. But the log show command is too slow and often gets stuck. Later I gave up this feature and only kept the browsing history. The browsing history is actually rich enough since I do most of my work in the browser. Pitfall 2: Playwright permission issue Claude Code runs in a sandbox environment and cannot directly access the /tmp directory. I first followed the playwright-skill documentation and wrote the script to /tmp/playwright-test-*.js, but the result was an "Access denied" error. Later it was discovered that a general-purpose agent is needed to perform web page access tasks, which has higher permissions. Pitfall Three: Canvas Typesetting The coordinate system of Canvas is manually specified and there is no automatic layout. I need to calculate the position of each node and make sure they don't overlap and are nicely aligned. The process is cumbersome. I referred to the Canvas file (2026-01-12) that I created manually before, extracted its layout rules, and then wrote it into code. For example, timeline nodes, arranged horizontally, with a spacing of 180 pixels: x_positions = [-620, -420, -220, -20, 180] for i, activity in enumerate(activities): node = { "x": x_positions[i], "y": 210, "width": 150, "height": 80 } Pit 4: Authenticity Verification AI The generated content sometimes "hallucinates" and fabricates information that does not exist. In order to ensure the authenticity of the log, I asked Claude to confirm key information with me before generating content. For example: "How long did you watch the YouTube video at 22:00?" "Was this tweet posted after configuring the logging system?" "Is the linear algebra video a new learning direction or a temporary browsing?" After I answer, Claude will generate content based on real situations. This step is important to prevent the log from turning into "AI creation". Final effect Now at 11 o'clock every night, the system will automatically generate two files: 2026-01-13.md - detailed log in Markdown format 2026-01-13.canvas - visual board Canvas file contains: 5 topic groups (Skills ecology, Playwright, NotebookLM, YouTube learning, social media) Detailed project information (Star number, core functions) Timeline visualization Statistics (number of browsing records, activity duration, total project stars) Today’s achievements and in-depth insights! [[2026-01-13.md]] Figure 5: Package Generated Markdown detailed log Open Obsidian, this Canvas can be seen at a glance. I can quickly review what I did today, what I learned, and what new discoveries I made. More importantly, this content is based on real data, not something I recall or embellish after the fact. Unexpected Gains After completing this project, I sent a tweet: "ob + claudian + playwright-skills + ob-skills + general-purpose-skills can automatically generate visual logs!" Figure 6: Technical tweet posted - attracted community attention Unexpectedly, it attracted a lot of attention. Many people liked and forwarded it, and some discussed it in the WeChat group. The reading volume is still increasing. Someone asked me: "Can this be used for knowledge management?" Someone said: "I also want a system that automatically records learning trajectories." Others asked: "Can AI analysis be added to automatically summarize learning key points?" This feedback made me realize that automated logs are not just a personal tool, it may be a greater need. In the era of information explosion, we are exposed to a lot of content every day, but very little of it is actually absorbed. What would it be like if there was a system that could automatically record, organize, and analyze our learning trajectories? Perhaps this is the value of Agent: not to replace people, but to help people better manage information and accumulate knowledge. Enlightenment of technology stack integration Looking back, the technologies used in this project are not complicated: Shell script (export browsing history) Python (generate Canvas) Playwright (webpage content extraction) Claude Code (task arrangement and content generation) Obsidian (visual display) Figure 7: Schematic diagram of technology stack integration. But when they are combined, it produces the effect of 1+1>2. This brings me to the Superpowers project I recently researched. Its core concept is "composable skills". Each Skill only does one thing, but can be called and combined with each other to form complex workflows. For example: playwright-skill is responsible for browser automation notebooklm-skill is responsible for document query general-purpose agent is responsible for task orchestration They are independent but can collaborate seamlessly. This design philosophy is actually the continuation of the Unix philosophy in the AI era: do one thing well and then combine it through pipelines (or APIs). Next step plan The current system is still relatively basic and there are many areas for improvement:
- Intelligent classification The current classification is based on time periods and is relatively rough. Can AI be used to automatically identify activity types? For example: Technical research (GitHub projects, technical documents) Learning (videos, courses) Social networking (Twitter, WeChat) Entertainment (YouTube entertainment videos, news)
- Knowledge graph connects daily logs to form a knowledge network. For example: I studied the Claudian plugin on January 12th and Obsidian Skills on January 13th. How are they related? graph LR A[2026-01-12 Claudian plug-in] -.Association.-> B[2026-01-13 Obsidian Skills] B -.Association.-> C[2026-01-13 Superpowers] A -.Common topic.-> D[Knowledge Management] B -.Common topic.-> D C -.Common topic.-> E[Agent Workflow] D -.Evolution.-> E Figure 8: Knowledge graph connection diagram
- AI summary Add an AI-generated summary at the end of the log: What is today’s core discovery? What are the directions worthy of further research? How is it related to previous studies?
- Multi-platform support Currently only Chrome browsing history is supported, can you add: Safari browsing history VS Code editing records Terminal command history Kindle reading notes
- Privacy protection Browsing history is sensitive data, and privacy issues need to be considered: Filter out sensitive websites (banks, mailboxes) Process locally and do not upload to the cloud Encrypted storage Written at the end This project took about a day from idea to implementation. But the thinking it brought me went far beyond the project itself. We are at a turning point. AI is no longer a technology in the laboratory, but a tool that can directly change workflows. Products such as Claude Code, Cursor, and Windsurf turn AI from a "chat assistant" into a "programming partner." More importantly, the boundaries of AI capabilities are rapidly expanding. What used to require writing complex code now only requires describing requirements. Information that previously needed to be sorted manually can now be extracted automatically. But that doesn’t mean people become less important. On the contrary, the role of people is more critical: Define goals (What kind of log do I want?) Verify authenticity (Is the content generated by AI correct?) Propose directions for improvement (What to do next?) AI is a tool, and people are the ones who use the tools. This automated logging system is just the beginning. I believe that more similar tools will appear in the future to help us better manage information, accumulate knowledge, and improve efficiency. What we have to do is to stay curious, keep trying, and turn ideas into reality. Project address: /Volumes/ExtaData/ob/brad/Diary/ Related technologies: Claude Code, Playwright, Obsidian, Shell, Python Generation example: [[2026-01-13.canvas]] If you also want to build a similar system, welcome to communicate.
