AI Tools on Yanmu

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

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!

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!

AI Tools on Yanmu

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

Appendix A: Common Prompt Templates

Ask AI to Explain Design System First

Request Quick V0

Trigger Full Verification

Final Summary

Web Design Skill Learning Notes

Web Design Skill Learning Notes

What is Claude Design?

Differences from Traditional Design Tools

Core Prompt Breakdown (6 Key Points)

Role Positioning — Dynamic Identity Switching

Workflow — Six-Step Process

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

Detail 2: Summary Principles

Removing AI-Style (Most Valuable Part)

Color System — OKLCH Color Space

Content Principles — “1000 NOs for One YES”

Verification Mechanism — Sub-Agent Check

Core Optimizations of Skill File

Design System First, Code Later

Output Minimum Viable Version Early

Additional Supplements

Effect Comparison Demo

Space Exploration Museum Online Exhibition Page

Independent Photographer Portfolio (Minimal Prompt)

Final Conclusion

Core Knowledge Quick Reference

Related Resources

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

📋 Table of Contents

1. What is the opencode-obsidian Plugin?

2. Environment Preparation

3. Installing the BRAT Plugin

Step 1: Open Community Plugin Marketplace

Step 2: Search and Install BRAT

4. Installing opencode-obsidian via BRAT

Step 1: Open BRAT Settings

Step 2: Add Beta Plugin

1. Use `/compact` to Save Context

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