Featured image of post Web Design Skill Learning Notes
AI Tools

Web Design Skill Learning Notes

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:

  1. AI makes decisions more decisively โ€” Designers should have judgment, no need to ask about everything
  2. 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
comments powered by Disqus