gszyboy Design Extractor Skill
从任意网站提取设计风格，生成可应用的设计规范。
核心价值
你不需要会设计。看到喜欢的网站，只需要把 URL 给我，我帮你：
- 🔍 分析网站的设计元素
- 📄 生成设计规范文档
- 💻 按规范生成你项目中的代码
⚠️ 前置要求
必须先检查浏览器自动化工具：
- Playwright CLI -
playwright-cli open <url> - Browser MCP -
skill_mcp(mcp_name="browser", tool_name="...") - 其他浏览器工具
如果没有浏览器工具，尝试备选方案：
- 使用
webfetch获取页面 HTML + CSS - 或者建议用户安装 Playwright CLI
Step 1: 提取设计元素
1.1 截图（保留参考）
用 Playwright CLI 截取目标网站截图：
- 桌面端 (1440px) 首页全图
- 移动端 (390px) 可选
playwright-cli open <url>
playwright-cli resize 1440 900
playwright-cli screenshot --filename=desktop.png
playwright-cli resize 390 844
playwright-cli screenshot --filename=mobile.png
playwright-cli close
1.2 提取设计 Tokens
用 playwright-cli eval 执行以下提取脚本：
playwright-cli open <url>
playwright-cli eval "
(function() {
const root = document.documentElement;
const colors = {};
const rootStyles = getComputedStyle(root);
for (const prop of rootStyles) {
if (prop.startsWith('--')) {
const value = rootStyles.getPropertyValue(prop).trim();
if (value && value !== '') {
colors[prop] = value;
}
}
}
const elements = document.querySelectorAll('h1, h2, h3, p, a, button, .btn, .button, header, nav, main, footer, [class*=\"card\"], [class*=\"hero\"], [class*=\"banner\"]');
const sampledColors = [];
const seenColors = new Set();
elements.forEach(el => {
const cs = getComputedStyle(el);
const bg = cs.backgroundColor;
const color = cs.color;
const border = cs.borderColor;
[bg, color, border].forEach(c => {
if (c && c !== 'rgba(0, 0, 0, 0)' && c !== 'transparent' && !seenColors.has(c)) {
seenColors.add(c);
sampledColors.push({ color: c, usage: el.tagName.toLowerCase() });
}
});
});
const fonts = [...new Set([...document.querySelectorAll('*')].slice(0, 500).map(el => getComputedStyle(el).fontFamily))].filter(f => f && !f.includes('system-ui') && f.length < 100);
const spacings = new Set();
[...document.querySelectorAll('section, div[class], main, article, .container')].slice(0, 50).forEach(el => {
const cs = getComputedStyle(el);
const pt = parseFloat(cs.paddingTop);
const pb = parseFloat(cs.paddingBottom);
const pl = parseFloat(cs.paddingLeft);
const pr = parseFloat(cs.paddingRight);
if (pt > 0) spacings.add(pt);
if (pb > 0) spacings.add(pb);
if (pl > 0) spacings.add(pl);
if (pr > 0) spacings.add(pr);
});
const borderRadii = new Set();
[...document.querySelectorAll('button, a, img, .card, input, [class*=\"btn\"]')].slice(0, 30).forEach(el => {
const br = getComputedStyle(el).borderRadius;
if (br && br !== '0px') borderRadii.add(br);
});
const shadows = new Set();
[...document.querySelectorAll('[class*=\"card\"], [class*=\"shadow\"], [class*=\"elevat\"], button, nav')].slice(0, 20).forEach(el => {
const shadow = getComputedStyle(el).boxShadow;
if (shadow && shadow !== 'none' && shadow !== 'initial') {
shadows.add(shadow);
}
});
const typography = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6, p, small, span:not([class])')].slice(0, 50).map(el => {
const cs = getComputedStyle(el);
return {
tag: el.tagName.toLowerCase(),
fontSize: cs.fontSize,
fontWeight: cs.fontWeight,
lineHeight: cs.lineHeight,
fontFamily: cs.fontFamily.split(',')[0].trim(),
color: cs.color
};
});
return JSON.stringify({
cssVariables: colors,
sampledColors: sampledColors.slice(0, 20),
fonts: fonts.slice(0, 10),
spacingSystem: [...spacings].sort((a, b) => a - b).slice(0, 10),
borderRadii: [...borderRadii].sort((a, b) => parseFloat(a) - parseFloat(b)).slice(0, 6),
shadows: [...shadows].slice(0, 6),
typography: typography.filter(t => t.fontWeight !== '400' || t.tag === 'h1' || t.tag === 'p')
}, null, 2);
})()
"
playwright-cli close
1.3 简化颜色提取（快速版）
如果上方脚本太慢，用这个简化版：
// 快速颜色提取
(function() {
const getColor = (el) => {
const cs = getComputedStyle(el);
return {
bg: cs.backgroundColor,
color: cs.color,
border: cs.borderColor,
shadow: cs.boxShadow
};
};
const samples = [];
document.querySelectorAll('header, nav, main, section, footer, .hero, .card, button').forEach((el, i) => {
if (i > 30) return;
const c = getColor(el);
if (c.bg !== 'rgba(0, 0, 0, 0)' && c.bg !== 'transparent') samples.push({type: 'bg', ...c});
if (c.color !== 'rgb(0, 0, 0)') samples.push({type: 'text', ...c});
});
// 去重
const unique = [];
const seen = new Set();
samples.forEach(s => {
const key = s.color;
if (!seen.has(key)) {
seen.add(key);
unique.push(s);
}
});
return JSON.stringify(unique.slice(0, 15), null, 2);
})();
Step 2: 生成设计规范
根据提取的数据，生成 DESIGN.md 格式的规范：
# Design System: [网站名]
## 1. Visual Theme & Atmosphere
[描述整体感觉：专业/简约/活泼/暗色系等]
## 2. Color Palette
[用提取的实际颜色，按语义命名]
- Primary: #xxx
- Secondary: #xxx
- Background: #xxx
- Text: #xxx
- Accent: #xxx
## 3. Typography
[提取的字体 + 层级]
- 标题: [font] - [size]/[weight]
- 正文: [font] - [size]/[weight]
## 4. Spacing System
[间距比例: 4px / 8px / 16px / 24px / 32px / 48px / 64px]
## 5. Component Stylings
[按钮/卡片等的样子]
- 按钮: border-radius: X, padding: X, shadow: X
- 卡片: border-radius: X, padding: X, shadow: X
## 6. Border Radius
[圆角比例: sm / md / lg / xl]
## 7. Shadows
[阴影层级]
Step 3: 生成可应用的代码
根据提取的设计规范，生成可直接使用的 CSS/Tailwind 代码片段：
Tailwind 配置
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#HEX值',
secondary: '#HEX值',
},
borderRadius: {
'sm': 'Xpx',
'md': 'Xpx',
},
boxShadow: {
'card': 'X X X rgba(0,0,0,X)',
}
}
}
}
CSS 变量
:root {
--color-primary: #HEX值;
--color-secondary: #HEX值;
--spacing-base: Xpx;
--radius-sm: Xpx;
--radius-md: Xpx;
--shadow-card: X X X rgba(0,0,0,X);
}
Step 4: 询问应用场景
生成规范后，主动问用户：
✅ 设计规范已提取！
📐 [网站名] 设计风格：
- 主色: #HEX
- 字体: Font Family
- 间距基准: Xpx
- 圆角: Xpx
- 阴影: ...
你想把这个风格用到哪里？
1. 我的登录页面
2. 我的仪表盘
3. 我的卡片组件
4. [告诉我你想做哪个页面/组件]
输出格式
完整输出示例
✅ 设计分析完成！
📐 设计规范: [网站名]
━━━━━━━━━━━━━━━━━━━━━━
🎨 颜色
Primary: #HEX (主按钮、重点元素)
Secondary: #HEX (次要元素)
Background: #HEX (背景)
Text: #HEX (正文)
Muted: #HEX (辅助文字)
Border: #HEX (边框)
🔤 字体
标题: "Font Name", sans-serif
正文: "Font Name", sans-serif
代码: "JetBrains Mono", monospace
📏 间距系统
4px / 8px / 16px / 24px / 32px / 48px
🎯 圆角
sm: 4px | md: 8px | lg: 12px | xl: 16px
🌫 阴影
sm: 0 1px 2px rgba(...)
md: 0 4px 6px rgba(...)
lg: 0 10px 15px rgba(...)
━━━━━━━━━━━━━━━━━━━━━━
已生成可直接使用的代码片段：
• tailwind.config.js 颜色/圆角/阴影扩展
• CSS 变量文件 (design-tokens.css)
你想把这个风格用到哪个页面/组件？
注意事项
- 不需要完整克隆：只提取风格元素，不复制内容
- 生成的是可应用代码：不是参考图，是可以直接用的 CSS/Tailwind
- 渐进式使用：可以只用在某个组件，不需要整个项目
- 如有多处使用：可以导出为全局 CSS 变量或 Tailwind 扩展
适用场景
✅ 你看到喜欢的网站，想用它的风格做自己的页面 ✅ 你不会配色，让 AI 帮你参考优秀网站的配色 ✅ 你想学某个网站是怎么设计的，但它没有开源 ✅ 你有多个网站想统一设计风格