Featured image of post Web Design Skill Practical Manual (Detailed Version)
AI Tools

Web Design Skill Practical Manual (Detailed Version)

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:

1
2
3
4
5

# 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:

1

claude

Then input:

1

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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 

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 

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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.

Phase D: Iterative Refinement

Give 1-2 feedback points per round.

Phase E: Final Verification 

1
2
3
4
5
6
7

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:

1
2
3
4
5

# 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 

1
2
3
4
5

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 

1
2
3
4
5
6
7

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 

1
2
3
4

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 

1
2
3
4

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:

  1. Design system first, code second — Wrong direction means wasted code
  2. Rough V0 first, then polish — Quick iteration, lowest cost
  3. Bold whitespace, every element must prove itself — Restraint is premium
comments powered by Disqus