Skill 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 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

Skill 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 In-Depth Guide: Installation, Configuration, and Advanced Techniques for the Open-Source Claude Code

📋 Table of Contents

1. What is OpenCode?

Comparison with Claude Code

Core Positioning

2. Four Installation Forms

⭐ 1. Command Line Version (Primary Recommendation)

2. Desktop Client (Beta)

3. VS Code Plugin Version

4. Cloud Runtime Environment (GitHub Actions)

`/init` — Project Knowledge Initialization

`/compact` — Context Compression