看网站配色超棒？AI 三步帮你全部提取走！
看到这个网站的配色超好看？3步复制走！
做设计的时候，有没有遇到过这种情况——刷到一个网站，颜色搭配绝了，字体组合也舒服，但就是不知道怎么”偷”过来？
以前你可能只能截图下来，凭感觉目测。但现在，AI 直接帮你把设计元素全部扒出来，连 hex 色值都不放过。
这技能干嘛的？
Inspiration Analyzer 是一个专门帮设计师「解析网站设计」的 AI Skill。你扔给它一个 URL，它会：
- 用浏览器打开网页截图
- 提取主色调、辅助色、背景色、强调色的 Hex 色值
- 识别字体（Google Fonts 直接读源码）
- 分析栅格布局、间距、留白
- 拆解按钮、卡片、导航的样式
- 生成一份结构化的「设计元素清单」
谁用得上？
这几个场景特别爽：
- UI/UX 设计师：参考竞品网站，把对方的配色和字体直接为己所用
- 前端开发：拿到设计系统参数，不用反复猜颜色代码
- 设计系统搭建者：收集多个网站的设计语言，整理成自己的 design token
怎么用？
在 Claude Code 里直接说：
Analyze [https://example.com] for design inspiration
它会自动打开浏览器、截图、提取元素，输出这样的报告：
- 色板（Primary #xxx、Secondary #xxx…）
- 字体（Headlines 用 Inter Bold、Body 用 Inter Regular）
- 布局（12 栏栅格、间距 24px、段落宽度 720px）
- 组件（按钮圆角 8px、卡片有 shadow-md…）
分析完还可以让 AI 同时看多个网站，最后给你总结共性和差异，直接指导你做自己的设计。
支持多少平台？
OpenClaw、Claude Code、Codex CLI、Cursor、Windsurf…基本主流 AI 编程工具都支持，GitHub 上 2.7k Stars，口碑不错。
如果你经常需要”参考别人家的设计”，这个技能值得收藏。
GitHub：https://github.com/davepoon/buildwithclaude
评论区
0 条评论
登录后可评论。