Web Design 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

Web Design 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