提示词工程 on Yanmu

web-design-skill 学习笔记

Tue, 26 May 2026 00:00:00 +0800

web-design-skill 学习笔记

Claude Design 是什么？

Claude Design 是 Anthropic 发布的设计工具，发布当天直接导致了 Figma 股价暴跌。

核心理念： 左边打字，右边直接出设计稿（本质上是可运行的网页，不是图片）

与传统设计工具的区别

维度	传统设计工具（如 Figma）	Claude Design
主导者	人在画布上操作，AI 辅助提速	AI 是主要生成者，人负责审核
输出物	设计图/图片	真实可运行的代码
交互方式	手动绘制	文字描述 → 自动生成
版本管理	需手动操作	链接可点击，标签可切版本

本质： Claude Design 更像 Claude Code（设计师版），而不是 AI 版 Figma。

核心提示词拆解（6 大要点）

视频对 Claude Design 泄露的提示词进行了深度拆解，提炼出 6 个核心设计原则：

角色定位 —— 动态身份切换

提示词原文要旨： “你是一个专家设计师，而用户是你的产品经理”

关键洞察：

❌ 不要说"你是一个 AI 助手"
✅ 建立设计师 ↔ 产品经理的协作关系

两个好处：

AI 决策更果断 — 设计师本身应该有判断力，不用事事请示
关键点会来问你 — 因为用户是产品经理，最终由用户拍板

动态身份切换：

做动画 → 动效设计师
做原型 → UX 设计师
做 PPT → Deck 设计师

💡 启示： 很多人的提示词只写一句"你是个前端开发者"就完事了。好的角色定位应该是动态的，根据具体任务灵活切换身份。

工作流 —— 六步流程

`1`	`理解需求 → 探索资源 → 制定计划 → 搭建结构 → 完成验证 → 简要总结`

细节一：提问的艺术（什么时候该问？什么时候直接干？）

问题： 很多 Agent 要么先问你一堆问题，要么啥也不问闷头就干。

Claude Design 的策略：

输入 “帮我做个 PPT” → 先问几个问题（信息不足）
输入 “帮我做个 PPT，全运会马上要用，10 分钟” → 直接开干（紧急场景，信息充分）

💡 启示： 根据上下文的紧迫程度和信息完整度，灵活决定是提问还是执行。

细节二：总结原则

✅ 只说关键注意事项和下一步动作
❌ 不要复述自己已经做了什么

💡 启示： 这个原则可以有效避免 AI 产生大量废话。

去除 AI 味（最有价值的部分）

典型的 AI 生成网页特征：

紫粉蓝渐变背景
大圆角卡片
Emoji 当图标
到处堆砌假数据
左侧彩色边框的圆角卡片
烂大街的字体
无意义的数据和图标堆砌

这就像文章里通篇都是"此外"“值得注意的是"“综上所述"一样，一眼就能闻出来是 AI 写的。

Claude Design 的做法： 列出一份完整的"雷区清单”，逐条告诉 AI 不能走这些老套路。

字体推荐也很讲究：

明确列出千万不能用的字体 + 替代方案
推荐小众但品质很高的字体

色彩系统 —— OKLCH 色彩空间

配色策略优先级：

`1`	`品牌色 → OKLCH 派生颜色 → 绝不凭空编新颜色`

为什么用 OKLCH 而不是 HSL？

	HSL	OKLCH
感知均匀性	❌ 不均匀（同亮度值，黄色比蓝色亮很多）	✅ 均匀
AI 配色效果	数值没问题但看着不舒服	保持亮度和色度不变，只转色相，颜色自然和谐

💡 启示： OKLCH 这个看似很小的细节，能让网页的高级感直接提升一个档次。

内容原则 —— “用 1000 个 NO 换一个 YES”

引用乔布斯经典名言。

AI 做网页的传统毛病： 恨不得把空间全塞满 — Hero、特性、评价、数据、FAQ、联系方式……一股脑全上，但每块都平庸。

Claude Design 的态度：

每个元素都得证明自己为什么应该在那里
如果觉得页面空 → 可能是排版问题，用留白来解决
一个大胆的留白 > 十个凑数的板块

验证机制 —— 子 Agent 检查

原理： 开发完成后，fork 出一个独立的子 Agent 对网页做全面检查。

为什么要独立的子 Agent？

同一个上下文里的 AI 容易"自我感觉良好”
独立的子 Agent 没有"感情包袱"，更容易发现问题

验证内容：

是否有 AI 味特征？
配色是否和谐？
字体是否恰当？
布局是否有创意？

Skill 文件的核心优化

Skill 文件在 Claude Design 提示词的基础上，做了三个关键优化：

先说设计系统再写代码

在开始编码之前，要求 AI 明确列出：

配色方案
字体选择
间距系统
……

为什么？ 如果不说清楚，AI 会默默自己做决定直接写代码。等你看到成品时，如果方向不对只能推翻重来。提前说出来，还没写代码就能纠偏。

尽早输出最小可用版本

要求 AI 先拿出一个带假设和占位符的粗糙 V0 版本
一个粗糙的 V0 > 花几倍时间做出精雕细琢的 V1

为什么？ 如果整个方向都错了，V1 做得再精致也全白干了。

额外补充

补充了更多去除 AI 味的条目
增加了几套经过验证的字体和配色参考对照表
附带 reference 文件（典型代码模板，来源于提示词中的 “copy study the component” 部分）

效果对比演示

测试环境：Cursor + Claude 4.7（有 Skill vs 无 Skill）

太空探索博物馆线上展览页

	无 Skill	有 Skill
配色	青紫粉渐变，典型 AI 霓虹感	OKLCH 定义，接近杂志印刷的深沉色调
字体	比较老套	标题和正文都有特点，技术感十足
布局	标准 Hero + 卡片，教科书式落地页	非传统卡片式，有创意感
动画	有星空和行星动画，但堆砌了大量发光特效	舒适、有创意感
总体	有太空感，缺少创意	像非常有经验的设计师的杰作

独立摄影师个人作品集（极简提示词）

	无 Skill	有 Skill
设计风格	深色背景 + 霓虹发光 + 半透明卡片，老套	虚构了一位北欧摄影师，从头设计完整视觉风格
文案	满满的 AI 感	—
情感表达	摄影师本该有的自由感完全没体现	像在翻一本高端摄影画册
决策策略	直接开干，没问问题	主动提问了配色倾向、核心元素等

最终结论

1
2

无 Skill: 85 分 → 能用、完整、合格
有 Skill: 95 分 → 好看、精致、有风格

Skill 里的每条规则单独看效果不大，但加起来就会产生质变。这就是从"能用"到"好看"、从"完整"到"精致"、从"合格"到"有风格"的差距。

核心知识点速查

#	知识点	一句话总结
1	动态角色定位	根据任务灵活切换 AI 身份，而不是一句"你是前端"了事
2	工作流六步法	理解需求→探索资源→制定计划→搭建结构→完成验证→简要总结
3	提问的艺术	根据信息完整度和紧迫度决定是提问还是直接干
4	去除 AI 味	列出雷区清单，禁用渐变/Emoji/大圆角卡片等老套路
5	OKLCH 配色	感知均匀的色彩空间，比 HSL 更能产生和谐配色
6	内容克制	每个元素都要证明自己存在的理由，大胆留白
7	子 Agent 验证	用独立上下文检查，避免"自我感觉良好"
8	先说设计系统再写代码	提前暴露设计决策，避免方向性错误
9	快速出 V0	粗糙但快速的原型 > 精致但方向错误的成品

Context7指南：让AI编程助手读懂最新文档

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

概述

有没有这种经历：让 AI 写一段代码，它噼里啪啦写完了，一运行报错。或者调用的 API，文档里明明写着有，AI 却说"不存在"。

不是 AI 笨，是它学的东西有保质期——训练数据可能是几个月甚至一年前的，框架早就更新了好几版。

Context7 就是干这个的。它由 Upstash 团队开发，你提问时它去拉最新的官方文档，塞进 AI 的上下文里，让 AI 基于当前版本回答。

用法也简单，提问末尾加一句 use context7 就行。相当于告诉 AI：“别瞎猜，先翻翻最新文档再回我。”

为什么需要它？

💥 一个例子就够了

你想给个人网站加个「回到顶部」按钮——页面往下滑，右下角出现一个按钮，点一下回到最上面。

AI 凭旧知识写出来的是： 先加载一个几十 KB 的第三方库，再写一堆代码去调它。功能做出来了，但为了一个按钮，网页变慢、代码啰嗦。

实际上现在用不着这么麻烦： 浏览器自己就带了平滑滚动和滚动监听，几行代码搞定，不需要任何额外库。

AI 不知道这些，因为它学的是几年前的教材。

加上 use context7 后，Context7 先去查了最新文档，发现原生功能已经够用了。于是 AI 选了更轻量的方案，而不是拿老套路糊弄你。

这就像让朋友帮忙修手机，他凭记忆拆机，记的却是 3 年前的步骤——螺丝位置早变了。动手前先看一眼最新教程，就不会拆坏。

有没有 Context7 的区别

	没有	有
信息来源	AI 脑子里的旧知识，可能过时	实时去官方文档拿最新内容
API 准确性	经常调错或用已经不存在的 API	保证用当前版本的 API
代码质量	可能是两三年前的过时写法	符合最新推荐写法
版本处理	不管版本瞎猜	你说用哪个版本就查哪个版本

🔄 工作原理

操作就几步：

你提问（末尾加 use context7）
    ↓
Context7 认出你问的是哪个代码包
    ↓
去 GitHub、官方文档站扒最新内容
    ↓
筛选出最相关的几段，塞进 AI 的"上下文"
    ↓
AI 拿着最新文档回答你

“上下文"就是你跟 AI 当前对话里它能"看到"的内容。塞文档进去，相当于聊天时在桌上摊开一本参考书，AI 边看边答。

文档从哪来？GitHub 仓库、官方文档站，还有项目维护者写的 llms.txt（一种专门给 AI 看的文档索引文件）。

搜到一堆结果后，Context7 会用 LLM（大语言模型）再做一次智能排序，把最相关的那几段挑出来给你。

两种用法：

方式	说明
MCP 模式（推荐）	装一次，AI 编程助手自动调用。MCP 相当于给 AI 装了个插件，装好了不用管
CLI 手动模式	在终端敲命令手动查文档，适合喜欢折腾的人

核心能力

智能匹配：你说名字，它去找地方

你要问 AI 某个工具怎么用，Context7 得先去网上找到这个工具的最新说明书。但网上叫同一个名字的东西可能有好几个，它得知道你到底说哪个。

一般的名字它能自己认出来。万一名字太常见、容易搞混，就用 谁/什么 的格式精确告诉它：

`1`	`用 /tailwindlabs/tailwindcss 给我的网页加一个导航栏。use context7`

这里的 tailwindlabs 是作者名，tailwindcss 是项目名。就像你搜"苹果”，可能是水果也可能是手机——说清楚就错不了。

支持哪些库

热门的都收录了：React、Next.js、Vue、Tailwind CSS、Express、Prisma、Supabase、TypeScript……完整列表在 context7.com/rankings。

版本感知

不同版本的 API 差别可能很大。直接说版本号，Context7 查对应版本的文档：

1
2
3

用 Vue 3 写一个计数器。use context7
用 Next.js 14 的 Pages Router 写 API 路由。use context7
用 Tailwind CSS v4 配置暗色模式。use context7

你要 iPhone 12 的拆机教程，别人就不会给你拿 iPhone 15 的来。

安装

一键安装

`1`	`npx ctx7 setup`

npx 是 Node.js 自带的命令，不需要额外安装。如果你还没装 Node.js，先去 nodejs.org 下载安装，装完就有 npx 了。

运行后它会：

弹出浏览器让你登录授权（OAuth）
生成一串 API Key（相当于你的"身份凭证"）
自动配置好对应编辑器

三步走完，搞定。

想指定编辑器就加个参数：

1
2
3

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

卸载：npx ctx7 remove

手动配置

自动安装不生效的话，手动加 MCP Server（可以理解为一个帮你查文档的后台服务）：

{
  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "你的API密钥"
      }
    }
  }
}

不同工具的配置文件位置（~ 代表你电脑的用户目录，比如 Windows 上的 C:\Users\你的用户名）：

工具	配置位置
Cursor	Settings → MCP，或 `~/.cursor/mcp.json`
Claude Code	`~/.claude/settings.json`（全局）或 `.claude/settings.json`（项目）
Windsurf	Settings → Cascade → MCP servers
Cline	VS Code 扩展内 MCP Servers → Configure
OpenCode	项目根目录 `opencode.json`

API Key 去 context7.com/dashboard 注册，格式是 ctx7sk...，免费用户也有额度。

✅ 验证

发一条测试：

`1`	`写一个带按钮的计数器网页。use context7`

AI 如果给出的是干净现代的代码，没有加载额外库，说明生效了。

使用方法

基础用法

提问末尾加 use context7：

1
2

写一个简洁的个人简历网页。use context7
写一个倒计时工具，输入秒数开始倒数。use context7

精确指定库

用 /owner/repo 格式跳过名称匹配：

`1`	`用 /tailwindlabs/tailwindcss 给我的网页加一个导航栏。use context7`

库名有歧义时推荐这么用。

指定版本

1
2

用 Bootstrap 4 而不是 5 的写法，写一个卡片布局。use context7
用 Vue 3 的 Composition API 写一个待办事项列表。use context7

组合多个库

`1`	`用 Bootstrap + Font Awesome 做一个图标展示页。use context7`

配置自动触发

不想每次都手打 use context7 的话，在规则文件里配一下：

→ Cursor 在 .cursorrules 里写：

`1`	`当用户提问涉及第三方框架/库的 API 用法时，自动使用 Context7 查询最新文档。`

→ Claude Code 在 CLAUDE.md 里写：

1
2
3

## 文档查询规则
- 涉及第三方库/框架时，先用 Context7 查询最新文档
- 优先基于 Context7 返回的内容生成代码

CLI 命令

如果你只在 AI 对话里用 Context7，这部分可以跳过。CLI 是给喜欢在终端敲命令的人用的。

npm 是 Node.js 自带的包管理器，-g 表示"全局安装"，装一次所有地方都能用。

# 安装 CLI
npm install -g ctx7

# 搜索库
ctx7 library react
ctx7 library nextjs "middleware"

# 获取文档
ctx7 docs /facebook/react "hooks state management"
ctx7 docs /vercel/next.js "middleware authentication"

# Skills 管理
ctx7 skills search        # 搜索可用 Skill
ctx7 skills install       # 安装 Skill
ctx7 skills list          # 查看已安装
ctx7 skills remove        # 卸载

# 认证
ctx7 login                # 登录
ctx7 whoami               # 查看状态
ctx7 logout               # 退出

❓ 常见问题

和 AI 自带的联网搜索有什么区别？

联网搜索搜到的是博客、论坛帖子，质量参差不齐，还得自己判断靠不靠谱。Context7 只从官方文档拿内容，用 LLM 筛选出最相关的片段，给 AI 直接用。

💰 `use context7` 会多花钱吗？

不会。虽然多了一步查文档，但 AI 拿到的信息准了，就不用瞎猜、反复改、写又长又错的代码。整体算下来花的钱（Token 消耗，AI 的计价单位）反而更少。

没收录我用的库怎么办？

去 context7.com 点 “Add Docs” 提交，或者不加 use context7，AI 会退回用自己的知识回答。

装好了但没效果？

逐项排查：

npx ctx7 setup 有没有报错
MCP 配置文件 JSON 格式对不对（多一个逗号都不行）
API Key 是不是有效的（ctx7sk... 开头）
编辑器有没有完全关掉再打开
MCP 列表状态亮绿灯了吗
提问时有没有写 use context7

会影响回答速度吗？

会多等一两秒，但换来答案准了、不用反复改。跑一次报错再修的时间，可比这一两秒长多了。

总结

项目	内容
是什么	为 AI 编程助手提供实时最新文档的平台
解决什么	AI 因训练数据过时而给出错误代码
核心原理	实时拉取官方文档，注入 AI 上下文
安装	`npx ctx7 setup` 一行命令搞定
使用	提示词末尾加 `use context7`
价格	有免费层级，个人够用
官网	context7.com
GitHub	github.com/upstash/context7

装好之后，再也不用担心 AI 拿旧版知识来糊弄你了。

提示词工程 on Yanmu

web-design-skill 学习笔记

web-design-skill 学习笔记

Claude Design 是什么？

与传统设计工具的区别

核心提示词拆解（6 大要点）

角色定位 —— 动态身份切换

工作流 —— 六步流程

细节一：提问的艺术（什么时候该问？什么时候直接干？）

细节二：总结原则

去除 AI 味（最有价值的部分）

色彩系统 —— OKLCH 色彩空间

内容原则 —— “用 1000 个 NO 换一个 YES”

验证机制 —— 子 Agent 检查

Skill 文件的核心优化

先说设计系统再写代码

尽早输出最小可用版本

额外补充

效果对比演示

太空探索博物馆线上展览页

独立摄影师个人作品集（极简提示词）

最终结论

核心知识点速查

相关资源

Context7指南：让AI编程助手读懂最新文档

概述

为什么需要它？

💥 一个例子就够了

有没有 Context7 的区别

🔄 工作原理

核心能力

智能匹配：你说名字，它去找地方

支持哪些库

版本感知

安装

一键安装

手动配置

✅ 验证

使用方法

基础用法

精确指定库

指定版本

组合多个库

配置自动触发

CLI 命令

❓ 常见问题

和 AI 自带的联网搜索有什么区别？

💰 use context7 会多花钱吗？

没收录我用的库怎么办？

装好了但没效果？

会影响回答速度吗？

总结

💰 `use context7` 会多花钱吗？