Prompt Engineering on Yanmu

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

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

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

Overview

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

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

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

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

Why Do You Need It?

💥 One Example Is Enough

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

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

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

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

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

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

With vs Without Context7

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

🔄 How It Works

Just a few steps:

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

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

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

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

Two ways to use it:

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

Core Capabilities

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

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

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

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

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

Supported Libraries

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

Version Awareness

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

1
2
3

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

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

Installation

One-Click Install

`1`	`npx ctx7 setup`

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

Running it will:

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

Three steps and you’re done.

To specify an editor, add a parameter:

1
2
3

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

Uninstall: npx ctx7 remove

Manual Configuration

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

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

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

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

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

✅ Verification

Send a test:

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

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

Usage

Basic Usage

Add use context7 at the end of your prompt:

1
2

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

Specify a Library Precisely

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

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

Recommended when the library name is ambiguous.

Specify a Version

1
2

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

Combine Multiple Libraries

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

Configure Auto-Trigger

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

→ Cursor in .cursorrules:

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

→ Claude Code in CLAUDE.md:

1
2
3

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

CLI Commands

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

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

# Install CLI
npm install -g ctx7

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

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

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

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

❓ FAQ

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

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

💰 Will `use context7` cost more?

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

What if my library isn’t listed?

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

I installed it but it doesn’t work?

Check these one by one:

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

Does it affect response speed?

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

Summary

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

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

Prompt Engineering on Yanmu

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

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

Overview

Why Do You Need It?

💥 One Example Is Enough

With vs Without Context7

🔄 How It Works

Core Capabilities

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

Supported Libraries

Version Awareness

Installation

One-Click Install

Manual Configuration

✅ Verification

Usage

Basic Usage

Specify a Library Precisely

Specify a Version

Combine Multiple Libraries

Configure Auto-Trigger

CLI Commands

❓ FAQ

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

💰 Will use context7 cost more?

What if my library isn’t listed?

I installed it but it doesn’t work?

Does it affect response speed?

Summary

💰 Will `use context7` cost more?