Yanmu

Methods for Sharing VPN and Proxy Connections Across Devices

Thu, 11 Jun 2026 23:00:00 +0800

Mode	Also Known As	Description
Proxy Sharing Mode	Allow LAN	Devices forward requests through proxy software
Gateway Sharing Mode	Bypass Gateway, Transparent Proxy	Devices point their gateway to the proxy host
Routing Sharing Mode	WiFi Hotspot	Host creates an independent subnet and assigns IPs

Overview diagram:

How It Works

Suppose your computer is running Clash or V2Ray with proxy sharing enabled. You can set up your phone to route its requests through your computer. The flow is as follows:

Phone access request → Computer (processed by V2Ray/Clash) → Gateway (Router) → Internet
Internet response → Gateway (Router) → Computer → Phone

This is how proxy sharing mode works.

Example: Phone Accessing the Internet Through Computer Proxy

In V2Ray, enable LAN connections to see the SOCKS5 and HTTP ports

The computer uses HTTP proxy, so port 10809 is used
Check the WiFi connection info on your phone to get its IP address
Enter the phone’s IP and port in your computer’s proxy settings

Now your computer’s requests will be handled by your phone—your computer can access Google. If you turn off the phone’s VPN, the computer loses access too.

Example: Computer Proxying Phone Requests (Reverse)

The reverse setup—using your computer to proxy your phone’s requests—works the same way:

Open V2Ray settings and allow LAN connections
The proxy port is displayed in the lower-left corner
Go to your phone’s WiFi proxy settings, enter the computer’s IP as the server address and the port shown in the screenshot

About UDP Proxy

Note: The system proxy configured in phone settings is typically an HTTP proxy, which does not support UDP transport. To proxy UDP traffic, you need a SOCKS proxy. Since system proxy settings don’t support SOCKS, you’ll need a third-party VPN tool.

Create a SOCKS proxy in V2Ray on your phone:

Server: Enter your computer’s IP address
Port: Enter your computer’s V2Ray SOCKS port

This allows UDP data to be proxied. However, whether UDP proxying actually works depends on whether your server node supports UDP.

Pros and Cons

Pros:

Almost all proxy tools support enabling proxy sharing mode

Cons:

Each network device needs to be configured individually
Some devices (e.g., TV boxes) don’t support proxy configuration, making this method unusable for them

How It Works

Gateway sharing mode is also called bypass gateway, transparent proxy, or transparent gateway.

Typically, the router assigns IPs to each device. In gateway mode, the router assigns the computer’s IP to every device as their gateway.

Workflow: When your phone wants to access Google → data is sent to the gateway (the computer) → the computer processes the data and forwards it to the router

Key point: All internet traffic from devices on the LAN goes through the gateway.

Pros and Cons

Advantages:

Flexible configuration—you can set the gateway individually per device, or have the router change the gateway for all devices on the LAN at once
The biggest advantage: a gateway-level system proxy can intercept all traffic on the system. Even if some applications don’t use a proxy or certain devices don’t support proxy settings, any internet access still passes through the gateway. The devices themselves don’t even know they’re being proxied
This is why it’s called transparent proxy or transparent gateway

Disadvantages:

Not all operating systems support it. Windows does not support this mode; macOS and Linux do

Implementation via Linux Virtual Machine

Since Windows doesn’t support gateway sharing mode, you can install a Linux virtual machine to achieve it.

Use bridged networking for the VM (same LAN as the host)
Enable the root user
Enable IP forwarding and TUN mode:
1

sysctl -w net.ipv4.ip_forward=1
Go to your computer’s IP settings and set the default gateway to the Linux VM’s IP address

Limitation: This won’t work without a LAN.

How It Works

When routing sharing mode is enabled, the computer creates an independent subnet (shown as 192.168.137.1 in green in the diagram). When other devices connect to this computer, the computer assigns them IPs, gateways, and other network info. The computer essentially takes over the router’s job—hence the name routing sharing mode.

Pros and Cons

Pros:

Many advantages, widely applicable

Cons:

Adds an extra NAT layer, requiring some performance overhead
Creates two different LAN segments that cannot communicate with each other by default
Most phones don’t support sharing VPN networks through routing mode without Root access

Configuration on Windows

Enabling routing sharing mode on Windows requires two network interfaces. Most computers have only one, so you may need to purchase a USB Ethernet adapter to add an extra port.

Setup steps:

Assume the first NIC connects to your LAN and the second is idle
Enable TUN mode
Clash will create a virtual network adapter
Right-click the virtual adapter → Properties → Sharing → Select “Allow other network users…” and choose the idle NIC
This creates a new subnet, sharing Clash’s proxy environment with the idle NIC

Use Cases

This idle NIC can be connected to another computer via an Ethernet cable, and that computer can access the internet through the proxy without any configuration. A more common scenario is connecting it to a wireless access point (AP) to broadcast WiFi.

C Drive Always Full? Use the Simple mklink DOS Command to Save Your C Drive!

Tue, 02 Jun 2026 00:00:00 +0800

Background

Running out of space on the C drive is a classic pain point for Windows users. The usual culprits are:

WeChat/QQ chat history and file caches (easily tens of GB)
Browser caches and user data
Global caches from package managers (pip, npm, conda, cargo, etc.)
Default installation/data directories for Adobe, Office, games, and other large software
Windows update leftovers and temporary files

Most of these programs default to writing data to the C drive and don’t provide an option to change the path. Reinstalling software or editing the registry is both troublesome and risky.

The mklink command offers an elegant solution — store the data on your D or E drive, while the software “thinks” it’s still on the C drive.

What is mklink?

mklink is a built-in Windows command-line tool (available since Vista) for creating links. It’s essentially a path alias/pointer, similar to Linux’s ln -s.

🧊 Analogy: Think of a desktop shortcut — when you double-click the icon on your desktop, it actually opens a file located elsewhere. mklink does the same thing, connecting the “real storage location” with the “path the software expects.”

Three Types of Links

Type	Command	Target	Characteristics
Symbolic Link	`/D`	Directory	Can cross partitions, most commonly used, like a “directory shortcut”
Hard Link	`/H`	File	Same partition only, multiple paths pointing to the same data
Directory Junction	`/J`	Directory	Cross-partition, older NTFS technology, better compatibility

⭐ For everyday use, prefer /J (Directory Junction) or /D (Directory Symbolic Link). For moving software data directories, they work almost identically.

Step-by-Step Instructions

Close the Target Software

Make sure the software you’re migrating data from is completely closed (including background processes), otherwise files will be locked and cannot be moved.

Move the Original Folder

1
2

# Move/cut the original C drive directory to the target drive
move "C:\original-path" "D:\new-path"

⚠️ Don’t copy! Use move (or cut) to ensure the original path no longer exists.

Create the Link

1
2

# Create a Directory Junction with /J
mklink /J "C:\original-path" "D:\new-path"

Or use /D:

`1`	`mklink /D "C:\original-path" "D:\new-path"`

Verify

Open the original C drive path and confirm you can access the files on the D drive.

🔍 In CMD, navigate to the parent directory and run dir. Linked items will show the <JUNCTION> or <SYMLINKD> marker.

Common Use Cases

WeChat Data Migration ⭐

WeChat is the number one C drive killer — chat history and file caches can easily reach tens of GB.

# Close WeChat
# Move the data directory
move "%USERPROFILE%\Documents\WeChat Files" "D:\Data\WeChat Files"

# Create the link
mklink /J "%USERPROFILE%\Documents\WeChat Files" "D:\Data\WeChat Files"

The new version of WeChat stores data at C:\Users\username\Documents\WeChat Files, while older versions store it in the installation directory under WeChat Files.

QQ Data Migration

# QQ personal folder is usually at
# C:\Users\username\Documents\Tencent Files

move "C:\Users\your-username\Documents\Tencent Files" "D:\Data\Tencent Files"
mklink /J "C:\Users\your-username\Documents\Tencent Files" "D:\Data\Tencent Files"

Chrome / Edge Browser Cache

# Chrome user data
move "%LOCALAPPDATA%\Google\Chrome\User Data" "D:\BrowserData\Chrome"
mklink /J "%LOCALAPPDATA%\Google\Chrome\User Data" "D:\BrowserData\Chrome"

# Edge user data
move "%LOCALAPPDATA%\Microsoft\Edge\User Data" "D:\BrowserData\Edge"
mklink /J "%LOCALAPPDATA%\Microsoft\Edge\User Data" "D:\BrowserData\Edge"

Development Tool Caches

# pip cache
move "%LOCALAPPDATA%\pip\cache" "D:\DevCache\pip"
mklink /J "%LOCALAPPDATA%\pip\cache" "D:\DevCache\pip"

# npm cache
move "%LOCALAPPDATA%\npm-cache" "D:\DevCache\npm"
mklink /J "%LOCALAPPDATA%\npm-cache" "D:\DevCache\npm"

# Maven local repository
move "%USERPROFILE%\.m2\repository" "D:\DevCache\maven"
mklink /J "%USERPROFILE%\.m2\repository" "D:\DevCache\maven"

A better approach is to configure the package manager’s cache path directly (e.g., npm config set cache). Environment variable solutions are more stable, with mklink as a fallback.

Windows Store Apps / Large Games

Some UWP apps and Xbox Game Pass games don’t allow you to change the installation path, but mklink can help migrate them.

1
2
3

# For Forza Horizon and similar games
# Usually located at C:\Program Files\WindowsApps or C:\XboxGames
# You'll need to obtain folder permissions (TrustedInstaller) first

⚠️ Operating on the WindowsApps directory is more complex and involves permission management. Proceed with caution.

OneDrive / iCloud Sync Directories

1
2

move "C:\Users\your-username\OneDrive" "D:\OneDrive"
mklink /J "C:\Users\your-username\OneDrive" "D:\OneDrive"

Important Notes & Pitfalls

Issue	Explanation
Must move first, then link	`mklink` requires that the target path does not exist, otherwise it will error `File already exists`
Back up before moving	Although the operation is reversible, it’s recommended to back up important data first
Don’t touch system directories	Avoid `C:\Windows`, `C:\Program Files`, and other system directories
Deleting a link ≠ deleting data	Removing the “shortcut” on the C drive only deletes the link; the data on the D drive remains
Correct way to delete a link	`rmdir "C:\link-path"` (not `del`)
Run CMD as Administrator	Some directories require admin privileges to create links
NTFS file system required	Only supported on NTFS, not FAT32 or exFAT
Restoring	Delete the link → move the D drive data back to the original C drive path

Deleting / Restoring a Link

# Delete the link (does NOT delete the original data on the D drive)
rmdir "C:\original-path"

# To restore: move the data back
move "D:\new-path" "C:\original-path"

Quick Diagnosis: What’s Eating Your C Drive?

Before using mklink, analyze your C drive to find the real culprit:

Tool	Features
WizTree	Blazing fast scan, intuitive treemap, free
SpaceSniffer	Visual block chart, intuitive
TreeSize Free	Classic tool, sorted by folder size
Windows Disk Cleanup	`cleanmgr`, cleans temp files and update leftovers

🔥 WizTree is recommended — it uses MFT parsing directly, scanning an entire hard drive in seconds.

Summary

The core idea of mklink is:

1
2
3

Software thinks data is still at C:\some-path
       ↓ (the link created by mklink)
Data is actually stored at D:\some-path

The operation mantra: Close the software → Move the folder → Create the mklink link → Verify it works

It’s safer, reversible, and more efficient than “editing the registry” or “reinstalling to another drive.” Master this command, and your C drive will never mysteriously turn red again. 🎉

Web Design Skill Practical Manual (Detailed Version)

Wed, 27 May 2026 00:00:00 +0800

Web Design Skill Practical Manual (Detailed Version)

Tools: Claude Code / OpenCode Goal: Following this guide, you will use AI to generate a high-quality space exploration museum webpage Estimated time: 40-90 minutes

Before We Start - Understanding What We’re Going to Do

Overall Process Overview

`1`	`Set up environment → Install Skill → Create project → Bare run experience → Skill enhancement → Compare`

Why “Bare Run” First Before Using Skill?

This is a comparison experiment:

If you use Skill directly, you won’t appreciate its value
Let AI work freely first → You’ll see typical AI-style webpages (purple-pink-blue gradients, large rounded cards, emoji icons…)
Then use Skill to do it again → You’ll witness the same topic, same model producing completely different results

Tools You’ll Need

Tool	What It Is	Where to Get It
Terminal	Where you chat with AI	Windows: PowerShell / Terminal; macOS: Terminal
Claude Code or OpenCode	AI coding Agent	See installation instructions below
Git	Download Skill files from GitHub	`winget install Git.Git` (Win) / `brew install git` (macOS)
Browser	Preview webpage effects	Chrome / Edge / Firefox
Screen recorder (optional)	Record the process	OBS Studio (free) / System built-in

Confirm Agent is Ready

If You’re Using Claude Code

What it is: Anthropic’s official terminal AI coding tool. You type in the terminal, it helps you read files, write code, and execute commands.

Confirm installation:

Open terminal (Windows: PowerShell, macOS: Terminal), type:

`1`	`claude --version`

If it shows a version number (like 1.0.x), it’s installed.

If not installed:

1
2

# Need to install Node.js first (https://nodejs.org), then:
npm install -g @anthropic-ai/claude-code

Confirm API Key is configured:

Claude Code needs an Anthropic API Key. In terminal:

`1`	`claude config list`

If you see apiKey is set, you’re good. If not:

`1`	`claude config set apiKey sk-ant-xxxxx`

(Replace sk-ant-xxxxx with your real key)

If You’re Using OpenCode

What it is: An open-source terminal AI coding tool by SST team, similar to Claude Code but supports multiple models.

Confirm installation:

`1`	`opencode --version`

If not installed:

# Method 1: Install via Go
go install github.com/sst/opencode@latest

# Method 2: Install via Homebrew (macOS/Linux)
brew install sst/tap/opencode

Create Project Directory

Create Working Folder

1
2
3

cd ~/Desktop
mkdir space-museum-demo
cd space-museum-demo

Initialize Git Repository

`1`	`git init`

Create Initial File

Create an empty HTML file:

Claude Code:

claude

Then input:

Please create an index.html file in the current directory with only the basic HTML5 structure (DOCTYPE, head, body), no styles or content. HTML lang set to zh-CN, title set to "Space Exploration Museum".

Or manually:

cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Space Exploration Museum</title>
</head>
<body>
</body>
</html>
EOF

Start Local Preview Server

`1`	`npx serve .`

Visit http://localhost:3000 in your browser.

Download web-design-skill

Clone Repository

1
2

cd ~/Desktop/space-museum-demo
git clone https://github.com/ConardLi/web-design-skill.git

Bare Run Experience - See AI’s “Native Aesthetics”

🎯 Purpose: Let AI generate a webpage using default behavior, observe its “native aesthetics.”

Start Agent (Without Loading Skill)

1
2
3

claude
# or
opencode

Input Design Requirements

Please help me create a space exploration museum online exhibition webpage. All code in one index.html file (HTML + CSS + JS inline), requirements:

1. Dark theme, with cosmic feel and sci-fi atmosphere
2. Hero area showing museum name "Interstellar Exploration Museum" and a slogan
3. Exhibition card area showing 4 space exploration milestones (Gagarin, Apollo 11, Hubble Telescope, James Webb Telescope)
4. Timeline area showing key years of space exploration
5. Scroll animation effects (elements fade in on scroll)
6. Responsive layout, works on mobile

Please generate complete code and write to index.html.

Wait for AI to Generate

This takes about 1-3 minutes.

Check Result

Refresh http://localhost:3000 in your browser.

Observation checklist:

Colors: Is there a purple-pink-blue gradient?
Layout: Is it standard “centered title + subtitle”?
AI-style features: Emoji icons? Large rounded cards?

Save Bare Run Version

`1`	`Please copy the current index.html and name it index-no-skill.html`

Install Skill to Agent

🎯 Purpose: Inject web-design-skill rules into Agent’s system prompt.

Claude Code - Two Installation Methods

Method A: Write to CLAUDE.md (Recommended, Permanent)

`1`	`Please read the entire content of web-design-skill/skill.md, then create a CLAUDE.md file with the skill.md content.`

Method B: Reference in Conversation (Temporary)

`1`	`@web-design-skill/skill.md Please design the webpage according to this Skill file's rules.`

OpenCode - Installation

Method A: Write to AGENTS.md (Recommended)

`1`	`cp web-design-skill/skill.md AGENTS.md`

Verify Skill is Active

Start Agent, input:

`1`	`Before starting design, please tell me: According to your design system, what color scheme will you use? What fonts? What spacing rules? What are the absolute no-goes?`

If Skill is active, AI will mention OKLCH color space, specific font recommendations, and “remove AI-style” rules.

Skill Enhancement - Polish the Premium Feel

🎯 Purpose: Use the same requirements, let Skill guide AI to create a completely different webpage.

Start New Conversation

Important: Must start a new conversation!

Input Design Requirements

This time we deliberately give minimal requirements:

`1`	`Help me create a space exploration museum online exhibition webpage, all code in one index.html file.`

Phase A: AI Asks Questions

AI may ask clarifying questions first.

Phase B: AI Explains Design System

AI describes its design system before writing code:

Design System:
━━━━━━━━━━━━
Color scheme (based on OKLCH):
- Background: oklch(15% 0.02 260) — Deep space blue
- Primary: oklch(70% 0.15 250) — Cold blue
- Secondary: oklch(60% 0.12 310) — Deep purple
- Text: oklch(95% 0.01 260) — Near white

Fonts:
- Headings: Orbitron (tech feel)
- Body: Space Grotesk (good readability)

Spacing system: Based on 8px grid

Layout strategy: Magazine-style large image layout, non-traditional card grid

Phase C: AI Outputs V0 (Rough Initial Version)

Check browser, confirm if direction is correct.

Give 1-2 feedback points per round.

Phase E: Final Verification

Please review this webpage as a fresh design expert:
1. Any "obviously AI-made" features? List them all.
2. Is the color scheme harmonious? Using OKLCH?
3. Is font usage appropriate? Any overused fonts?
4. Is layout creative? Or standard Hero + card grid?
5. Are animations natural? Any overuse of glow effects?
6. Is mobile adaptation working?

Save Skill Version

After AI completes, save the final version:

# If you're still in the Agent conversation, ask AI to copy:
# "Please copy the current index.html and name it index-with-skill.html"

# Or manually copy after exiting Agent:
cp index.html index-with-skill.html

Compare Two Versions

Open both files in browser:

1
2

http://localhost:3000/index-no-skill.html     ← Bare run version
http://localhost:3000/index.html               ← Skill version

Record as Video (Optional)

Suggested Shots

Shot 1: Final showcase (30 seconds)
Shot 2: Comparison display (1 minute)
Shot 3: Process replay (2-3 minutes)
Shot 4: Design details explanation (1 minute)
Shot 5: Summary (30 seconds)

Appendix A: Common Prompt Templates

Ask AI to Explain Design System First

Before writing any code, please describe your design system in natural language, including:
1. Color scheme (using OKLCH)
2. Font choices (what for headings and body)
3. Spacing system
4. Layout strategy
5. Absolute no-gos
I'll confirm before you start coding.

Request Quick V0

Give me a minimum viable version (V0) first.
Placeholders and incomplete parts are fine.
I'll confirm direction before you refine details.
Don't spend too much time on details.

Trigger Full Verification

Please review the current webpage as a fresh design expert.
List all "obviously AI-made" features,
and all issues with colors, fonts, layout.
Then fix them one by one.

Final Summary

1
2

Core web design workflow:
Understand requirements → Confirm design system → Quick V0 → Iterate and refine → Verify

Three sentences to remember Skill’s essence:

Design system first, code second — Wrong direction means wasted code
Rough V0 first, then polish — Quick iteration, lowest cost
Bold whitespace, every element must prove itself — Restraint is premium

Web Design Skill Learning Notes

Tue, 26 May 2026 00:00:00 +0800

Web Design Skill Learning Notes

What is Claude Design?

Claude Design is a design tool released by Anthropic that caused Figma’s stock price to plummet on the day of its release.

Core concept: Type on the left, get a design draft on the right (essentially runnable webpages, not images)

Differences from Traditional Design Tools

Dimension	Traditional Design Tools (e.g., Figma)	Claude Design
Lead	Human operates on canvas, AI assists	AI is the main generator, human reviews
Output	Design images	Real runnable code
Interaction	Manual drawing	Text description → Auto generation
Version control	Manual operation	Clickable links, tag-based version switching

Essence: Claude Design is more like Claude Code (designer version) rather than an AI version of Figma.

Core Prompt Breakdown (6 Key Points)

The video deeply analyzed Claude Design’s leaked prompts and extracted 6 core design principles:

Role Positioning — Dynamic Identity Switching

Original prompt essence: “You are an expert designer, and the user is your product manager”

Key insights:

❌ Don’t say “you are an AI assistant”
✅ Establish a designer ↔ product manager collaboration

Two benefits:

AI makes decisions more decisively — Designers should have judgment, no need to ask about everything
Key points will be asked — Because the user is the product manager, they make final decisions

Dynamic identity switching:

Making animations → Motion designer
Making prototypes → UX designer
Making presentations → Deck designer

💡 Insight: Many people’s prompts just say “you are a frontend developer” and that’s it. Good role positioning should be dynamic, flexibly switching identities based on specific tasks.

Workflow — Six-Step Process

`1`	`Understand requirements → Explore resources → Make plan → Build structure → Complete verification → Brief summary`

Detail 1: The Art of Questioning (When to ask? When to just do it?)

Problem: Many Agents either ask you a bunch of questions first or just do everything without asking.

Claude Design’s strategy:

Input “Help me make a PPT” → Ask a few questions first (insufficient information)
Input “Help me make a PPT, needed for the National Games in 10 minutes” → Just do it (urgent scenario, sufficient information)

💡 Insight: Based on the urgency and information completeness of the context, flexibly decide whether to ask or execute.

Detail 2: Summary Principles

✅ Only mention key considerations and next steps
❌ Don’t repeat what you’ve already done

💡 Insight: This principle can effectively prevent AI from generating excessive nonsense.

Removing AI-Style (Most Valuable Part)

Typical AI-generated webpage characteristics:

Purple-pink-blue gradient backgrounds
Large rounded cards
Using emojis as icons
Fake data everywhere
Left-side colored border rounded cards
Overused fonts
Meaningless data and icon stacking

It’s like having “furthermore,” “notably,” “in summary” throughout an article —一眼就能看出是 AI 写的。

Claude Design’s approach: List a complete “minefield checklist”, telling AI one by one not to use these clichés.

Font recommendations are also carefully considered:

Clearly list fonts that must never be used + alternatives
Recommend niche but high-quality fonts

Color System — OKLCH Color Space

Color strategy priority:

`1`	`Brand color → OKLCH-derived colors → Never invent new colors`

Why OKLCH instead of HSL?

	HSL	OKLCH
Perceptual uniformity	❌ Not uniform (same brightness value, yellow is much brighter than blue)	✅ Uniform
AI color effect	Values look fine but uncomfortable	Keep lightness and chroma constant, only change hue, colors naturally harmonious

💡 Insight: OKLCH, this seemingly small detail, can directly elevate a webpage’s premium feel by a level.

Content Principles — “1000 NOs for One YES”

Quoting Steve Jobs’ classic quote.

AI’s traditional problem with webpages: Wants to fill every space — Hero, features, reviews, data, FAQ, contact info… everything goes in, but everything is mediocre.

Claude Design’s attitude:

Every element must prove why it should be there
If the page feels empty → May be a layout issue, use whitespace to solve
One bold whitespace > Ten filler sections

Verification Mechanism — Sub-Agent Check

Principle: After development, fork an independent sub-Agent to do a comprehensive check on the webpage.

Why an independent sub-Agent?

AI in the same context tends to “feel good about itself”
Independent sub-Agent has no “emotional baggage”, easier to find problems

Verification content:

Any AI-style features?
Is the color scheme harmonious?
Are fonts appropriate?
Is layout creative?

Core Optimizations of Skill File

The Skill file made three key optimizations based on Claude Design’s prompts:

Design System First, Code Later

Before starting coding, require AI to clearly list:

Color scheme
Font choices
Spacing system
…

Why? If not clarified, AI will silently make decisions and write code. When you see the result, if direction is wrong, you have to redo everything. Clarifying upfront means no cost to correct direction before coding.

Output Minimum Viable Version Early

Require AI to first produce a rough V0 version with assumptions and placeholders
A rough V0 > Spending multiples of time to make a polished V1

Why? If the entire direction is wrong, no matter how polished V1 is, it’s all wasted.

Additional Supplements

Added more items for removing AI-style
Added several verified font and color reference tables
Included reference files (typical code templates, from the “copy study the component” part of the prompt)

Effect Comparison Demo

Test environment: Cursor + Claude 4.7 (with Skill vs without Skill)

Space Exploration Museum Online Exhibition Page

	Without Skill	With Skill
Colors	Cyan-purple-pink gradient, typical AI neon feel	OKLCH defined, close to magazine printing’s deep tones
Fonts	Relatively outdated	Headings and body text have character, tech feel
Layout	Standard Hero + cards, textbook landing page	Non-traditional card style, creative
Animation	Starry sky and planet animations, but with excessive glow effects	Comfortable, creative
Overall	Has space feel, lacks creativity	Like a very experienced designer’s masterpiece

Independent Photographer Portfolio (Minimal Prompt)

	Without Skill	With Skill
Design style	Dark background + neon glow + semi-transparent cards, outdated	Fictionalized a Nordic photographer, designed complete visual style from scratch
Copy	Full of AI feel	—
Emotional expression	The freedom a photographer should have is completely missing	Like flipping through a high-end photography album
Decision strategy	Just did it, didn’t ask questions	Proactively asked about color preferences, core elements, etc.

Final Conclusion

1
2

Without Skill: 85 points → Usable, complete, passing
With Skill: 95 points → Beautiful, polished, stylish

Each rule in Skill seems small individually, but combined they produce qualitative change. This is the gap from “usable” to “beautiful”, from “complete” to “polished”, from “passing” to “stylish”.

Core Knowledge Quick Reference

#	Knowledge Point	One-Sentence Summary
1	Dynamic role positioning	Flexibly switch AI identity based on tasks, not just “you are a frontend developer”
2	Six-step workflow	Understand requirements → Explore resources → Make plan → Build structure → Complete verification → Brief summary
3	Art of questioning	Decide whether to ask or act based on information completeness and urgency
4	Remove AI-style	List minefield checklist, ban gradients/emojis/large rounded cards and other clichés
5	OKLCH color	Perceptually uniform color space, produces more harmonious colors than HSL
6	Content restraint	Every element must prove its reason for existence, bold whitespace
7	Sub-Agent verification	Check with independent context, avoid “feeling good about yourself”
8	Design system first, code later	Expose design decisions early, avoid directional errors
9	Quick V0	Rough but fast prototype > Polished but directionally wrong product

Open source repository: ConardLi/web-design-skill

What Are Agent and Harness? — Video Notes

Mon, 25 May 2026 02:00:00 +0800

One-Sentence Summary

An Agent solves how AI gets work done; a Harness solves how AI does work reliably. Together, they form the foundation of products like Claude Code, Codex, Open Cloud, and Qwen.

1. From ChatGPT to AI Agent

The Original Problem

Asking ChatGPT to create an animation with HTML + SVG (e.g., an Apple logo drawn with lines) often produces poor results — even in 2026, AI struggles with even a minimalist logo.

Manual Improvement

Search for Apple SVG assets on sites like iconfont
Feed the SVG code to AI and ask it to recreate it
Results improve significantly, but manually finding assets every time is tedious

Automated Improvement — Wrapper Sites (Earliest Agent Prototype)

Build a website that wraps ChatGPT via API calls, adding backend functions:

User submits request → The site tells AI: “Here’s the user’s prompt. I also have a logo search function you can call when needed.”
AI analyzes → Determines it needs an Apple logo, responds: “Call the asset search tool with parameter: Apple logo”
Site executes → Backend runs the search function and finds SVG assets
Final generation → The site sends assets + user prompt to AI to complete the animation

2. Two Core Working Modes of Agent

1. ReAct (Reasoning + Acting) — Step by Step

Three-step loop:

Think: AI analyzes the request, determines what’s needed and which tool to call
Act: AI tells the backend to call a tool (e.g., search for assets)
Observe: Backend returns results; AI sees them and continues

The loop repeats: Think → Act → Observe, until the task is complete.

This is the most fundamental working pattern of almost all AI Agents, including Claude Code, Codex, and Open Cloud.

2. Plan & Execute — Plan First, Then Execute

Plan first: Generate a work list / step sequence upon receiving the task
Execute: Follow the checklist step by step

Mode	Analogy	Characteristic
ReAct	Improvise as you go	Flexible, adjust on the fly
Plan & Execute	Research before traveling	Structured, suited for complex tasks

Real agents combine both. For example, Qwen’s “Task Assistant” mode: first analyzes requirements and creates steps (Plan), then proactively searches, writes code, and adjusts (Act).

3. Advanced Agent Capabilities

Tool Calling / Function Calling

The Agent determines which tools to call based on the user prompt; the backend executes them and returns results.

Context Management and Compression

Large models have no memory — each conversation starts fresh
The Agent must send the entire conversation history to the AI each time, which grows longer over time
Context window = AI’s workspace, limited in size
Context compression: When the conversation exceeds the window, earlier content is summarized into a condensed version
- Trade-off: compression loses information, potentially causing the AI to forget previous instructions

Multi-Agent Collaboration

One AI acts as the project manager (understanding requirements, breaking down tasks, assigning work), while other AIs execute subtasks.

Each sub-AI has its own independent context window
The project manager only sees final results, not intermediate steps
Improves efficiency while mitigating context explosion

4. Harness — The Safety Net for Reliable AI

When Agents run in production, they encounter various issues that need a Harness to solve.

Engineering Checkpoints in a Harness

Checkpoint	Problem	Solution
Format Sanitization	AI adds “okay”, markdown code blocks, or extra newlines when returning JSON	Clean: remove fluff, wrapping symbols, extra newlines; send errors back for regeneration if still failing
Parameter Validation	Tool call parameters are invalid (e.g., city field contains a non-city name)	Validate format/range before calling; reject and request refill if invalid
Input Filtering	Prompt injection attacks (“ignore all previous instructions”) / malicious SVG uploads	Scan user input for suspicious instructions and asset safety before processing
Output Filtering	AI-generated content may contain malicious code	Scan output content for threats
Hard-Coded Validation	AI repeatedly makes the same error (e.g., always using pure white backgrounds)	Enforce with code: auto-detect SVG background color and replace white with dark

Core Principle of Harness Engineering

If you can enforce it with code, never rely on prompting alone.

5. Complete Architecture Summary

One Sentence to Elevate

Agent is the horse; Harness is the tack. A horse without tack runs into problems; tack without a horse does nothing. Together, they transform AI from a chat-only chatbot into a worker that gets things done in the real world.

C Drive Full? Expand It Using Other Drives

Sun, 24 May 2026 16:00:00 +0800

C drive turning red is a common headache for Windows users—system update cache, temp files, desktop files, WeChat chat records… Before you know it, your C drive is packed. Replacing the hard drive is expensive, and cleaning only treats the symptoms. The most thorough solution is: borrow space from other drives for your C drive.

📖 Table of Contents (click to expand)

#	Section	Description
1	Preparation	Download, install, enter PE environment
2	Resize	8-step guide with Partition Assistant
3	Reboot & Cleanup	Return to Windows, clean boot menu
4	Tips	Additional advice and FAQs

📦 Preparation

⚡ In a nutshell: Put Windows into a “hibernation box” so the C drive isn’t occupied.

① Download WePE Toolbox

WePE Toolbox — a lightweight PE (Preinstallation Environment) tool, clean and ad-free.

② Install to System

Open the downloaded program and click 「Install into System Now」. It will automatically write the boot entry.

After installation, restart your computer. You’ll see the system boot selection screen.

⏱ Note: The countdown is only a few seconds. If it times out, it will boot into the current system. Watch closely and select quickly!

④ Enter PE Environment

Use arrow keys to select WePE Toolbox and press Enter.

💡 Why enter PE?

In the PE environment, your Windows system is completely “hibernated”—the C drive is not occupied by any process. This allows safe partition resizing. Think of it like surgery: the patient must be anesthetized before the operation. Other partition tools work on the same principle.

🛠️ Resize

Once in PE, the tool menu will pop up automatically. Click 「Partition Assistant」.

Step 1 · Check Disk Layout

Partition Assistant will show you the layout of all disk partitions. Identify which drive has free space to “donate” to the C drive.

Step 2 · Choose the Drive to Shrink

Here we use Software (D drive) as an example. We’ll “cut” some space from D drive to give to C drive.

💡 Which drive to choose?

✅ Prefer drives with plenty of free space that you don’t use often

❌ Avoid touching system recovery partitions or EFI partitions

Step 3 · Adjust Partition

Right-click D drive → 「Adjust Partition」.

Step 4 · Shrink the Drive

In the popup window, drag the slider or enter a value to decide how much space to take from D drive.

✅ Example: If you want to add 50GB to C drive, shrink D drive by 50GB here.

⚠️ Note: The shrink value must not exceed the used space on D drive, or it will error.

Click 「OK」 when done.

Step 5 · Merge into C Drive

You’ll now see a block of 「Unallocated Space」 next to D drive.

Step	Action
1	Right-click C drive → 「Adjust Partition」
2	Drag the slider all the way to the right to merge all unallocated space into C drive
3	Click 「OK」

Step 6 · Submit Task

Click 「Submit」 in the top-left corner.

⚠️ Critical Reminder

All the adjustments so far are just “plans” — they haven’t taken effect yet.

Only after clicking 「Submit」 will the system actually execute the partition operations. Double-check before submitting!

Step 7 · Wait for Execution

Partition Assistant will begin executing the adjustments. This may take several minutes to over ten minutes, depending on your disk size and speed.

⚠️	🔴 Do NOT power off or force shutdown during this process!
Otherwise, the partition table may be corrupted, causing data loss
Plug in the power adapter (laptop users)
Grab a cup of tea and wait patiently 🍵

Step 8 · Done 🎉

When you see the success message, the expansion is complete!

🚀 Reboot & Cleanup

#	Action
①	Click 「Restart」
②	At the boot menu, select your Windows system to boot normally
③	Open This PC and verify that C drive space has increased ✅

🧹 Final step: If you don’t want to see the boot selection screen every time, open WePE Toolbox → click 「Uninstall」 to restore the original state.

📌 Tips

Scenario	Recommendation
🟢 C drive is too small (< 30GB)	Expand to at least 80 ~ 100GB
🟡 D drive also has no free space	Clean up D drive, or use an external drive to transfer large files
🔴 Worried about data loss before operation	Strongly recommend backing up important files first! Partition Assistant is stable, but better safe than sorry

✨ That's the complete guide to expanding your C drive. May your computer never see red again!

Context7 Guide: Help Your AI Coding Assistant Read the Latest Docs

Sat, 02 May 2026 19:51:00 +0800

Overview

Ever had this experience: you ask AI to write some code, it churns out a bunch, then you run it and get errors. Or you call an API that’s clearly documented, but the AI says it “doesn’t exist.”

It’s not that the AI is dumb — it’s that its training data has an expiration date. The data might be months or even years old, and frameworks have been updated several times since.

Context7 solves exactly this. Built by the Upstash team, it fetches the latest official docs when you ask a question, injects them into the AI’s context, and lets the AI answer based on the current version.

Usage is simple: just add use context7 at the end of your prompt. It’s like telling the AI: “Don’t guess — check the latest docs first before answering.”

Why Do You Need It?

💥 One Example Is Enough

Say you want to add a “Back to Top” button to your personal website — when you scroll down, a button appears in the bottom-right corner; click it and you go back to the top.

What AI writes with outdated knowledge: First load a几十 KB third-party library, then write a bunch of code to use it. The feature works, but for a single button, the page gets slower and the code is bloated.

The truth is, it’s much simpler now: Modern browsers already have smooth scrolling and scroll listening built in — a few lines of code, no extra libraries needed.

AI doesn’t know this because it learned from教材 that’s years old.

With use context7, Context7 checks the latest docs and finds that native features are sufficient. So the AI chooses a lighter approach instead of giving you the old clunky solution.

It’s like asking a friend to fix your phone — they try to拆 it from memory, following steps from 3 years ago. The screw positions have changed. If they’d checked the latest tutorial first, they wouldn’t have broken it.

With vs Without Context7

	Without	With
Information source	Stale knowledge in AI’s brain, potentially outdated	Real-time docs fetched from official sources
API accuracy	Often wrong or uses deprecated APIs	Guaranteed to use current version APIs
Code quality	May use outdated patterns from years ago	Follows latest recommended practices
Version handling	Guesses regardless of version	Checks the version you specify

🔄 How It Works

Just a few steps:

You ask a question (add use context7 at the end)
    ↓
Context7 identifies which package you're asking about
    ↓
Fetches the latest content from GitHub and official docs
    ↓
Filters the most relevant snippets, injects them into the AI's "context"
    ↓
AI answers with the latest docs

“Context” is everything the AI can “see” in your current conversation. Injecting docs is like opening a reference book on the table — the AI reads and answers at the same time.

Where does the doc come from? GitHub repos, official doc sites, and llms.txt files (a special doc index format for AI).

After fetching results, Context7 uses an LLM to intelligently rank them and picks the most relevant snippets for you.

Two ways to use it:

Method	Description
MCP Mode (recommended)	Install once, AI coding assistant calls it automatically. MCP is like a plugin for AI — set it and forget it
CLI Manual Mode	Query docs manually in the terminal, for those who like tinkering

Core Capabilities

Smart Matching: You Say the Name, It Finds the Place

When you ask AI how to use a tool, Context7 needs to find the latest manual online. But multiple things can share the same name — it needs to know which one you mean.

Common names it can identify on its own. For ambiguous or common names, use the owner/repo format to be precise:

`1`	`Use /tailwindlabs/tailwindcss to add a navbar to my page. use context7`

Here tailwindlabs is the author name, tailwindcss is the project name. Like searching for “Apple” — it could be fruit or a phone. Be specific and you won’t go wrong.

Supported Libraries

All popular ones are included: React, Next.js, Vue, Tailwind CSS, Express, Prisma, Supabase, TypeScript… Full list at context7.com/rankings.

Version Awareness

Different versions can have vastly different APIs. Just specify the version and Context7 will fetch docs for that version:

1
2
3

Write a counter with Vue 3. use context7
Write an API route using Next.js 14's Pages Router. use context7
Configure dark mode with Tailwind CSS v4. use context7

If you ask for an iPhone 12 teardown guide, nobody will hand you the iPhone 15 version.

Installation

One-Click Install

`1`	`npx ctx7 setup`

npx comes with Node.js, no extra installation needed. If you haven’t installed Node.js yet, go to nodejs.org to download it — once installed, you’ll have npx.

Running it will:

Open a browser for you to log in and authorize (OAuth)
Generate an API Key (your “identity credential”)
Auto-configure your editor

Three steps and you’re done.

To specify an editor, add a parameter:

1
2
3

npx ctx7 setup --claude      # Claude Code
npx ctx7 setup --cursor      # Cursor
npx ctx7 setup --opencode    # OpenCode

Uninstall: npx ctx7 remove

Manual Configuration

If auto-install doesn’t work, manually add the MCP Server:

{
  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "your API key"
      }
    }
  }
}

Configuration file locations for different tools (~ represents your user directory, e.g., C:\Users\yourusername on Windows):

Tool	Config Location
Cursor	Settings → MCP, or `~/.cursor/mcp.json`
Claude Code	`~/.claude/settings.json` (global) or `.claude/settings.json` (project)
Windsurf	Settings → Cascade → MCP servers
Cline	VS Code extension → MCP Servers → Configure
OpenCode	Project root `opencode.json`

Get your API Key at context7.com/dashboard. Format is ctx7sk..., free users get quota too.

✅ Verification

Send a test:

`1`	`Write a counter webpage with a button. use context7`

If the AI gives clean, modern code without loading extra libraries, it’s working.

Usage

Basic Usage

Add use context7 at the end of your prompt:

1
2

Write a clean personal resume page. use context7
Write a countdown tool that counts down from a given number of seconds. use context7

Specify a Library Precisely

Use the /owner/repo format to skip name matching:

`1`	`Use /tailwindlabs/tailwindcss to add a navbar to my page. use context7`

Recommended when the library name is ambiguous.

Specify a Version

1
2

Write a card layout using Bootstrap 4 instead of 5. use context7
Write a todo list using Vue 3's Composition API. use context7

Combine Multiple Libraries

`1`	`Build an icon showcase page with Bootstrap + Font Awesome. use context7`

Configure Auto-Trigger

If you don’t want to type use context7 every time, configure it in your rules file:

→ Cursor in .cursorrules:

`1`	`When user questions involve third-party framework/library API usage, automatically use Context7 to query the latest docs.`

→ Claude Code in CLAUDE.md:

1
2
3

## Documentation Query Rules
- For third-party libraries/frameworks, first use Context7 to query latest docs
- Prioritize generating code based on Context7 results

CLI Commands

If you only use Context7 in AI conversations, you can skip this. CLI is for those who like terminal commands.

npm is Node.js’s built-in package manager, -g means “global install” — install once, use everywhere.

# Install CLI
npm install -g ctx7

# Search libraries
ctx7 library react
ctx7 library nextjs "middleware"

# Get docs
ctx7 docs /facebook/react "hooks state management"
ctx7 docs /vercel/next.js "middleware authentication"

# Skills management
ctx7 skills search        # Search available Skills
ctx7 skills install       # Install Skill
ctx7 skills list          # View installed
ctx7 skills remove        # Uninstall

# Authentication
ctx7 login                # Login
ctx7 whoami               # View status
ctx7 logout               # Logout

❓ FAQ

How is this different from AI’s built-in web search?

Web search returns blog posts and forum threads of varying quality — you still have to judge credibility yourself. Context7 only pulls from official docs, uses an LLM to filter the most relevant snippets, and feeds them directly to the AI.

💰 Will `use context7` cost more?

No. Although there’s an extra doc lookup step, the AI gets accurate information so it doesn’t have to guess, rewrite, or produce long, buggy code. Overall token consumption is actually lower.

What if my library isn’t listed?

Go to context7.com and click “Add Docs” to submit it, or skip use context7 and let the AI fall back to its own knowledge.

I installed it but it doesn’t work?

Check these one by one:

Did npx ctx7 setup report any errors
Is the MCP config JSON format correct (even one extra comma will break it)
Is the API Key valid (starts with ctx7sk...)
Did you completely close and reopen your editor
Is the MCP status light green
Did you include use context7 in your prompt

Does it affect response speed?

It adds one or two seconds of wait time, but you get accurate answers without back-and-forth corrections. One debug-compile-fix cycle takes way longer than that.

Summary

Item	Content
What it is	A platform providing real-time, up-to-date documentation for AI coding assistants
Problem it solves	AI giving incorrect code due to outdated training data
Core principle	Fetch official docs in real-time, inject into AI context
Installation	`npx ctx7 setup` — one command and done
Usage	Add `use context7` at the end of your prompt
Pricing	Free tier available, sufficient for personal use
Website	context7.com
GitHub	github.com/upstash/context7

Once installed, you’ll never have to worry about AI giving you outdated knowledge again.

OpenCode + Obsidian: Build Your AI-Powered Knowledge Management Workflow

Thu, 30 Apr 2026 02:00:15 +0800

📋 Table of Contents

1. What is the opencode-obsidian Plugin?

opencode-obsidian is a third-party community plugin that embeds the OpenCode AI assistant directly into the Obsidian window. Unlike traditional terminal integration solutions, this plugin uses OpenCode’s Web view for direct embedding — what you see is the complete OpenCode interface, with no need to switch back and forth between terminal and Obsidian.

Core Features:

🖥️ OpenCode interface directly embedded in Obsidian sidebar or main editor
🔄 Automatic server management — starts when panel opens, stops when closed
📄 Experimental context injection — automatically passes current notes and selected text to AI
⌨️ Shortcut Ctrl/Cmd + Shift + O for quick panel toggle

Use Cases:

Summarizing and distilling long-form content
Drafting, editing, and polishing writing
Querying and exploring your knowledge base

Generating outlines and structured notes

⚠️ The plugin author is not affiliated with OpenCode or Obsidian — this is an independent third-party project. Current version is 0.2.1 (Beta stage), desktop only.

2. Environment Preparation

Before starting, ensure you have the following ready:

Item	Requirement	Notes
Obsidian	≥ 1.4.0	Download
Node.js	≥ 18+	Download, for OpenCode installation

Once ready, follow the steps below.

3. Installing the BRAT Plugin

BRAT (Beta Reviewer’s Auto-update Tool) is an Obsidian community plugin specifically for installing Beta plugins not yet listed in the community plugin marketplace. opencode-obsidian isn’t officially listed yet, so installation via BRAT is required.

Step 1: Open Community Plugin Marketplace

In Obsidian, click: Settings → Third-party plugins → Turn off “Safe mode” → Community plugin marketplace

Step 2: Search and Install BRAT

Search for BRAT (full name: Obsidian42 - BRAT) in the community marketplace, click “Install” → “Enable”.

💡 BRAT stands for Beta Reviewer’s Auto-update Tool, developed by TfTHacker. It automatically checks for Beta plugin updates and notifies you to upgrade.

4. Installing opencode-obsidian via BRAT

Once BRAT is installed, use it to install the opencode-obsidian plugin.

Step 1: Open BRAT Settings

Settings → Third-party plugins → Find installed BRAT, click the gear icon on the right to enter settings.

Step 2: Add Beta Plugin

In the BRAT settings page, click the “Add Beta plugin” button.

Step 3: Enter Repository Address

In the popup input box, enter:

`1`	`mtymek/opencode-obsidian`

Click “Add Plugin”.

BRAT will automatically pull the latest release version from GitHub and install it.

Step 4: Enable the Plugin

After installation, go to Settings → Third-party plugins → Find OpenCode-Obsidian in the “Installed plugins” list and toggle it on.

✅ Once enabled, a terminal-style icon appears in Obsidian’s left sidebar — this is the OpenCode entry point.

Auto-Update

BRAT periodically checks GitHub for new versions. When an update is available, it shows a notification in Obsidian — just click to confirm and auto-upgrade.

5. Installing OpenCode CLI

The plugin itself is just a “shell” — it starts opencode serve in the background and embeds OpenCode’s web interface into Obsidian. So you only need to install the OpenCode CLI via npm.

Open your system terminal (PowerShell for Windows, Terminal for macOS/Linux):

`1`	`npm i -g opencode-ai`

Verify installation:

1
2

opencode --version
# Expected output like: 1.14.39

⚠️ Windows users: If the plugin shows “Executable not found at ‘opencode’”, jump to Section 10 for the solution.

6. Plugin Settings Explained

After enabling the plugin, go to Settings → Third-party plugins → OpenCode-Obsidian gear icon to see these configuration options:

Basic Settings

Setting	Default	Description
OpenCode executable path	`opencode`	Enter full path if not found in system PATH
Port	`14096`	Port number the OpenCode service listens on
Hostname	`127.0.0.1`	Address the service binds to
Project directory	(Auto from Vault path)	Working directory for OpenCode
Startup timeout	`45000` (45s)	Max milliseconds to wait for service startup

Interface Settings

Setting	Default	Description
Default view position	`sidebar`	`sidebar` = sidebar, `main` = main editor area
Auto-start	`Off`	Auto-start OpenCode service when Obsidian opens

Context Injection (Experimental)

Setting	Default	Description
Inject workspace context	`Off`	Auto-pass current note info to OpenCode
Max notes	`20`	Maximum notes included in context
Max selection length	`2000`	Character limit for text passed to AI

Custom Commands

Setting	Default	Description
Use custom command	`Off`	Enable to customize OpenCode launch command
Custom command	(empty)	Custom launch command (see Section 9)

7. First Use

Opening the OpenCode Panel

Three ways to open OpenCode:

Click sidebar icon: Click the terminal icon in the left sidebar
Shortcut: Ctrl + Shift + O (macOS: Cmd + Shift + O)
Command palette: Ctrl/Cmd + P → type Toggle OpenCode panel

First Launch Flow

After opening the panel, the plugin automatically:

Detects the OpenCode executable path
Starts the OpenCode service (opencode serve)
Loads the OpenCode interface in an embedded web view

Once started, you’ll see the complete OpenCode dialog interface — type prompts directly.

Verify Everything Works

In the OpenCode interface, type:

/help

If you see the command list, everything is working. You can also type:

/models

to view available AI models. OpenCode has built-in free models (GLM-4.7, MiniMax-2.1) — no configuration needed.

Shortcut Reference

Shortcut	Function
`Ctrl/Cmd + Shift + O`	Toggle OpenCode panel

8. Context Injection (Experimental Feature)

This is one of the opencode-obsidian plugin’s most unique features — it can automatically pass Obsidian’s working context to OpenCode.

How to Enable

In plugin settings, toggle on “Inject workspace context”.

What Gets Injected

When enabled, the plugin automatically passes this information to the running OpenCode instance:

📂 Currently open notes list: Which files you’re editing
📝 Selected text: Text you’ve highlighted in notes

Use Cases

Select some text, open the OpenCode panel, say “polish this paragraph” — AI already knows which text you mean
Open multiple notes, ask AI “compare the differences between these two notes” — AI already knows which files are open

Limitations

⚠️ This is an experimental feature with some current limitations:

Context doesn’t auto-inject when creating a new Session in the OpenCode interface

Context updates have some latency

9. Custom Command Mode

By default, the plugin calls opencode serve to start the service. If you need more control, enable custom command mode.

When Do You Need Custom Commands?

Adding extra CLI arguments
Using custom startup scripts
Running OpenCode through containers or virtual environments
OpenCode installed in non-standard paths

Configuration Steps

In plugin settings, turn on “Use custom command”
Enter the complete command in the “Custom command” input field

Command Template

`1`	`opencode serve --port 14096 --hostname 127.0.0.1 --cors app://obsidian.md`

⚠️ Important Notes

Port and hostname must match the values in settings
Must include --cors app://obsidian.md — otherwise Obsidian cannot embed the OpenCode web interface

10. FAQ and Troubleshooting

❌ OpenCode Executable Not Found

Symptom: Panel shows “Executable not found at ‘opencode’”, but opencode works fine in terminal.

Cause: Electron (Obsidian’s underlying framework) doesn’t fully inherit system PATH environment variables on Windows.

Solution:

Find the full path of opencode.cmd in terminal:

`1`	`where opencode.cmd`

Paste the full path into the plugin setting “OpenCode executable path”, e.g.:

`1`	`C:\Users\YourUsername\AppData\Roaming\npm\opencode.cmd`

❌ Service Startup Timeout

Possible causes: Network issues, slow model loading, port in use.

Solution:

Check if port 14096 is occupied by another program
Try changing the port number (e.g., to 15096)

Increase the startup timeout

❌ Panel Shows Blank

Possible cause: CORS configuration incorrect.

Solution:

If using a custom command, ensure it includes --cors app://obsidian.md.

❌ Panel Cannot Embed

Possible cause: OpenCode version too old.

Solution:

`1`	`npm i -g opencode-ai@latest`

❌ Chinese Filename Garbled (Windows)

Solution: Run in PowerShell:

`1`	`chcp 65001`

Then restart Obsidian.

❌ Plugin Needs Reconfiguration After Update

BRAT preserves your settings data when updating. If settings are lost, just re-enter the settings page to reconfigure.

Summary

The entire installation flow in one diagram:

┌──────────────────────────────────────────┐
│         Install BRAT Plugin              │
│   Settings → Community marketplace       │
│   → Search BRAT → Install               │
└──────────────────┬───────────────────────┘
                   │
                   ▼
┌──────────────────────────────────────────┐
│    Install opencode-obsidian via BRAT    │
│   BRAT Settings → Add Beta plugin        │
│   Enter: mtymek/opencode-obsidian        │
└──────────────────┬───────────────────────┘
                   │
                   ▼
┌──────────────────────────────────────────┐
│         Install OpenCode CLI             │
│   npm i -g opencode-ai                  │
└──────────────────┬───────────────────────┘
                   │
                   ▼
┌──────────────────────────────────────────┐
│       Enable plugin, start using         │
│   Ctrl+Shift+O to open panel             │
│   Use OpenCode directly in Obsidian      │
└──────────────────────────────────────────┘

One-line summary: Install BRAT → Search mtymek/opencode-obsidian → Install OpenCode CLI → Ctrl+Shift+O and you’re set. It’s that simple.

📚 Sources:

opencode-obsidian GitHub Repository

BRAT Plugin GitHub Repository

OpenCode Official Documentation

OpenCode Beginner to Advanced: A Complete Guide to Parallel Scheduling and Usage Tips

Thu, 30 Apr 2026 02:00:15 +0800

📋 Table of Contents

📌 Key Points Summary

Feature	One-Line Description
Session Parallelism	OpenCode’s killer feature — multiple tasks running simultaneously, no interference, double efficiency
Ultra Work Mode	Type `ULW`, the main agent auto-breaks tasks and dispatches sub-agents to work in parallel
@ Designate Agent	Let the frontend expert do frontend, the architect do reviews — everyone does what they’re best at
Timeline Time Machine	Roll back to any historical checkpoint anytime, zero-cost experimentation
Ralph Loop	Let AI work in loops for hours, tackling the hardest tasks

1. Session Parallelism: Let AI Handle Multiple Tasks Simultaneously

This is OpenCode’s greatest differentiating advantage over other AI programming tools. Traditional tools can only work sequentially — one task must finish before the next begins. OpenCode can run multiple Sessions simultaneously without interference.

Basic Operations

/new              # Create a new Session
/sessions         # View all Session statuses (spinning = running)
/session <id>     # Switch to a specific Session
/session prev     # Return to the previous Session

Real-World Scenario

Suppose you’re developing a “Draw and Guess” game with two independent requirements:

Requirement A: Add a timer that starts on first brush stroke, game fails after 20 seconds
Requirement B: Brush color adjustment

Traditional Approach

Finish A first, then B → Requirement B waits 5-10 minutes for nothing.

OpenCode Approach

1. Enter requirement A, AI starts working
2. Enter /new, create a new Session
3. Enter requirement B, AI starts working
4. Enter /sessions to check progress:

   Session 1  ◐  Adding timer logic...
   Session 2  ◐  Adding color picker...

Both requirements developed in parallel, total time compressed from 15 minutes to 8 minutes.

Notes

⚠️ Sessions are completely isolated — modifying the same file may cause conflicts, assign to different modules
⚠️ Background Sessions don’t auto-notify completion, manually check with /sessions
✅ You can /new anytime to open a third, fourth… no limit

2. Ultra Work: One-Click AI Programming Team

If Session parallelism is “manual transmission,” then Ultra Work is “full self-driving.” Enter a magic word and AI automatically splits tasks, assigns them to the most suitable agents, and executes in parallel.

Trigger Method

Include any of these keywords in your prompt:

1
2
3

ULW
ultrawork
Ultra Work

How It Works

Your requirement: Help me build a pet store website
        │
        ▼
  ┌─────────────────────────────┐
  │  Sisyphus (Main Agent)       │
  │  1. Break down → Todo List   │
  │  2. Assign subtasks          │
  └──────┬──────────┬───────────┘
         │          │
    ┌────▼───┐ ┌───▼────┐ ┌────────▼────┐
    │ Prophet │ │ Frontend│ │ Doc Writer  │
    │ Arch.   │ │ UI Dev  │ │ Docs Gen    │
    └────────┘ └────────┘ └─────────────┘
         │          │            │
         └──────────┴────────────┘
                    │
                    ▼
              Complete Project Delivery

Auto-split into Todo List
Launch 3 background tasks running in parallel
Main agent orchestrates from center
Final delivery of complete project

When to Use?

Scenario	Suitable	Notes
Create complete project from scratch	✅ Excellent	Auto-splits frontend, backend, docs
Multi-module parallel development	✅ Excellent	Clear agent division of labor
Single-file small changes	❌ Not recommended	Overkill, actually slower
Simple bug fix	❌ Not recommended	Regular chat is faster

💡 The higher the complexity, the greater Ultra Work’s value. Simple tasks get slower due to scheduling overhead.

Actual Results

Used Ultra Work mode to create a pet store website:

✅ Used emojis as decorations with no image assets
✅ Clean interface, smooth interactions, complete animations

3. @ Designate Agent: Let Experts Do What They Do Best

After installing Oh My OpenAgent (OMO), you have an AI programming team. Use @ to call specific agents.

Agent Capability Table

Agent	Specialty	Best Model	Example Usage
🧠 Sisyphus	Planning, task orchestration	Claude Opus	Complex multi-step tasks
🔮 Prophet	Architecture design, code review	GPT 5.5	Project structure design
🎨 Frontend Engineer	UI development, page layout	Gemini 3 Pro	Responsive layout optimization
🔍 Explorer	Web search, research	MiniMax	Find latest API docs
📚 Librarian	Literature review, doc retrieval	—	Analyze open-source codebases
📝 Document Writer	README, comments generation	—	Generate project docs
🖼️ Multimodal	Image/PDF understanding	—	Write code from design mockups

Usage Examples

@Frontend Engineer Convert this login page to responsive layout, mobile should look good too

@Prophet Review the code under src/service/, find potential performance issues

@Explorer Look up the latest usage of React 19 Server Components

@Document Writer Generate API documentation for the entire project

Switch Main Agent

Press Tab to switch the main agent for the current conversation — great for extended use of a specific role.

4. Timeline Time Machine: Experiment Freely, Rollback Anytime

What’s the scariest thing in programming? Changing a ton of code, realizing the approach was wrong, and having no way back. Timeline is your undo button.

Basic Usage

`1`	`/timeline # List every conversation step in the current Session`

Select any node:

Revert: Roll back both code and chat content to that point, like nothing happened
View: See what modifications the AI made at that time

Real-World Scenario

1
2
3

1. You had AI refactor a module → Results are unsatisfactory
2. /timeline → Select pre-refactor node → Revert
3. Code returns to pre-refactor state, try a different approach

Tips

🕐 After completing a milestone, mentally note that checkpoint (which conversation step)
🕐 Boldly try radical approaches — one-click rollback anytime
🕐 Compare two approaches: Revert to Approach A → Check results → Revert to Approach B → Compare

This is the programming version of “save/load” — explore any possibility fearlessly.

5. Ralph Loop: Let AI Push Through to the End

This mode makes AI work in continuous loops until the task is truly complete. Perfect for tough tasks requiring iterative refinement.

Launch Method

`1`	`/ralph-loop`

Use Cases

"Refactor the entire project using the latest Spring Boot 4 standards until all test cases pass"

"Check every file under src/ for code standard violations and fix each one"

"Add complete unit tests to the project until coverage reaches 90%"

Difference from Ultra Work

Dimension	Ultra Work	Ralph Loop
Mechanism	Parallel split, multi-agent collaboration	Serial loop, continuous iteration
Best for	Building from scratch, multi-module projects	Refactoring, fixing, target-reaching tasks
Duration	Minutes to tens of minutes	Potentially hours
End point	Task breakdown complete	Termination condition met

⚠️ Ralph Loop may run for a long time — watch your API quota consumption.

6. Daily Speed Tips

1. Use `/compact` to Save Context

When you’ve chatted many rounds with AI and the context window is nearly full:

`1`	`/compact`

AI refines previous conversations into a summary, freeing space to continue working. No need to start a new chat and lose context.

2. Use `/init` to Get AI Up to Speed on New Projects

When entering a new project, have AI read through the code first:

/init

AI scans the entire project and generates agents.md as a system prompt. All subsequent conversations will be based on this understanding — massive efficiency boost.

1
2
3

/share      # Generate a share link showing complete conversation and code changes
/unshare    # Stop sharing, link becomes invalid
/export     # Export conversation history as a file

Great for:

Showing colleagues how you solved a problem with AI
Documenting pitfalls for team reference 素材 for blog posts

4. View Available Models

`1`	`/models # Models marked "free" are free to use`

GLM-4.7 and MiniMax-2.1 have decent programming capabilities, suitable for lightweight tasks.

5. Quick Code Paste (VS Code Plugin)

In VS Code, select a code snippet → Ctrl + Alt + K → Directly paste into OpenCode dialog.

Eliminates copy-paste switching costs, maintaining your flow state.

7. Recommended Workflow for Beginners

┌─────────────────────────────────────────────┐
│                 New Requirement              │
└──────────────────┬──────────────────────────┘
                   │
                   ▼
          ┌────────────────┐
          │ Simple?         │
          └───┬────────┬───┘
              │ Yes     │ No (Complex/Multi-module)
              ▼         ▼
    ┌─────────────┐  ┌─────────────────┐
    │ Regular chat │  │ Enter ULW to    │
    │ handles it   │  │ trigger Ultra   │
    └─────────────┘  │ Work mode       │
                     └────────┬────────┘
                              │
                   ┌──────────▼──────────┐
                   │ Multiple independent │
                   │ subtasks?            │
                   └───┬──────────┬──────┘
                       │ Yes       │ No
                       ▼           ▼
              ┌─────────────┐ ┌──────────────┐
              │ /new open    │ │ Wait for Ultra│
              │ multiple     │ │ Work to auto  │
              │ Sessions     │ │ complete      │
              └──────┬──────┘ └──────────────┘
                     │
                     ▼
              ┌─────────────┐
              │ /sessions    │
              │ Check all    │
              │ progress     │
              └──────┬──────┘
                     │
                     ▼
              ┌─────────────┐
              │ Wrong        │
              │ direction?   │
              └───┬─────────┘
                  │
                  ▼
              ┌─────────────┐
              │ /timeline →  │
              │ Revert       │
              └─────────────┘

One-Line Summary

Small tasks chat directly, big tasks call ULW, parallel with Sessions, mistakes get Timeline rollback, stubborn problems activate Ralph Loop.

8. A Real-World Case Study

After installing Oh My OpenAgent, I wanted to adjust agent model configuration — making GitHub Copilot the primary and free OpenCode Zen the fallback.

First Attempt

Said directly in an OpenCode conversation:

“I also have your free OpenCode Zen, but I’ve already logged into GitHub Copilot — help me modify it”

AI set OpenCode Zen as primary — because the primary/secondary relationship wasn’t clear. ❌

Correction

“No, GitHub Copilot should be primary, and OpenCode Zen’s built-in free model as fallback”

AI immediately corrected it, updating oh-my-openagent.json so all Agents use github-copilot/* as primary and opencode/* as fallback. ✅

💡 Lesson: When describing requirements to AI, always make the primary/secondary relationship clear — “XX as primary, YY as fallback” — don’t just say “add YY for me.”

📚 Reference: OpenCode In-Depth Guide, Oh My OpenAgent 📅 Note generated: 2026-05-07

OpenCode In-Depth Guide: Installation, Configuration, and Advanced Techniques for the Open-Source Claude Code

Thu, 30 Apr 2026 02:00:15 +0800

📋 Table of Contents

1. What is OpenCode?

OpenCode is currently the hottest AI programming tool, essentially an open-source version of Claude Code. It has replicated almost all core features of Claude Code while solving common pain points for Chinese users such as rate limiting and account bans.

Comparison with Claude Code

Dimension	Claude Code	OpenCode
Open Source	❌ Closed source	✅ Open source
Free models	❌ Paid API required	✅ Built-in free models
China-friendly	⚠️ Rate limit/ban risk	✅ No restrictions
Skills/MCP	✅ Supported	✅ Fully compatible
Session parallelism	❌	✅ Core highlight

Core Positioning

Open-source Claude Code: Nearly all features, China-friendly, no rate limits or bans
Free models: Out-of-the-box GLM-4.7, MiniMax-2.1 and other free models, zero configuration needed
Top-tier model integration: Free access to Gemini 3 Pro and Claude 4.5 Opus via Antigravity plugin; GPT Codex via /connect
Killer features: Session parallelism, Timeline rollback, Share, Ultra Work multi-agent collaboration
Plugin ecosystem: Oh My Open Code (OMO) with seven programming agents + three MCP Servers + various tools

2. Four Installation Forms

⭐ 1. Command Line Version (Primary Recommendation)

The most stable and feature-complete way to use it.

# Install (Node.js required first)
npm i -g opencode-ai

# Launch
opencode

Prerequisite: Node.js must be installed (download from nodejs.org)

2. Desktop Client (Beta)

Download the client from the official website, install it, and select your project folder.

⚠️ Currently in Beta testing phase with more bugs — not recommended as your primary tool yet.

3. VS Code Plugin Version

Prerequisite: OpenCode CLI must be installed. The plugin’s core value lies in seamless IDE integration, letting AI directly perceive your code context.

Search for OpenCode in the VS Code Extensions marketplace and install it
Shortcut Ctrl + Shift + P → type open opencode and press Enter
The plugin automatically associates with code files open in the left panel
Select code and press Ctrl + Alt + K to quickly paste into the OpenCode chat window

4. Cloud Runtime Environment (GitHub Actions)

Perfect for automated Issue fixing in open-source projects:

Upload your project to a public GitHub repository
Configure API Key in the repository (Settings → Secrets and Variables → Actions)
Type /opencode + requirement description in an Issue comment
GitHub Actions automatically runs the OpenCode workflow
Automatically creates a Pull Request upon completion

3. Free Model Configuration

View Available Models

`1`	`/models # View all available models (ones marked "free" can be used at no cost)`

Recommended Free Models

Model	Features
GLM-4.7	Strong programming ability, zero configuration
MiniMax-2.1	Excellent programming skills, fast response

💡 These two free models are more than enough for beginners practicing AI programming.

Connect Top-tier Models

Method 1: Antigravity Plugin (Free Gemini + Claude Access)

Antigravity is Google’s AI programming IDE, generously providing Gemini 3 Pro and Claude 4.5 Opus for free.

Paste the installation prompt in OpenCode (copy from the Antigravity GitHub homepage)
Wait for AI to complete the installation automatically
Open a new terminal and run the login command, select Google → Antigravity login
Log in to your Google account, paste the generated URL
Restart OpenCode — Gemini 3 Pro and Claude 4.5 Opus will appear in /models

Method 2: GPT Codex (Official OpenAI Partnership)

OpenAI has officially partnered with OpenCode, enabling direct ChatGPT Codex integration.

`1`	`/connect # Select OpenAI → GPT Pro → Browser login`

Prerequisite: ChatGPT Plus subscription or higher required.

Method 3: OpenRouter (Universal Connector)

OpenRouter provides access to virtually every major model available, and Chinese users can easily obtain credits.

`1`	`/connect # Select OpenRouter → Enter API Key`

OpenCode supports 75 AI integration methods, covering almost all model providers.

4. Core Feature Highlights

1. Clarifying Questions Before Coding

Before starting to code, OpenCode will ask you a series of questions:

Do you just need a code sample, or a complete runnable program?
Which features are must-haves?
Which model should be used?
How should environment variables be stored?

This “ask first, act later” mechanism significantly reduces rework.

2. Command Line Code Diff Interface

OpenCode’s command line diff display is considered the best among all command line programming tools, making code changes clear at a glance.

⭐ 3. Session Parallel Processing

This is OpenCode’s most distinctive feature — multiple Sessions running in parallel:

# Start the first task (e.g., add a timer)
# While the task is running, create a new session
/new

# Start the second task (e.g., brush color)
# View all session statuses
/sessions

# Switch between sessions
/session <id>

The spinning symbol indicates a Session is running in the background. Two tasks can be developed in parallel without interfering with each other.

4. Timeline Checkpoint Rollback

`1`	`/timeline # View the complete conversation history of the current Session`

Select any historical node:

Revert: Roll back both code and chat content to that point in time
View: See what modifications the AI made at that time

Like a “time machine” for programming, allowing you to boldly try different approaches.

1
2
3

/share      # Share conversation history as a web page
/unshare    # Stop sharing
/export     # Export conversation history as a file

After sharing, a web link is generated displaying the complete conversation history and code modification process, convenient for collaboration or demonstration.

5. Skills Migration

OpenCode is fully compatible with Claude Code’s Skills directory structure, making migration extremely easy:

1
2

# Directory structure mapping
.claude/skills/<skill-name>/    →    .opencode/skills/<skill-name>/

Steps

Create a new .opencode folder in the project root directory
Create a skills folder inside .opencode
Copy the skill folders from .claude/skills/ directly into it
Restart OpenCode — the AI will recognize and call these Skills

Each Skill is essentially an instruction manual with its own directory, telling the AI how to complete tasks in a specific domain.

6. MCP Configuration

OpenCode supports two MCP (Model Context Protocol) modes:

Local MCP

Executed via local commands. Configure in ~/.config/opencode/opencode.json:

{
  "mcpServers": {
    "shed-cn": {
      "type": "local",
      "command": "npx",
      "args": ["shed-cn"],
      "enabled": true
    }
  }
}

Remote MCP

Called remotely via URL. Using Context7 as an example:

{
  "mcpServers": {
    "context7": {
      "type": "remote",
      "url": "https://context7-mcp-server-url",
      "headers": {
        "Authorization": "Bearer <your-api-key>"
      },
      "enabled": true
    }
  }
}

After configuration, restart OpenCode and enter /mcp to view configured MCP Servers.

7. Oh My Open Code (OMO) Super Plugin ⭐

OMO is the most popular programming plugin for OpenCode, essentially a bundled package of Tools + MCP + Programming Agents.

Seven Programming Agents

Agent	Role	Recommended Model
🧠 Sisyphus	Main agent, planning & orchestration	Claude 4.5 Opus / GPT 5.2
🔮 Prophet	Architecture design, code review	—
📚 Librarian	Literature review, document retrieval	—
🔍 Explorer	Web search	—
🎨 Frontend Engineer	Frontend development	Gemini 3 Pro
📝 Document Writer	Document generation	—
🖼️ Multimodal	Image/PDF understanding	—

Each agent is assigned the most suitable model for its work. The author reportedly spent $24,000 worth of Tokens to find the optimal combination.

Three MCP Servers

Web Search: Web search
Context7: Access latest technical documentation
Grep App: Fast code search across GitHub repositories

Integrated Tools

LSP Advanced: Helps AI quickly locate code through language syntax and semantics
AST Tool: Related search through code syntax trees
LOC Tool: Understand images and PDFs via multimodal vision
Delegate Task / Background Task: Agent task assignment and background scheduling

Installation and Usage

Configuration file location: C:\Users\<username>\.config\opencode\oh-my-opencode.json

Copy the install prompt from the OMO GitHub homepage
Paste it into OpenCode and answer configuration questions (subscription status, etc.)
Installation completes automatically

Two Core Usage Patterns

① @ Designate Specific Agent

`1`	`@Frontend Engineer Help me optimize the responsive layout of this page`

② Ultra Work Mode (Magic Word ULW)

`1`	`ULW Help me create a pet store application`

In Ultra Work mode, Sisyphus as the main agent will:

Break down tasks into a Todo List
Launch multiple background tasks running in parallel
Orchestrate all agents from the center
Deliver the complete project

Ralph Loop Mode

Forces AI to work in continuous loops, suitable for extremely difficult tasks:

`1`	`/ralph-loop`

Example: “Refactor the entire project using the latest Spring Boot 4 standards until all test cases pass” — can run for hours until the task is complete.

8. Other Useful Features

`/init` — Project Knowledge Initialization

Let AI read through the entire project folder, generating an agents.md file as a system prompt to help AI quickly understand the project.

`/compact` — Context Compression

Refine previous conversations into a concise summary, freeing up the model’s context window to avoid Token overflow.

Custom Commands

Create .md files under ~/.config/opencode/commands/ to define custom commands:

# Run Tests
Mode: build
Command: npm test
Description: Run all test cases for the project

Usage: /Run Tests to trigger.

Custom Agents

Create .md files under ~/.config/opencode/agents/:

# Code Review Agent
Type: subagent
Model: claude-4.5-opus
Description: Specializes in code review, checking code quality, security vulnerabilities, and best practices.

Primary Agent: Switch with Tab key, use directly in conversation
Sub Agent: Automatically dispatched by the main agent in the background

9. Summary and Recommendations

Use Cases

Scenario	Rating	Notes
Beginner AI programming	⭐⭐⭐⭐⭐	Free models, zero-cost start
Daily development assistance	⭐⭐⭐⭐⭐	Session parallelism + Timeline rollback
Complex project development	⭐⭐⭐⭐⭐	OMO plugin multi-agent collaboration
Open-source project maintenance	⭐⭐⭐⭐	GitHub Actions cloud automation
Skills/MCP practice	⭐⭐⭐⭐⭐	Fully compatible with Claude Code ecosystem

Recommended Configuration Path

Beginner → CLI installation + built-in free models
  ↓
Advanced → Configure Antigravity for Gemini/Claude access
  ↓
Efficient → Configure Skills + MCP
  ↓
Ultimate → Install OMO plugin, enable Ultra Work mode

OpenCode breaks down the high barriers of AI programming tools, allowing everyone to explore the infinite possibilities of AI-assisted programming at zero cost. Especially for Chinese users, there’s no longer any need to worry about rate limits and bans — you can “build freely, experiment freely.”

10. Hands-on Record: Installing Oh My OpenAgent

Below is the complete conversation record from personally installing Oh My OpenAgent (formerly Oh My Open Code), in a Windows + PowerShell environment.

Environment Check

1
2

opencode --version
# Output: 1.14.39

Installation Process

Tell AI directly in an OpenCode conversation:

“Install and configure oh-my-openagent by following the instructions here: https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/refs/heads/dev/docs/guide/installation.md"

AI will first ask about your model subscriptions:

Subscription	My Status
Claude Pro/Max	❌ None
OpenAI / ChatGPT Plus	❌ None
Gemini	❌ None
GitHub Copilot	✅ Student certified
OpenCode Zen	✅ Free available
Z.ai Coding Plan	❌ None
OpenCode Go	❌ None
Kimi for Coding	❌ None
Vercel AI Gateway	❌ None

⚠️ AI will prompt “Without a Claude subscription, the Sisyphus agent might not work ideally” — but GitHub Copilot will automatically take over as a fallback model.

After confirming subscriptions, AI automatically executes the installation command:

bunx oh-my-openagent install --no-tui \
  --claude=no --openai=no --gemini=no \
  --copilot=yes --opencode-zen=yes \
  --zai-coding-plan=no --opencode-go=no \
  --kimi-for-coding=no --vercel-ai-gateway=no

Successful installation output:

[1/4] Checking OpenCode installation...
[OK] OpenCode 1.14.39 detected
[2/4] Adding oh-my-openagent plugin...
[OK] Plugin added -> C:\Users\<username>\.config\opencode\opencode.json

Post-Installation Configuration Files

Main configuration file ~/.config/opencode/opencode.json:

{
  "plugin": [
    "oh-my-openagent@latest"
  ]
}

Agent model configuration ~/.config/opencode/oh-my-openagent.json:

AI automatically assigned models based on GitHub Copilot subscription:

Agent	Assigned Model
Sisyphus (Main agent)	`github-copilot/claude-opus-4.7`
Oracle (Prophet)	`github-copilot/gpt-5.5` (medium)
Other Agents	Auto-selected from Copilot available models

Authentication Configuration

After installation, you need to manually authenticate GitHub Copilot:

`1`	`opencode auth login`

Interactive steps:

Use arrow keys to select GitHub Copilot
Press Enter to confirm
Browser opens automatically, log in to your GitHub student account
Authorization complete, terminal shows successful authentication

How to Reconfigure Agent Models?

Method 1: Tell AI Directly

“Change Sisyphus’s model to claude-sonnet-4.6” “Oracle use gpt-5.5”

Method 2: Manually Edit Configuration File

Directly modify the model field for the corresponding agent in ~/.config/opencode/oh-my-openagent.json.

Additional Configuration: Add OpenCode Zen as Fallback

The free OpenCode Zen was missed during installation (--opencode-zen=no). In a new OpenCode conversation, ask AI to fix it:

“I also have your free OpenCode Zen, but I’ve already logged into GitHub Copilot — help me modify it”

AI’s first attempt set OpenCode Zen as primary (opencode/claude-opus-4-7), making GitHub Copilot the fallback. The actual need was the opposite:

“No, GitHub Copilot should be primary, and OpenCode Zen’s built-in free model as fallback”

After AI corrected it, the final configuration strategy:

1
2

Primary model: github-copilot/*     (paid, use first)
Fallback model: opencode/*          (free credits, auto-switch when Copilot unavailable)

Key configuration snippet (using Sisyphus as example):

{
  "sisyphus": {
    "model": "github-copilot/claude-opus-4-7",
    "fallback_models": [
      { "model": "opencode/claude-opus-4-7" },
      { "model": "opencode/gpt-5.5" }
    ]
  }
}

💡 Tip: When describing configuration needs, make the primary/secondary relationship clear — “XX as primary, YY as fallback” — to avoid AI getting it reversed.

Usage Tips

After installation, type opencode in the terminal to get started:

Include ultrawork or ulw in your prompt to trigger automatic parallel processing
Press Tab to enter Prometheus (planner) mode
Run /start-work to execute full orchestration

Appendix: Troubleshooting Notes

Issue	Solution
`doctor` command timeout (30s)	Some checks may hang; add `--verbose` to troubleshoot, or skip — it doesn’t affect usage
PowerShell `if` syntax errors	OpenCode’s bash commands need syntax conversion under PowerShell
Sisyphus performance drops with non-Claude models	This is a known limitation; experience is best with a Claude subscription
AI swaps primary/fallback models	State the primary/secondary relationship clearly: “XX as primary, YY as fallback” — don’t just say “add YY for me”

📚 Sources: Tech Shrimp - OpenCode Detailed Guide, Oh My OpenAgent Installation Guide

Install Claude Code and Connect DeepSeek (Beginner-Friendly Guide)

Sun, 26 Apr 2026 02:00:15 +0800

Overview

Who Is This Tutorial For?

This tutorial is for users with no computer background at all. You don’t need to know what a “command line” is, what “environment variables” are, or what “version management” is — I will break down every step to the finest detail, telling you where to click, what to click, what to type, and what you should see to know it worked.

What Are We Installing? Why Do We Need These?

Before we start, let’s understand the 3 things we need to install and what each one does:

#	Software	One-Line Explanation	Why It’s Required
1	Node.js	The “engine” that lets your computer run JavaScript programs	Claude Code is written in JavaScript and won’t run without it
2	Claude Code	An AI programming assistant that lives in your computer’s terminal	This is what we ultimately want to use
3	CC-Switch	A small tool to “swap the brain” of Claude Code	Switches Claude Code from the expensive official model to the affordable DeepSeek

The whole process takes about 10-15 minutes. Please follow the steps in order — don’t skip around.

📌 Prerequisites

You need a Windows computer (Windows 10/11) with a working internet connection.

Install Node.js

What is Node.js?

Node.js = the runtime environment that lets your computer run Claude Code. It’s completely free. Just like you need Windows installed before you can run software, you need Node.js installed before you can run Claude Code.

Download Node.js

Step 1: Open Your Browser

Open any browser on your computer (Chrome, Edge, or Firefox).

Step 2: Visit the Node.js Official Website

Type the following URL into the browser’s address bar (the long bar at the top where you enter web addresses) and press Enter:

`1`	`https://nodejs.org/`

Step 3: Find the Download Button

Once the page loads, you’ll see two large buttons in the center:

The left button says LTS (with a recommended version number, e.g., 22.16.0 LTS)
The right button says Current

Click the left LTS button — your browser will automatically start downloading a .msi file.

Step 4: Find the Downloaded File

Once the download completes (usually just a few seconds), there are two ways to find the file:

Method 1: Click the download list in the top-right corner of your browser (usually a downward arrow ↓ icon) and find the file you just downloaded — the filename will be something like node-v22.16.0-x64.msi
Method 2: Open File Explorer (the window you use to browse folders), find the Downloads folder in the left sidebar, and the file will be inside

Install Node.js

Step 1: Double-click the Installer

In the Downloads folder, find node-v22.16.0-x64.msi (the version number may differ slightly) and double-click it.

Step 2: Welcome Screen

A window titled Node.js Setup will appear. Click the Next button at the bottom.

Step 3: License Agreement

The window displays a long block of English license text.

Check the box in the bottom-left corner: I accept the terms in the License Agreement
Click Next

Step 4: Installation Location (⚠️ Important! You Need to Change the Path)

This shows where Node.js will be installed on your computer.

The default path is: C:\Program Files\nodejs\

📌 Move It to the D Drive!

It’s recommended to install to the D drive because:

The C drive is your system drive — putting too much on it slows down your computer

The D drive is for software — if you ever need to reinstall Windows, everything on D stays safe

It’s easier to manage and find things

Steps to change:

Click inside the path input box, select everything (press Ctrl + A), then delete it
Type the new path:
1

D:\nodejs\
Click Next

💡 Note

Make sure the path has no Chinese characters or spaces, or the installation may fail.

Step 5: Custom Setup

A page with a tree-like checkbox list appears (Custom Setup).

Don’t change anything — just click Next.

Step 6: Confirm Installation

Click the Install button. If a security prompt appears, click Yes.

Step 7: Wait for Installation

The progress bar will complete — usually takes just 10-30 seconds.

Step 8: Finish

Click Finish.

Node.js Installation Complete!

Both Node.js and npm (Node.js’s package manager — think of it as an “app store”) are now installed.

Verify Node.js Is Installed Correctly

After installation, we need to verify everything — like checking your groceries to make sure nothing’s missing.

Step 1: Open Command Prompt (CMD)

What is “Command Prompt”?

Command Prompt (also called CMD) is a black window with white text where you can type text commands to make your computer do things. You’ll use it often going forward.

How to open it (choose one):

Method 1 (Recommended):
1. Hold down the Win key on your keyboard (bottom-left corner, the key with the Windows logo)
2. While holding it, press the R key
3. A small window titled “Run” will pop up — type cmd in it
4. Click OK or press Enter
Method 2:
1. Click the Start menu in the bottom-left corner of your desktop (Windows icon)
2. Type cmd in the search box
3. Click Command Prompt in the search results

Step 2: Enter Verification Commands

In the black window that opens, type the following (the characters will appear on screen as you type), then press Enter:

node -v

If the window displays something like v22.16.0, Node.js is installed successfully ✅

Now type this command and press Enter:

npm -v

If it displays a version number like 10.9.2, npm is also working ✅

⚠️ Seeing “’node’ is not recognized as an internal or external command”?

Your environment variables aren’t set up correctly. See 1.4 How to Configure Environment Variables below.

How to Configure Environment Variables

What Are Environment Variables (PATH)?

PATH can be thought of as your computer’s “address book.” When you type node in the command prompt, your computer doesn’t know where node is installed — it looks it up in PATH, the “address book.” If Node.js’s installation directory isn’t in PATH, the computer can’t find it and reports “’node’ is not recognized.”

Normally, the Node.js installer adds itself to PATH automatically. But if something goes wrong, you need to add it manually.

Check If Node.js Is Already in PATH

Press Win + R, type sysdm.cpl, press Enter
Click the Advanced tab at the top
Click the Environment Variables button at the bottom
In the System variables list at the bottom, find the Path row, select it, and click Edit

In the list that pops up, check if there’s an entry like:

`1`	`D:\nodejs\`

💡 The Path Must Match Where You Installed

If you installed to D:\Software\nodejs\, then the entry should show D:\Software\nodejs\.

If the entry exists: PATH is fine, but if it’s still not working, close all current Command Prompt windows and open a new one, then try again.

If the entry doesn’t exist: Follow the steps below to add it manually.

Manually Add Node.js to PATH

In the Edit Environment Variable window you just opened, click New
Type the Node.js installation path:
1

D:\nodejs\
Click OK
Click OK to close the Environment Variables window
Click OK to close the System Properties window
Close all open Command Prompt windows and open a new one (old windows won’t pick up the new settings)
Type node -v again to verify

Configure npm Domestic Mirror (Strongly Recommended)

💡 Why Configure This?

By default, npm downloads software from overseas, which is very slow. Configuring a domestic mirror speeds up downloads by more than 10 times.

In Command Prompt, type the following command and press Enter:

`1`	`npm config set registry https://registry.npmmirror.com/`

Verify with this command — if it shows https://registry.npmmirror.com/, it worked ✅:

`1`	`npm config get registry`

Step 1 Complete!

You’ve installed Node.js on your computer and configured the domestic mirror. Now let’s install Claude Code.

Install Claude Code

Install Claude Code via npm

Open Command Prompt (if not already open), type the following command, and press Enter:

`1`	`npm install -g @anthropic-ai/claude-code`

Wait for the installation to finish (usually 1-3 minutes). Text will scroll on the screen — as long as there’s no error at the end, you’re fine.

Verify Installation

Type:

`1`	`claude --version`

Press Enter. If it shows a version number (e.g., 1.0.x), installation was successful ✅

Why Skip Login?

Claude Code officially requires you to log in with an Anthropic account. But Anthropic’s services require an overseas credit card for payment, which is inconvenient for domestic users.

Our approach: skip login first, then use the CC-Switch tool to connect to the domestic DeepSeek model. This way you don’t need an Anthropic account at all, and the cost is much lower.

Step 1: Launch Claude Code Once

Type this in Command Prompt:

claude

Press Enter. Claude Code will launch and may display some introductory information or ask you to log in.

Ignore it — just close the Command Prompt window (click the × in the top-right corner).

Step 2: Find the Configuration File

Press Win + R (Win key and R key at the same time)
In the “Run” window that pops up, type %USERPROFILE%
Click OK or press Enter
You’ll see a folder with various files and subfolders

Step 3: Find the .claude.json File

In this folder, look for a file named .claude.json.

⚠️ Can’t Find This File?

If you can’t find .claude.json, possible reasons:

File extensions are hidden — in the folder window, click View → check File name extensions and Hidden items

Claude Code hasn’t created this file yet — go back to Step 1 and make sure you launched Claude Code at least once

In some cases, the file might be inside the .claude folder, named settings.json

Step 4: Open the Config File with Notepad

Right-click the .claude.json file
In the popup menu, select Open with
Choose Notepad
- If Notepad isn’t in the list, select Choose another app → find Notepad in the list → click OK

Step 5: Edit the Config File

When you open it, you’ll see something like this (the exact content may vary):

{
  "someField": "someValue",
  "anotherField": "anotherValue"
}

We need to add the line "hasCompletedOnboarding": true before the final }.

After editing, it should look like this:

{
  "someField": "someValue",
  "anotherField": "anotherValue",
  "hasCompletedOnboarding": true
}

📌 ⚠️ Three Critical Details — Get These Wrong and It’ll Break!

Add a comma: the line before hasCompletedOnboarding needs an English comma , at the end

Use English quotes: the quotes must be English ", not Chinese "

true is lowercase: it must be true, not True

Step 6: Save the File

Press Ctrl + S to save (or click File → Save in the top-left corner)
Close the Notepad window

Step 7: Verify Skip Login Worked

Reopen Command Prompt (Win + R → cmd → Enter)
Type claude, press Enter
If you go straight into Claude Code’s main interface (with no login prompt), skip-login was successful ✅

Step 2 Complete!

Claude Code is installed and login has been skipped. Now let’s install CC-Switch to connect DeepSeek.

Install CC-Switch (Model Switching Tool)

What Is CC-Switch?

CC-Switch is a visual tool that lets you swap Claude Code’s “brain” from the official model to DeepSeek — no manual config file editing needed, just point and click.

Download CC-Switch

Step 1: Open the Download Page

Type the following URL into your browser’s address bar and press Enter:

`1`	`https://github.com/cc-switch/cc-switch/releases`

Step 2: Find the Latest Version

Once the page loads, find the version with the green Latest label and click to expand it.

Step 3: Find the Download Link

After expanding, scroll down, find the word Assets (there may be a small arrow ▾ next to it), and click to expand it.

Find the file ending with .msi (Windows installer) and click the filename to start the download.

💡 Which File to Choose?

Windows computer: choose the file ending in x64.msi

Mac computer: choose the file ending in .dmg

Install CC-Switch

Step 1: Double-click the Installer

In the Downloads folder, double-click the downloaded .msi file. If a security prompt appears, click Run anyway or More info → Run anyway.

Step 2: Follow the Prompts

The installation wizard is similar to Node.js:

Click Next
Accept the agreement → Next
Keep the default installation path → Next
Click Install
Wait for installation to complete → Finish

Step 3 Complete!

CC-Switch is installed. Now let’s get a DeepSeek API Key.

Get a DeepSeek API Key

What Is DeepSeek?

A domestic large language model with powerful performance and low pricing (about 10-30 RMB per month for daily use). Connecting to it dramatically reduces your usage costs.

What Is an API Key?

An API Key is a key used to access DeepSeek’s AI services. Each use deducts from your account balance. You need to: ① Register an account ② Add funds ③ Create a Key

Register a DeepSeek Account

Step 1: Open the DeepSeek Open Platform

Type this into your browser’s address bar:

`1`	`https://platform.deepseek.com/`

Press Enter.

💡 Note

This is DeepSeek’s developer platform (platform.deepseek.com), not the chat website (chat.deepseek.com). Don’t mix them up.

Step 2: Register / Log In

In the top-right corner of the page, there are Log In / Sign Up buttons
Click Sign Up (if you don’t have an account) or Log In (if you already have one)
Follow the on-screen prompts to complete registration

Add Funds to Your Account

💡 Cost Reference

Daily use costs only about 10-30 RMB per month. A first-time top-up of 20-50 RMB is recommended.

After logging in, find Top Up (or Wallet / Billing) in the left sidebar menu and click it
Select the amount, choose a payment method, and complete the payment
Make sure your account balance is greater than 0 (you can’t use the API without a balance)

Create an API Key

Step 1: Go to the API Keys Page

After logging in, find API Keys in the left sidebar menu and click it
You’ll see an API Keys management page

Step 2: Create a New API Key

Click the Create API Key button
A dialog will pop up asking you to name your Key
- You can name it anything — claude-code, my-key, test are all fine
- The name is just for your own reference to distinguish different Keys
Click Confirm or Create

Step 3: Copy the API Key (⚠️ Most Critical Step!)

Once created, the page will display your API Key in a format like:

`1`	`sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`

⚠️ This Key Is Only Shown Once!

After you close the dialog, you’ll never see it again. Copy and save it immediately to Notepad or WeChat File Transfer.

🚨 Security Reminder

An API Key is equivalent to your account password. Don’t share it with anyone and don’t post it publicly. If you suspect it’s been leaked, delete it immediately and create a new one.

Step 4 Complete!

You now have a DeepSeek API Key. For the final step, we’ll give this key to CC-Switch to complete the connection.

Configure CC-Switch to Connect DeepSeek

Open CC-Switch

Find the CC-Switch icon on your desktop or in the Start menu and double-click to open it.

Add a DeepSeek Configuration

Step 1: Click the Add Button

Once CC-Switch opens, find the + button (plus sign) in the top-right corner and click it.

Step 2: Fill In the Configuration

After clicking +, a configuration panel will pop up. Fill in the following:

① Model Preset: Select DeepSeek

② API Key: Paste the DeepSeek API Key you copied earlier (make sure there are no leading or trailing spaces)

③ Model Name: Delete whatever is in the input box and type:

`1`	`deepseek-v4-pro[1m]`

④ Base URL / API Address (if present):

`1`	`https://api.deepseek.com`

Step 3: Save the Configuration

After double-checking all fields, click Add / Save / Confirm.

Switch to DeepSeek

Return to CC-Switch’s main interface
You’ll see the DeepSeek configuration you just added in the list
Click the Switch / Enable button next to that configuration
The interface should show “Current Model: DeepSeek” or similar

Verify the Connection

Open Command Prompt and type claude to launch Claude Code.

Inside Claude Code, type:

/model

Press Enter. If the displayed model info includes DeepSeek, the connection is successful ✅

All Configuration Complete!

You can now start using the AI programming assistant!

Start Using It (Hands-on Example)

Now that everything is configured, let’s do a simple exercise to make sure it all works.

Create a Project Folder and Open Command Prompt

Right-click on the desktop → New → Folder, name it my-first-ai-project
Double-click to open the folder
Click the address bar at the top of the window, type cmd, and press Enter

Launch Claude Code

In the Command Prompt window that appears, type:

claude

Press Enter. If asked whether to trust this folder, type y and press Enter.

Give Your First Instruction

Once Claude Code starts, type the following (you can use plain English):

`1`	`Help me create a simple personal homepage using HTML + CSS + JavaScript, with a title, a short self-introduction, and a dark mode toggle button`

Press Enter to submit.

Handle Permission Requests

During execution, Claude Code may ask for permission to create/modify files — just select Yes. For your own projects, you can choose Yes, always allow (won’t ask again).

Check the Result

After completion, go back to the project folder and double-click index.html — it’ll open in your browser, and you’ll see the webpage the AI created for you!

Congratulations!

You’ve completed your first project with Claude Code + DeepSeek!

Command Quick Reference

Operation	Command	Description
Check Node.js version	`node -v`	Verify Node.js is installed
Check npm version	`npm -v`	Verify npm is working
Set npm mirror	`npm config set registry https://registry.npmmirror.com/`	Speed up downloads
Check npm mirror	`npm config get registry`	Verify mirror is active
Install Claude Code	`npm install -g @anthropic-ai/claude-code`	Global install
Check Claude Code version	`claude --version`	Verify Claude Code is installed
Launch Claude Code	`claude`	Start in current folder
Check current model	`/model`	Type inside Claude Code
Exit Claude Code	`/exit` or press `Ctrl + C` twice	Quit the program

FAQ

node -v says “’node’ is not recognized as an internal or external command”?

Node.js environment variables (PATH) aren’t configured correctly. Open File Explorer and go to D:\nodejs\ to see if node.exe is there:

The file exists: Node.js is installed but PATH isn’t set up — follow the steps in 1.4 How to Configure Environment Variables to add it manually

The file doesn’t exist: Installation failed — re-download and reinstall

claude says “‘claude’ is not recognized as an internal or external command”?

Claude Code installation failed. First verify node -v and npm -v are working, then re-run npm install -g @anthropic-ai/claude-code.

Claude Code asks me to log in to an Anthropic account after launching?

The .claude.json file wasn’t edited correctly. Press Win + R, type %USERPROFILE% and press Enter, find .claude.json and open it with Notepad. Make sure it contains "hasCompletedOnboarding": true, with an English comma at the end of the preceding line, true in lowercase, and English quotation marks.

Claude Code shows errors or no response during conversation?

Common causes: ① DeepSeek account balance is insufficient ② API Key is entered incorrectly ③ Model name isn’t deepseek-v4-pro[1m] ④ Network issues. Check each one.

npm install of Claude Code is very slow (over 5 minutes)?

Check if the domestic mirror is configured: npm config get registry (should show registry.npmmirror.com). If not, run npm config set registry https://registry.npmmirror.com/ and retry.

CC-Switch won’t open or crashes on launch?

Download the latest version from GitHub Releases, or try right-clicking and running as administrator.

GitHub page won’t load?

Cause: GitHub may be unstable to access from within China. Solutions:

Refresh the page several times

Try a different browser

If you still can’t access it, search for “CC-Switch download” online — some domestic mirror sites may also host the download

Complete Process Review

Step Content One-Line Summary

Step 1 Install Node.js Set up the “runtime engine” so your computer can run JavaScript programs

Step 2 Install Claude Code Install the “AI assistant” and skip login

Step 3 Install CC-Switch Install the “brain-swapper” to change AI models

Step 4 Get DeepSeek API Key Get the “key” to access DeepSeek’s AI services

Step 5 Configure CC-Switch Use the “brain-swapper” + “key” to switch Claude Code’s brain to DeepSeek

Step 6 Start Using Type claude in any folder to launch your AI assistant!

After completing all steps, you can open any folder on your computer, type the claude command, and launch a DeepSeek-powered AI programming assistant!

Install Claude Code in 5 Minutes and Connect DeepSeek

Sun, 26 Apr 2026 02:00:15 +0800

Overview

Claude Code is a command-line AI programming assistant launched by Anthropic, with a variety of built-in Skills plugins. Through different combinations, it can accomplish many things that AI alone cannot do. After connecting to the domestic large model DeepSeek V4, usage costs can be significantly reduced.

Core uses:

Building a personal knowledge base, automating the organization of study notes
Collecting industry information on schedule and organizing it into manuscripts
Automatically publishing to various social media platforms

Step 1: Install the Runtime Environment

1.1 Install Node.js

Go to the Node.js official website to download the Windows installer (.msi), double-click and follow the prompts.

Verify installation:

1
2

node -v
npm -v

1.2 Configure npm Domestic Mirror

`1`	`npm config set registry https://registry.npmmirror.com/`

💡 Why configure a mirror?

The default npm source is overseas, and download speeds are very slow. After configuring a domestic mirror, installation speed can be improved by more than 10 times.

1.3 Install Git

Go to the Git official website to download the corresponding version installer and follow the prompts.

Verify installation:

git -v

1.4 Install CC-Switch

CC-Switch is used to connect third-party models to Claude Code.

Go to the GitHub Release page to download the corresponding version (e.g., Windows MSI), double-click to install, and follow the prompts.

Step 2: Install Claude Code

`1`	`npm install -g @anthropic-ai/claude-code`

Verify:

`1`	`claude --version`

Launch Claude Code once and then close it
Find the .claude.json file in your user directory
Add the following field (note that a comma must be added at the end of the previous field):

`1`	`"hasCompletedOnboarding": true`

Re-execute claude to start, and choose to trust the current folder

⚠️ Common Error

If you forget to add a comma at the end of the previous field, it will cause a JSON parsing error and Claude Code will fail to start.

Step 3: Connect DeepSeek

3.1 Get API Key

Open DeepSeek Open Platform, register and log in
Ensure your account has a balance
Click API Keys on the right → Create API Key → Copy and save (cannot be viewed again after closing)

🚨 Key Security

Do not share your key with others, as it will consume your balance.

3.2 Configure CC-Switch

Open CC-Switch, click the + button in the upper right corner
Select DeepSeek as the model preset
Enter the API Key
Change the model name uniformly to: deepseek-v4-pro[1m] (context 1M, Claude Code uses 128K by default)
Click Add

3.3 Verify the Model

In the Claude Code dialog box, enter:

/model

You can view the currently available models, or directly ask “What model are you currently using” to confirm successful connection.

Step 4: Hands-on Example

Create a new folder on the desktop
Enter CMD in the address bar and press Enter
Execute claude to start, and choose to trust the current folder
Enter your requirement: Use HTML + JS + CSS to create a Todo app
During execution, it will request tool permissions — select Yes
After completion, ask it to open the page for preview

💡 Tip

You can describe your requirements directly in Chinese — Claude Code supports mixed Chinese and English input.

Command Quick Reference

Operation	Command
Node version check	`node -v`
npm version check	`npm -v`
npm domestic mirror	`npm config set registry https://registry.npmmirror.com/`
Git version check	`git -v`
Install Claude Code	`npm install -g @anthropic-ai/claude-code`
Claude Code version check	`claude --version`
Launch Claude Code	`claude`
Switch model	`/model`

FAQ

Command not found after running claude?

Check if Node.js is installed successfully (node -v) and whether the npm global path is in the system PATH.

Prompts to log in to Anthropic account after starting?

The hasCompletedOnboarding in .claude.json is not configured correctly. Please go back to Step 2 to check.

Model call error / no response?

Check if your DeepSeek account balance is sufficient, and whether the API Key in CC-Switch is entered correctly.

Learn to Create Beautiful Tech Architecture Diagrams with AI

Tue, 31 Mar 2026 19:51:00 +0800

✈️ Learn to Create Beautiful Tech Architecture Diagrams with AI

👋 This guide is written for complete beginners who have never drawn an architecture diagram before. You don’t need design skills, you don’t need to write code — just know how to chat with AI.

What is a Tech Architecture Diagram and Why Should I Draw One?

Simply put, a tech architecture diagram helps you “draw out” the system in your head.

For example, if you’re building an app: what functional modules does it have? How do users interact with it? How does data flow? Drawing these relationships as a diagram is an architecture diagram.

The benefits are real:

✅ Clarify your own thinking — the process of drawing helps you organize your system design
✅ Communicate with coworkers effortlessly — a picture is worth a thousand words
✅ Impress in presentations — bosses and clients instantly understand how great your solution is
✅ AI draws for you, saving time and effort — with AI, you can get a decent diagram in minutes

🤔 Which Method Should a Beginner Choose? (Read This First)

Your Situation	Recommended Method	Difficulty
Just want the fastest way to get a good-looking image, no changes later	Method 1 (AI generates image directly)	⭐
Willing to take one more step for easier future edits	Method 2 (Mermaid.js code generation)	⭐⭐
Creating formal docs that need repeated edits and consistent style	Method 3 (Excalidraw local drawing)	⭐⭐⭐

💡 Beginner tip: Try Method 1 first to get a feel, then try Method 2. Save Method 3 for when you need to create formal documents.

Method 1: Let AI Draw a Picture for You (Simplest, Fastest)

⏱ Time: 2-3 minutes 🛠 Tool: Gemini 3.1 Pro (by Google, free)

How It Works in One Sentence

Ask your AI (like Gemini) to write a “visual description prompt” first, then feed that prompt to the AI’s image generation feature, and the AI draws the picture for you.

Step-by-Step Guide

Step 1: Ask AI to Write a “Visual Description Prompt”

Open Gemini and enter the following (copy and replace with your content):

Please write a prompt for generating a technical architecture diagram.
I want to draw an architecture diagram for [your system name, e.g., e-commerce website],
with the following modules: user interface, product management, order system, payment system, admin panel.
The data flow is: user places an order → order system calls payment → payment completion notifies product management to update inventory.
Please provide a detailed prompt in English suitable for text-to-image models. The style should be professional, clean, and visually appealing.

The AI will return a detailed English description.

Step 2: Feed the Prompt to AI for Image Generation

In Gemini (or other AI with image generation), select the image generation feature (like Gemini’s built-in Banana 2.0 model), paste the prompt from the previous step, and click generate.

Step 3: Done 🎉

The AI will output an image. If you’re not satisfied, regenerate until you’re happy.

Pros and Cons

✅ Pros	❌ Cons
Fastest — done in minutes	Hard to modify — system changes require full regeneration
Great visual quality, rich colors	Results can be inconsistent
No extra tools needed	Poor prompts lead to poor results

📌 Beginner Tips

Be detailed in your prompt — the more specific you are, the better the output. Don’t just say “draw an architecture diagram” — specify the modules and how they connect
Try multiple times — it’s normal to not get a perfect result on the first try
English prompts work better — most image generation models understand English better

Method 2: Let AI Generate Code, Then Render It into a Diagram (Recommended for Beginners)

⏱ Time: 3-5 minutes 🛠 Tool: Any AI (ChatGPT, Claude, Gemini) + Mermaid.js

How It Works in One Sentence

A flowchart is essentially code (Mermaid.js syntax). You ask AI to write this code, then use a free online tool to render it as an image. Want to change the diagram? Ask AI to modify the code and re-render.

Step-by-Step Guide

Step 1: Ask AI to Generate Mermaid Code

Open your preferred AI (ChatGPT, Claude, Gemini) and enter (copy and replace with your content):

Please use Mermaid syntax to draw an architecture diagram for an e-commerce system.
The system includes: user interface, product management, order system, payment system, admin panel.
Data flow: user places order → order system calls payment → payment completion notifies product management to update inventory.
Output pure Mermaid code using graph TD format.

The AI will return something like:

graph TD
    A[User Interface] --> B[Order System]
    B --> C[Payment System]
    B --> D[Product Management]
    C --> E[Payment Complete]
    E --> D

Step 2: Render the Code as an Image

Open this free website: mermaid.live

Paste the AI-generated code into the left editor panel
The right panel will instantly display the flowchart
Click the “Export” button in the top-right corner and choose PNG or SVG format (SVG is a vector format — it stays sharp at any size, great for formal documents)

Step 3: Want to Modify It? Ask AI to Change the Code

Paste the old code back to the AI and tell it what you want to change:

`1`	`Modify the code above to add a "Login Verification" module between "User Interface" and "Order System".`

After modification, go back to mermaid.live to paste and export.

Pros and Cons

✅ Pros	❌ Cons
Good image quality, professional look	Complex diagrams are still hard to modify later
Easier to modify than Method 1 — change code, re-render	Major architecture changes essentially require regeneration
No software installation needed — works in a browser

📌 Beginner Tips

Mermaid has fixed syntax — when asking AI, clearly say “use Mermaid syntax”
mermaid.live is a gem — paste and preview instantly, completely free, no account needed
Export as SVG for best results — vector format stays sharp at any size
Save your code — for future modifications, just send the old code to AI

Method 3: Let AI Generate Editable Architecture Diagrams (For Formal Documents)

⏱ Time: 10-15 minutes (first setup takes a bit longer) 🛠 Tools: An AI coding tool + Obsidian + a “Drawing Instruction Pack”

How It Works in One Sentence

This is the most professional method, but requires some initial setup. Once configured, you tell AI what to draw, and AI generates a draggable, editable architecture diagram file that you open in Obsidian — adjust anything you don’t like manually. Methods 1 and 2 produce “static” images; this method produces “living” ones.

🤔 First, Understand: What is a “Drawing Instruction Pack” (Skills)?

Skills are a set of “instruction manuals” that tell AI how to draw diagrams for you.

Without it: You say “draw an architecture diagram” — AI can only give you a text description
With it: AI knows how to generate an editable architecture diagram file

Think of it as installing a “diagram plugin” for your AI.

This instruction pack is called axton-obsidian-visual-skills — a free open-source project by Axton. It includes 3 drawing abilities:

Drawing Method	Generated File	Best For	Visual Style
Excalidraw	`.excalidraw` file	Flowcharts, mind maps, architecture diagrams	✏️ Hand-drawn style (like a whiteboard)
Mermaid	Text rules	Flowcharts, sequence diagrams, comparison charts	🎯 Professional business style
Canvas	`.canvas` file	Mind maps, knowledge organization	🎨 Colorful cards

💡 You can also use Draw.io — Draw.io is another free drawing tool with its own instruction pack. This guide uses Excalidraw as an example.

🔧 Prerequisite Installation (One-Time)

💡 Where Should This Instruction Pack Go?

AI tools look for these instruction files in a fixed location on your computer. Recommended location:

C:\Users\yourusername\.claude\skills\

🤔 What’s this path?

C:\Users\yourusername\ ← Your “user folder” — where software stores config files by default

\.claude\ ← Configuration folder created by Claude Code

skills\ ← Where drawing instructions are stored

Don’t know your username? Open File Explorer, type %USERPROFILE% in the address bar and press Enter — that’s the folder.

🤔 Why on C drive? Because your user folder is on C by default. This makes the instruction pack available to all projects on this machine.

This location works for both OpenCode and Claude Code — install once, use with both tools.

Other tools may use different locations, but beginners can just use the path above.

Installation Method 1: Let AI Install It for You (Recommended, Easiest)

Whether you use OpenCode, Claude Code, or Cursor, just say:

1
2
3

Help me download axtonliu/axton-obsidian-visual-skills from GitHub,
unzip it, and put the excalidraw-diagram, mermaid-visualizer, and obsidian-canvas-creator
folders into C:\Users\yourusername\.claude\skills\ directory.

AI will handle downloading, unzipping, and copying. Restart your tool when done.

💡 Replace “yourusername” with your actual username.

Installation Method 2: Manual Download

If your AI doesn’t support file operations:

Open the axton-obsidian-visual-skills download page
Click the green Code button → Download ZIP
Unzip the file — you’ll see 3 folders
Open your C:\Users\yourusername\.claude\ folder (create a skills folder if it doesn’t exist)

Drag all 3 folders in

Final structure:

C:\Users\yourusername\.claude\skills\
   ├── excalidraw-diagram\
   │     └── SKILL.md
   ├── mermaid-visualizer\
   │     └── SKILL.md
   └── obsidian-canvas-creator\
         └── SKILL.md

Installation Method 3: Claude Code Quick Install

If you use Claude Code (only works with it), type in the chat:

1
2

/plugin marketplace add axtonliu/axton-obsidian-visual-skills
/plugin install obsidian-visual-skills

Restart Claude Code after installation. Not supported by OpenCode or Cursor.

You’ll Also Need:

Software	Purpose	Cost
OpenCode / Claude Code / Cursor	Runs AI to generate diagram files	Free tiers available
Obsidian	View and manually adjust diagrams	Free
Obsidian Excalidraw Plugin	Edit Excalidraw files in Obsidian	Free (search “Excalidraw” in the plugin marketplace)

🖐️ Step-by-Step Guide

Step 1: Install Skills, Tell AI What to Draw

After installing Skills, type directly in OpenCode, Claude Code, or Cursor:

For Excalidraw hand-drawn style architecture diagram:

Use Excalidraw to draw an e-commerce system architecture diagram, including:
user interface, product management, order system, payment system, admin panel.
User places order → order system calls payment → payment completion updates inventory.
Use Chinese labels.

AI will automatically generate a .excalidraw file in the current directory.

🔍 Can’t find the file? Check the AI’s output — it usually tells you the save path.

For Mermaid business-style flowchart:

1
2

Convert this flow into a Mermaid diagram:
User visits homepage → browses products → adds to cart → submits order → pays online → completes transaction

AI will generate Mermaid code — copy it to mermaid.live to render.

For Canvas mind map:

1
2

Organize this article into an Obsidian Canvas mind map:
[paste your content]

AI will generate a .canvas file — open with Obsidian to see a colorful card layout.

Step 2: Manual Adjustments in Obsidian

Open Obsidian and drag the generated file in
For Excalidraw files (.excalidraw or .md), double-click to enter edit mode
Freely drag boxes, adjust arrows, modify text, change colors
Drag a new box to add a module, select and press Delete to remove

💡 This is the key advantage — you have a “living” architecture diagram.

Step 3 (Optional): Change Style with AI

After adjusting content and layout, screenshot it and send to Gemini (or other AI) with a reference image:

`1`	`Help me convert Image 1 to a hand-drawn style similar to Image 2, adding appropriate illustrations to help users understand`

(Prompt 1: Major changes — content layout may also be adjusted)

`1`	`Convert to a hand-drawn style similar to Image 2`

(Prompt 2: Minor changes — only colors and style, content layout stays the same)

🔍 What Diagrams Can Excalidraw Skills Draw?

Diagram Type	Best For
Flowchart	Business processes, operation steps, task sequences
Mind Map	Concept expansion, topic classification, brainstorming
Hierarchy Diagram	Organization structure, system layers, directory structure
Relationship Diagram	Dependencies, influence relationships, element interactions
Comparison Chart	Solution comparison, option analysis, before/after
Timeline	Event evolution, project milestones, version iterations
Matrix	2D classification, priority matrix, capability positioning
Free Canvas	Scattered ideas, initial drafts, free-form notes

⚠️ Common Issues & Solutions

Q: Chinese text doesn’t have a hand-drawn look? A: Excalidraw’s hand-drawn font (Excalifont) supports English by default; Chinese fonts need online loading. If Chinese shows as regular font:

Ensure access to Excalidraw.com (needs internet)
Or download Chinese font files from the Excalidraw official font library
Place them in your Obsidian vault under Excalidraw/CJK Fonts
Enable “Load Chinese fonts at startup” in Excalidraw plugin settings and restart Obsidian

Q: The generated diagram looks messy? A: That’s normal — AI-generated layouts aren’t always perfect. Just drag and adjust in Obsidian — that’s the biggest advantage of Method 3.

Q: Do I have to use Claude Code? A: No. These Skills work on OpenCode, Claude Code, and Cursor. OpenCode is compatible with Claude Code’s Skills format.

Pros and Cons

✅ Pros	❌ Cons
Edit anything — drag to adjust	First-time environment setup takes time
Not dependent on prompt quality — content can be manually refined	Longer workflow, more steps
Create a set of consistently styled document diagrams	Occasional text encoding or alignment issues
Works well with Obsidian for knowledge management
One Skills install gives three drawing methods

📌 Beginner Tips

Try Methods 1 and 2 first, then move to Method 3 when you’re comfortable
Skills installation is the key step — once installed, AI knows how to generate editable files
Excalidraw defaults to hand-drawn style, giving a亲切, approachable look
Obsidian’s Excalidraw plugin offers the best viewing and editing experience
Method 3’s greatest value is editability — once set up, future changes are just drag-and-drop
Check out the demo video on GitHub before deciding

🔧 Tools Summary

Tool	Purpose	Cost	Difficulty
Gemini	Chat + text-to-image generation	Free	Low
ChatGPT	Chat + text-to-image generation	Paid/Free	Low
OpenCode	AI coding tool, auto-loads `~/.claude/skills/`, supports parallel execution	Free	Medium
Claude Code	AI coding tool, supports Skills	API usage pricing	Medium
Cursor	AI coding tool	Free tier sufficient	Medium
mermaid.live	Convert Mermaid code to images	Free	Low
Excalidraw	Editable diagram tool	Free & open source	Low
Obsidian	Note-taking + Excalidraw plugin for editable diagrams	Free	Medium
axton-obsidian-visual-skills	AI drawing instruction pack (Excalidraw / Mermaid / Canvas)	Free & open source	Medium

🎯 Beginner Quick Start Roadmap

Day 1 → Try Method 1: Generate images with Gemini (just try it)
         ↓
Day 2 → Try Method 2: Generate flowcharts with Mermaid.js
         (Learn the "change code = change diagram" approach)
         ↓
Day 3 → Use Method 2 diagrams in your documents
         ↓
When needed → Explore Method 3: Install Skills + Obsidian + Excalidraw plugin
(No rush — Methods 1 and 2 are already sufficient)

💬 FAQ

Q: Are all these tools free? A: Gemini and mermaid.live are completely free. ChatGPT and Claude have free tiers — you only pay after using them up.

Q: Can I use generated images commercially? A: Yes, the architecture diagram is your own design — AI is just a tool to draw it.

Q: I’m a product manager/operations person, not a developer — can I still draw? A: Absolutely. Method 1 only requires typing, Method 2 only requires copy-pasting — no coding needed.

Q: Are there copyright issues with generated images? A: The copyright of tool-generated images belongs to you.

Q: Do Mac and Windows both work? A: All tools mentioned have web versions, so the OS doesn’t matter.

Q: What exactly is “axton-obsidian-visual-skills” in Method 3, do I have to install it? A: It’s an open-source AI drawing “instruction pack.” You can draw without it, but with it installed, AI can directly generate editable architecture diagram files instead of static images. If you only need occasional diagrams, Methods 1 and 2 are sufficient. If you need frequent edits and formal documents, highly recommended.

Q: What’s the difference between the 3 drawing methods (Excalidraw / Mermaid / Canvas) in Method 3? A: Simply put — Excalidraw is like a hand-drawn whiteboard, best for architecture diagrams; Mermaid has a professional business style, great for formal docs; Canvas is a colorful mind map tool for organizing ideas. Choose based on what you need.

Q: Does Method 3 require Claude Code? Can I use ChatGPT? A: These Skills are designed for AI coding tools that can manipulate local files — OpenCode, Claude Code, Cursor all work. ChatGPT’s web version can’t handle local files, so it won’t work.

Q: Where should the installed Skills be? How do I check? A: They go in ~/.claude/skills/. Check that directory — it should have excalidraw-diagram, mermaid-visualizer, and obsidian-canvas-creator folders. Restart your AI tool and it should recognize them.

📝 Final words: The most important thing about drawing architecture diagrams is clarifying what you want to express. AI is just a tool to turn your ideas into images. Start with the simplest Method 1 — the first step is the most important!

The Evolution of AI Programming

Fri, 20 Mar 2026 02:00:15 +0800

🤖 The Evolution of AI Programming: From Prompts and Context Engineering to Harness

As models with comparable capabilities become increasingly common, the gap in user experience between different products is actually widening. Some products write code that can be deployed directly, while others produce code that is hard to maintain—why? Because the models are the same; the difference lies in how they are used, and how to use them stably. In the AI industry, this is known as Harness Engineering.

🧠 Harness Engineering: Deconstructing the Agent into Three Layers

We divide programming Agents into three levels:

Scaffolding Responsible for all preparatory work before the AI executes a task, including the tools provisioned by the system.
Harness (Runtime Orchestration, The Core) The central dispatching hub of the entire agent. Responsible for managing the AI’s core reasoning loop, coordinating tool calls, context management, runtime security control, and persistent storage of session data.
Context Engineering Responsible for managing the resource allocation of tokens—the smallest unit of computation for large language models processing text. Determines which information should be retained and which should be discarded during the AI’s operation.

A stable and capable AI coding agent = One or more LLMs called + A robust Harness system.

⏳ Harness is Crucial, Why is it Only Getting Popular Now?

① Phase 1: Prompt Engineering

Core Focus: How to write a good instruction.

Role Setting: Defining clear identities and responsibility boundaries for the AI.
Providing Examples: Using Few-shot prompting to make the AI generate content according to a specific format and style.
Chain-of-Thought: Asking the AI in the instruction to break down the problem step-by-step and deduce logically, reducing logical leaps and errors.

② Phase 2: Context Engineering

A single prompt is no longer enough—we need to dynamically construct the entire context environment for the model. Ensuring that every time the model makes a decision, it can accurately see all the information it needs: task files, conversation history, tool rules, knowledge base entries…

Core Concept: Show the model what it needs to see, and block what it shouldn’t.

③ Phase 3: Harness Engineering

Whenever you find the Agent making a mistake, you spend time engineering a solution so it won’t make the same mistake again.

The model’s capabilities are sufficient, but it just won’t listen. What do we do? The answer is—Harness Engineering.

Real-world Cases:

Experiment	Condition	Result
LangChain	Same model, optimized Harness only	Terminal Bench 2.0: 52.8 → 66.5
Nate B Jones	Same model, same prompt, changed runtime environment only	Coding benchmark win rate: 42% → 78%
OpenAI	Started from an empty git repo, 5 months, entirely AI Agent driven	Produced ~1 million lines of code, 1500 PRs, zero human intervention

The Agent isn’t hard; the Harness is.

💥 Why Do AI Tasks Fail So Frequently?

1. Trying to do it all at once Trying to finish all features in a single window results in the context window rapidly depleting, causing a steep drop in quality towards the latter half.

2. Declaring victory too early In the later stages of complex project development, once the AI agent completes the core functions and has visible output, it directly determines the task is complete and actively terminates—even if a large number of features are unimplemented and core requirements are unmet, it will still stop.

3. Marking features as complete too early As soon as the AI agent finishes writing a feature, it marks it as complete. It will not actively perform end-to-end full functional tests, nor will it verify whether this feature is actually usable in a real environment. It looks like it runs, but in reality, it’s full of hidden bugs.

4. Mechanically copying code patterns AI will mechanically follow existing code patterns (architectural style, coding conventions), even if the pattern is wrong, and continuously amplify it throughout the project. An unconstrained AI agent will accumulate a massive amount of technical debt in a project at extreme speeds.

🛡️ The Four Guardrails of Harness

🔹 1. Context Engineering

The longer and more redundant the AGENTS.MD file is, the lower the Agent’s task success rate, while the inference cost becomes higher. The AGENTS.MD file should be strictly kept under 60 lines.

Context is a scarce resource; too much guidance will crowd out the truly important task code.

🔹 2. Architectural Constraints (The Core)

Implement a strict layered architecture—not by telling the agent “please follow the architecture” via a prompt, but by mechanically enforcing it using deterministic Linters and structured tests.

Embed repair guidelines directly into the Linter error messages, telling the agent how it should be fixed. Constraints are more effective than instructions.

🔹 3. Feedback Loop

In Harness, code review becomes an Agent-to-Agent process. Forming a standardized closed loop: Plan & Discover → Build → Verify → Fix, cycling continuously to consistently purify code quality.

🔹 4. Entropy Management

Over time, AI-generated code accumulates numerous issues: outdated documentation, architectural drift, styling deviations, accumulation of dead code… Letting an Agent maintain documentation for the Agent continuously fights against entropy increase and prevents project rot.

🧭 Conclusion

The evolution of AI programming is essentially a paradigm shift from “writing good prompts” to “building good systems”.

Prompt Engineering solves “how to say it”.
Context Engineering solves “what information to give”.
Harness Engineering solves “how to manage/control it”.

These three paths are not mutually exclusive but rather additive and progressive—each layer builds on the foundation of the previous one. A truly capable AI programming product that stably outputs high-quality code must have invested serious effort across all three of these levels.

LoRA Large Model Fine-Tuning

Thu, 11 Dec 2025 00:00:00 +0800

1. What is LoRA?

LoRA (Low-Rank Adaptation) is a large model fine-tuning technique.

The Problem

Large models (like Qwen, Llama) have 7B, 70B parameters or more. Retraining all parameters every time you want to teach them something new requires dozens of A100 GPUs running for days — far beyond what most people can afford.

The LoRA Approach

Don’t touch the original model — just attach a “small plugin” next to it.

Think of it this way:

Approach	Analogy
Full fine-tuning	Rewriting the entire textbook into your desired version
LoRA	Sticking a few Post-it notes in the margins with your additions

The original model weights are completely unchanged. LoRA inserts a tiny matrix (low-rank matrix) next to certain key layers, and only updates this matrix during training.

Why “Low-Rank Adaptation”?

Mathematically, a large matrix can be approximated by the product of two smaller matrices. LoRA leverages this: the original weight matrix $W$ stays frozen, while two small matrices $A$ and $B$ are trained. The final output becomes $W + A \cdot B$. Together, $A$ and $B$ may be only one-thousandth the size of the original weights.

2. What is LoRA Used For?

Its core ability is simple: change a large model’s “behavior” at very low cost.

📌 LoRA changes style/format/behavior, not knowledge

Want the model to learn new knowledge → Use RAG (Retrieval-Augmented Generation)

Want the model to speak or act differently → Use LoRA

Typical Use Cases

Scenario	Example
Style Transfer	Make a general model write in Lu Xun’s literary style
Format Constraint	Force the model to output strict JSON, nothing more
Role-playing	Turn Qwen into Zhongli from Genshin Impact
Domain Tone	Medical consultation tone, legal document precision
Instruction Following	Make the model better follow system prompts without wandering

LoRA Advantages

Extremely low VRAM: A 7B model can be trained on a single RTX 3090 (24G), or even barely on 8G cards
Tiny file size: Training output is just a few MB. One model can host dozens of different LoRAs, plug-and-play
Fast training: A few hundred samples, results in 30 minutes
No base damage: Unload the LoRA and the model reverts to original, zero risk

3. How to Use LoRA?

Four main steps:

Step 1: Prepare Data

Write example dialogues of the “behavior” you want the model to learn.

Suppose you want the model to become a sarcastic customer service agent. Write 50-200 dialogues like this:

User: Where's my package?
Agent: Well, unless there's a surprise, it's probably sunbathing in the delivery truck. I suggest you sunbathe too while you wait.

User: Can I get a refund?
Agent: Sure, the process is about as long as a pilgrimage. Get your order number ready and I'll guide you on this journey westward.

You don’t need much data — 50-200 high-quality examples will show noticeable results. Quality matters far more than quantity.

Step 2: Choose a Tool

There are many tools out there, but they all do essentially the same thing. Two recommendations:

Tool	Features	Best For
LLaMA-Factory	Web UI, click-based operation	Complete beginners who don’t want to code
Unsloth	2-5x faster, half the VRAM	Those who know some Python and want efficiency

Unsloth’s core code is under 30 lines. The essence: load model → attach LoRA → feed data → train → save.

Step 3: Train

Set a few key parameters, then wait:

Parameter	Purpose	Typical Value
LoRA rank	Determines the “plugin” capacity. Higher = more refined but more VRAM	8 or 16 is enough
Learning rate	How much to learn each step	5e-5, don’t overthink it
Epochs	How many times to go through the data	3-5

Step 4: Use

After training, you get a LoRA file of a few MB. To use it, load both the original model and this LoRA file — the model now behaves as you trained it.

Want to switch back? Just unload the LoRA, one second to restore.

One model can host multiple LoRAs simultaneously — for example, attach a “sarcastic style” LoRA and a “JSON output” LoRA, and the model becomes a sarcastic assistant that outputs JSON.

Concept	What It Does	Relationship with LoRA
Full Fine-tuning	Modifies all parameters	Alternative to LoRA, better results but hundreds of times more expensive
RAG	External knowledge retrieval	Complementary: RAG handles knowledge, LoRA handles style
Prompt Engineering	Writing prompts	Lightest approach, but limited. Use LoRA when prompts aren’t enough
QLoRA	LoRA + 4-bit quantization	VRAM-saving version of LoRA, can run 7B on 8G cards
PEFT	Parameter-Efficient Fine-tuning category	LoRA is the most popular member of the PEFT family

5. One-Sentence Summary

LoRA = a small plugin for large models that changes behavior without changing knowledge, with extremely low training cost and plug-and-play MB-sized files.

Hugo + Stack + GitHub Pages Blog Setup Guide

Mon, 08 Dec 2025 00:00:00 +0000

Hugo + Stack + GitHub Pages Blog Setup Guide

A complete guide to building a personal blog with Hugo + Stack theme and deploying it to GitHub Pages.

This guide covers both new Stack (v4.x, split .toml config format) and legacy (v3.x, single hugo.yaml) configuration differences, with annotations where key differences exist.

Environment Setup

Install Git

Go to the Git website to download and install: https://git-scm.com/downloads
Use all default options during installation

Install Hugo (Extended Version)

Go to Hugo GitHub Releases: https://github.com/gohugoio/hugo/releases
Choose the extended version (marked with extended) — the Stack theme requires extended SCSS compilation support
Windows users: download hugo_extended_xxx_windows-amd64.zip and extract hugo.exe

This guide was written using Hugo v0.161.1 and Stack theme v4.0.2.

GitHub Account

Register a GitHub account: https://github.com
It’s recommended to enable two-factor authentication (2FA) — you can install the Authenticator 2FA Client plugin in Edge

Create a Hugo Site

Initialize the Project

Open a terminal in the directory where hugo.exe is located (type cmd or powershell in the address bar) and run:

# Create a new site
hugo new site myblog

# Enter the site directory
cd myblog

Generated file structure:

myblog/
├── archetypes/    # Article templates
├── assets/        # Static assets (images, CSS, JS)
├── content/       # Blog content (articles)
├── data/          # Data files
├── i18n/          # Multilingual support
├── layouts/       # Layout templates
├── public/        # Build output (generated by hugo command)
├── static/        # Static files (copied directly to public)
├── themes/        # Themes
└── hugo.toml      # Site configuration

Test the Default Site

`1`	`hugo server -D`

Visit http://localhost:1313/ in your browser. The page will be basic (no theme). Press Ctrl + C to stop the server.

Configure the Stack Theme

Download the Theme

Go to the Stack theme GitHub: https://github.com/CaiJimmy/hugo-theme-stack
Download the latest Release archive (or click “Download ZIP”)
Extract to the site’s themes/ directory

1
2

myblog/themes/
└── hugo-theme-stack-4.0.2/   # Folder with version number

Configure Theme Files — Critical Step

This is the step where errors are most likely to occur. The new Stack (v4.x) and legacy (v3.x) have completely different file structures:

Comparison	Legacy Stack (v3.x)	New Stack (v4.x)
Example site folder name	`exampleSite/`	`demo/`
Config files	Single `hugo.yaml`	Multiple `.toml` files in `config/_default/`
Theme reference	`theme: hugo-theme-stack`	`[[module.imports]]` (Hugo Modules)

New Version (v4.x) Steps:

Step 1: Copy Configuration Files

# Create config/_default directory
mkdir -p config/_default

# Copy all config files from demo
cp themes/hugo-theme-stack-4.0.2/demo/config/_default/*.toml config/_default/

After copying, config/_default/ contains 6 config files:

File	Purpose
`hugo.toml`	Base config (baseURL, title, pagination, permalinks, etc.)
`languages.toml`	Multilingual configuration
`markup.toml`	Markdown rendering config (code highlighting, TOC, etc.)
`menu.toml`	Menu config (navigation bar, social links)
`params.toml`	Theme parameters (sidebar, comments, widgets, etc.)
`related.toml`	Related content recommendation config

Step 2: Change Theme Reference Method

Open config/_default/hugo.toml, find:

1
2

[[module.imports]]
    path = "github.com/CaiJimmy/hugo-theme-stack/v3"

Replace with:

`1`	`theme = "hugo-theme-stack-4.0.2"`

This traditional method doesn’t require Go environment or Hugo Modules, making it simpler and consistent with this guide.

Step 3: Handle Root hugo.toml Conflict

The root hugo.toml and config/_default/hugo.toml will conflict. Back up or delete the root file:

`1`	`mv hugo.toml hugo.toml.bak`

Step 4: Copy Example Content

# Back up existing content (if any)
mv content content_backup

# Copy demo content
cp -r themes/hugo-theme-stack-4.0.2/demo/content .

Step 5: Copy Avatar and Static Assets

1
2

mkdir -p assets/img
cp themes/hugo-theme-stack-4.0.2/demo/assets/img/avatar.png assets/img/

Legacy Version (v3.x) Steps:

Enter the theme’s exampleSite/ folder
Copy the content folder and hugo.yaml to the site root
Delete the root hugo.toml (since you now have hugo.yaml)
Confirm that the theme field in hugo.yaml matches the theme folder name (version number removal recommended)

Verify by Starting

`1`	`hugo server -D`

Visit http://localhost:1313/ in your browser. You should now see the complete Stack theme (with sidebar, search, example articles, etc.).

If the page is incomplete, check the terminal for WARN messages (e.g., “Search page not found”, “Archives page not found”). This is usually because example content wasn’t copied.

Custom Configuration

Basic Information

Edit config/_default/hugo.toml (new version) or hugo.yaml (legacy):

1
2

baseURL = "https://your-username.github.io/"
title   = "My Blog"

If your primary language is Chinese, it’s recommended to set:

1
2

defaultContentLanguage = "zh-cn"
hasCJKLanguage         = true   # Set to true for Chinese/Japanese/Korean

Edit config/_default/params.toml (new version) or the params.sidebar section in hugo.yaml:

[sidebar]
    emoji    = "✏️"
    subtitle = "Your personal tagline"
    avatar   = "img/avatar.png"

Place the avatar image at assets/img/avatar.png
Choose emojis from emojiall.com

Edit config/_default/menu.toml (new version) or the menu.social section in hugo.yaml:

[[social]]
    identifier = "github"
    name       = "GitHub"
    url        = "https://github.com/your-username"
    params.icon = "brand-github"

Icon names reference: Tabler Icons (use brand-xxx format).

Comment System

Stack supports multiple comment systems. Here’s an example using utterances (based on GitHub Issues, no extra registration needed):

[comments]
    enabled  = true
    provider = "utterances"

    [comments.utterances]
        repo      = "your-username/your-username.github.io"
        issueTerm = "pathname"
        label     = ""

For more comment system configurations, see the theme documentation: https://stack.jimmycai.com/config/comments

1
2

[footer]
    since = 2026

Creating Articles

Article Structure

The Stack theme recommends each article in its own folder with index.md and image assets:

`1`	`hugo new content post/my-first-article/index.md`

Generated directory structure:

1
2
3

content/post/my-first-article/
├── index.md      # Article content
└── image.jpg     # Article image (optional)

Article Front Matter Example

---
title: My First Article
date: 2026-05-12
description: Article summary description
tags:
  - Hugo
  - Blog
categories:
  - Tutorial
image: image.jpg   # Article cover image (optional)
---

Deploy to GitHub Pages

Create a GitHub Repository

Log in to GitHub, click New repository
Repository name: your-username.github.io (must match exactly)
Select Public (GitHub Pages free tier requires public)
Do not check “Add a README file”

Manual Deployment

# 1. Build the static website (output to public/)
hugo -D

# 2. Enter the public directory
cd public

# 3. Initialize Git and push
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/your-username.github.io.git
git push -u origin main

After pushing successfully, visit https://your-username.github.io/ to see your blog (the first time may take 1-2 minutes).

Automatic Deployment (GitHub Actions)

Manually building and pushing every time is tedious. Use GitHub Actions to automatically build and deploy when you push code.

Step 1: Create a Source Repository

In addition to the username.github.io deployment repository, create a source repository (e.g., myblog) and push the entire Hugo project to it:

# In the site root directory (not inside public/)
git init
git add .
git commit -m "init hugo site"
git branch -M main
git remote add origin https://github.com/your-username/myblog.git
git push -u origin main

Step 2: Create GitHub Actions Workflow

Create .github/workflows/deploy.yml in the site root:

name: Deploy Hugo site to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v4
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN }}
          external_repository: your-username/your-username.github.io
          publish_branch: main
          publish_dir: ./public

Step 3: Configure GitHub Token

Go to GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic)
Generate a new Token with repo and workflow permissions
Copy the generated Token
Go to your source repository → Settings → Secrets and variables → Actions → New repository secret
Name: PERSONAL_TOKEN, Value: paste the Token

From now on, every git push to the source repository’s main branch will trigger GitHub Actions to automatically build and deploy to username.github.io.

Tip: Enable Automatic lastmod Add the following to config/_default/hugo.toml (new version) or hugo.yaml (legacy):
1
2
3
enableGitInfo = true
[frontmatter]
  lastmod = [":git", ":fileModTime"]
This will automatically display the Git commit time as the last modified time for articles. This requires fetch-depth: 0 in the GitHub Actions checkout step (already included in the configuration above).

FAQ

Q1: Page is blank/incomplete after starting?

Check whether you copied the demo’s content folder. Missing example pages (search, archives, etc.) will cause the theme to display incompletely.

Q2: `hugo server` throws “Theme not found” error?

New version: Check that theme = "xxx" in config/_default/hugo.toml matches the folder name under themes/
Legacy: Check the theme field in hugo.yaml

Q3: Root `hugo.toml` conflicts with `config/_default/hugo.toml`?

Delete or back up the root hugo.toml. Hugo will prioritize config files under config/_default/.

Q4: Push to GitHub fails?

This may be a network issue. Try removing the proxy:

1
2

git config --global --unset http.proxy
git config --global --unset https.proxy

Q5: What is the new `[[module.imports]]`?

The new Stack uses Hugo Modules (Go modules) to import the theme by default, which requires a Go environment. If you don’t want to deal with Go, simply switch to the traditional theme = "theme-folder-name" method.

Q6: Blog styles are broken after deployment?

Check that baseURL is correctly set to https://your-username.github.io/ (note the trailing /). An incorrect baseURL will cause CSS/JS resources to fail to load.

References

MCP Beginner's Guide: The Universal AI Plug Anyone Can Understand

Mon, 01 Dec 2025 01:46:03 +0800

Overview

Have you ever thought: ChatGPT, Claude and other AIs are smart, but they can only chat in a dialog box — they can’t help you check your calendar, manage files, or operate databases because they’re “locked in a cage” with no access to the outside world.

MCP (Model Context Protocol) is here to break down that wall.

Simply put, MCP is an open standard protocol that enables AI applications to connect to external systems — files, databases, APIs, various tools — just like giving AI a universal plug (USB-C port). Plug in anything and it works.

One sentence to understand MCP: It’s the “USB-C port” for the AI world — a unified standard, plug and play.

Why Use MCP?

Before MCP

Before MCP existed, if you wanted to connect AI to external tools (like checking the weather, reading calendars, operating databases), each AI application and each tool required custom integration development.

This was like the early days of phone charging ports — one for Android, one for Apple, one for Type-C. Every time you switched devices, you needed a new cable.

The problems were obvious:

High development costs: Every integration started from scratch
Not universal: Tools written for Claude couldn’t be used by ChatGPT
Difficult to maintain: When a tool was upgraded, all integrations had to be changed

After MCP

MCP defines a unified standard:

Tool providers develop an MCP Server following the MCP standard
AI applications act as MCP Clients to connect to it
As long as both sides follow the MCP protocol, plug and play, no redundant development

This is like how USB-C unified charging ports — one cable to rule them all.

What Can MCP Do? Use Cases at a Glance

1. Personal AI Assistant

Let AI help you manage your daily life:

Connect Google Calendar to check schedules and create meeting reminders
Connect Notion to organize notes and manage to-do lists
Connect Gmail to read and reply to emails
Connect Slack to summarize chat history

Example: You tell the AI “check what meetings I have tomorrow and summarize last week’s project progress notes” — the AI can automatically check your calendar, go through Notion, and give you a summary.

2. Programming & Development

Let AI coding assistants actually “get their hands dirty”:

Connect to the local file system via MCP to read and write project files
Connect to databases to directly query and modify data
Connect to GitHub to automatically create Issues and submit PRs
Connect to Figma to generate code directly from design mockups

Example: Claude Code connects to Figma via MCP, obtains the design mockup, and generates a complete web application.

3. Enterprise Applications

Make a big impact in the corporate world:

Connect to multiple databases so employees can query business data in natural language
Connect to internal systems (CRM, ERP) for AI to automatically compile reports
Connect to knowledge bases so AI can answer questions based on company documentation

4. Creative & Design

Connect to Blender to let AI generate 3D models
Connect to 3D printers to print designs directly
Connect to video editing tools to automate the editing workflow

MCP Core Architecture

MCP’s architecture is very simple, with only three roles:

┌──────────────┐         ┌──────────────┐         ┌──────────────┐
│  AI App      │ ◄─────► │  MCP Protocol │ ◄─────► │ MCP Server   │
│ (MCP Client) │         │ (Transport)   │         │ (External    │
└──────────────┘         └──────────────┘         │  Tool)       │
                                                   └──────────────┘

Role	Description	Analogy
MCP Client	AI applications (Claude, ChatGPT, Cursor)	Phone
MCP Server	Services providing specific capabilities (weather, file management)	Charger
MCP Protocol	The “language” both sides communicate in	USB-C Standard

What Can an MCP Server Provide?

An MCP Server can expose three types of capabilities to AI:

Type	Description	Examples
Tools	Functions/operations AI can call	Search the web, send emails, query databases
Resources	Data AI can read	File contents, database records, API responses
Prompts	Preset prompt templates	Code review templates, translation templates

How to Use MCP?

Method 1: Use Existing MCP Servers (Recommended for Beginners)

This is the simplest approach — others have already written the MCP Server, you just need to “install and connect”.

Step 1: Find the MCP Server You Need

The MCP ecosystem already has a large number of Servers available. Common sources:

Official repository: github.com/modelcontextprotocol/servers
MCP marketplaces: mcp.so, smithery.ai
GitHub search: Search for mcp-server

Popular MCP Servers:

MCP Server	Function
`filesystem`	Read and write local files
`github`	Operate GitHub (Issues, PRs)
`fetch`	Fetch web page content
`sqlite`	Operate SQLite databases
`notion`	Operate Notion notes
`memory`	Persistent memory storage

Step 2: Configure MCP Server in Your AI Application

Using Claude Desktop as an example, find the configuration file:

Windows: %APPDATA%\Claude\claude_desktop_config.json
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Add MCP Server configuration (using filesystem as an example):

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/your/work/directory/path"
      ]
    }
  }
}

After saving, restart Claude Desktop, and the AI will have file management capabilities.

Step 3: Start Using

After restarting, simply ask the AI to use these tools in conversation:

“Create a notes folder in my work directory”
“Read the README.md content and give me a summary”
“Search for recent project Issues”

The AI will automatically call the corresponding MCP Server to complete the task.

Method 2: Use MCP in Cursor / VS Code

If you use Cursor or VS Code for programming development, the configuration is similar.

Create .cursor/mcp.json (Cursor) or .vscode/mcp.json (VS Code) in your project root:

{
  "mcpServers": {
    "fetch": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-fetch"]
    },
    "sqlite": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sqlite", "./data.db"]
    }
  }
}

After configuration, you can use these tools in AI conversations.

Method 3: Develop Your Own MCP Server (Advanced)

If you want to connect AI to your own systems (like a company’s internal API), you can write your own MCP Server.

MCP supports multiple programming languages with official SDKs:

Language	SDK
TypeScript	`@modelcontextprotocol/sdk`
Python	`mcp` (PyPI)
Java / Kotlin	`io.modelcontextprotocol`

Minimal example (TypeScript):

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

const server = new McpServer({
  name: "my-server",
  version: "1.0.0"
});

// Define a "check weather" tool
server.tool(
  "get_weather",
  { city: z.string().describe("City name") },
  async ({ city }) => {
    // Your business logic here
    const weather = `${city} is sunny today, 25°C`;
    return {
      content: [{ type: "text", text: weather }]
    };
  }
);

// Start the service
const transport = new StdioServerTransport();
await server.connect(transport);

Once written, configure it in your AI application and start using it.

Which AI Applications Support MCP?

MCP has become an industry standard, with mainstream AI applications offering support:

AI Application	Support Status
Claude Desktop / Claude Code	Native support
ChatGPT	Supported
Cursor	Supported
VS Code (Copilot)	Supported
Windsurf	Supported
OpenCode	Supported

Configure once, use everywhere — an MCP Server configured in Claude will work in other applications too.

FAQ

Q: What’s the difference between MCP and APIs?

An API is a “private protocol” between two parties, with each API having different calling methods. MCP is a unified standard — all tools that follow MCP can be called by AI in the same way. Think of MCP as “a standard API layer specifically for AI.”

Q: Do I need programming skills to use MCP?

No! If you’re just using existing MCP Servers, you only need to know how to copy and paste configuration files. Programming is only needed when developing your own MCP Server.

Q: Is MCP secure?

MCP Servers run locally by default, and data is not uploaded to the cloud. However, when using third-party MCP Servers, it’s recommended to check their source code and permissions to ensure security.

Q: What environment does an MCP Server need to run?

Most MCP Servers run on Node.js, so you need to install Node.js first. Python-based Servers require a Python environment.

Summary

Question	Answer
What is MCP?	A unified standard protocol for AI to connect to external tools
Why use it?	To let AI actually “do work” instead of just chatting
Who can use it?	Everyone — beginners use existing Servers, developers can write their own
How to use it?	Find an MCP Server → Configure it in your AI app → Restart and use

The essence of MCP is: creating a unified “plug standard” for the AI world, allowing tools and AI to connect freely.

Further reading:

MCP Official Documentation

MCP Server Repository

MCP Marketplace

Step	Content	One-Line Summary
Step 1	Install Node.js	Set up the “runtime engine” so your computer can run JavaScript programs
Step 2	Install Claude Code	Install the “AI assistant” and skip login
Step 3	Install CC-Switch	Install the “brain-swapper” to change AI models
Step 4	Get DeepSeek API Key	Get the “key” to access DeepSeek’s AI services
Step 5	Configure CC-Switch	Use the “brain-swapper” + “key” to switch Claude Code’s brain to DeepSeek
Step 6	Start Using	Type `claude` in any folder to launch your AI assistant!

Yanmu

Methods for Sharing VPN and Proxy Connections Across Devices

Overview of Three Sharing Modes

Proxy Sharing Mode

How It Works

Example: Phone Accessing the Internet Through Computer Proxy

Example: Computer Proxying Phone Requests (Reverse)

About UDP Proxy

Pros and Cons

Gateway Sharing Mode

How It Works

Pros and Cons

Implementation via Linux Virtual Machine

Routing Sharing Mode

How It Works

Pros and Cons

Configuration on Windows

Use Cases

C Drive Always Full? Use the Simple mklink DOS Command to Save Your C Drive!

Background

What is mklink?

Three Types of Links

Step-by-Step Instructions

Close the Target Software

Move the Original Folder

Create the Link

Verify

Common Use Cases

WeChat Data Migration ⭐

QQ Data Migration

Chrome / Edge Browser Cache

Development Tool Caches

Windows Store Apps / Large Games

OneDrive / iCloud Sync Directories

Important Notes & Pitfalls

Deleting / Restoring a Link

Quick Diagnosis: What’s Eating Your C Drive?

Summary

Further Reading

Web Design Skill Practical Manual (Detailed Version)

Web Design Skill Practical Manual (Detailed Version)

Before We Start - Understanding What We’re Going to Do

Overall Process Overview

Why “Bare Run” First Before Using Skill?

Tools You’ll Need

Confirm Agent is Ready

If You’re Using Claude Code

If You’re Using OpenCode

Create Project Directory

Create Working Folder

Initialize Git Repository

Create Initial File

Start Local Preview Server

Download web-design-skill

Clone Repository

Bare Run Experience - See AI’s “Native Aesthetics”

Start Agent (Without Loading Skill)

Input Design Requirements

Wait for AI to Generate

Check Result

Save Bare Run Version

Install Skill to Agent

Claude Code - Two Installation Methods

Method A: Write to CLAUDE.md (Recommended, Permanent)

Method B: Reference in Conversation (Temporary)

OpenCode - Installation

Method A: Write to AGENTS.md (Recommended)

Verify Skill is Active

Skill Enhancement - Polish the Premium Feel

Start New Conversation

Input Design Requirements

Phase A: AI Asks Questions

Phase B: AI Explains Design System

Phase C: AI Outputs V0 (Rough Initial Version)

Phase D: Iterative Refinement

Phase E: Final Verification

Save Skill Version

Compare Two Versions

Record as Video (Optional)

Suggested Shots