SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场design-guide

design-guide

设计与创作

查看项目

更新于 10-16 04:24

技能介绍

用途

design-guide 是一个综合设计指南生成器，用于从任意网站提取完整的设计语言。它通过自动化分析颜色、字体排版、动画、交互与 UX 模式，捕获整套设计系统，而不仅是基础 CSS。

适用场景包括：分析网站的完整设计系统；提取交互设计模式（悬停状态、过渡、动画、微交互）；记录组件库（按钮、卡片、表单、导航模式）；创建像素级复刻所需的完整数据；构建设计系统与设计令牌；理解 UX 模式（交互模式、无障碍特性、响应式行为）；对线上网站进行设计逆向工程。

主要能力

视觉设计

  • 颜色与渐变：文本颜色（全部变体）、背景色、边框色、阴影色（从 box-shadow 提取）、线性与径向渐变、含 CSS 自定义属性的完整调色板。
  • 字体排版系统：字体族与回退栈、完整字号比例（所有使用字号）、字重（100-900）、行高、字间距、文本变换、H1-H6 标题层级及精确样式、正文规格。
  • 视觉效果：box-shadow（全部变体）、text-shadow、CSS 滤镜（模糊、亮度、对比度等）、transform 属性、不透明度值、边框圆角值。

交互设计

  • 交互状态：悬停效果（颜色、变换、阴影变化）、聚焦状态、激活状态、过渡属性、悬停前后对比、悬停状态截图。
  • 动画：CSS 过渡（时序、缓动、时长）、关键帧动画、动画元素检测、动画名称与规则。

布局与间距

  • 间距系统：外边距值（排序比例）、内边距值（排序比例）、间隙值（Flexbox/Grid）、完整间距令牌系统。
  • 布局模式：容器最大宽度、居中容器模式、Flexbox 配置、Grid 布局、粘性/固定定位。

组件模式

  • 识别的 UI 组件：按钮（含精确样式）、卡片（背景、阴影、圆角、内边距）、导航栏、表单与输入框、模态框、徽章、提示。
  • 组件文档：每个组件变体的精确 CSS、组件文本内容、视觉层级。

UX 与行为

  • 交互模式：滚动行为、使用的光标样式、交互元素数量、粘性/固定元素模式。
  • 无障碍特性：ARIA 标签数量、ARIA 描述数量、role 属性数量、图片 alt 文本使用情况。

响应式设计

  • 多设备分析：移动端截图（375x812）、平板截图（768x1024）、桌面截图（1920x1080）、各断点的布局指标、视口特定行为。

使用方式

步骤 1：验证环境

进入技能目录：

cd /Users/tchen/projects/mycode/claude-skills/design-guide

首次安装依赖：

uv sync
playwright install chromium

步骤 2：收集需求

向用户询问：URL（必填）、输出目录（可选，默认 ./output）、视口尺寸（可选，默认 1600x1200）。

步骤 3：运行增强提取器

uv run main.py --url <URL> [OPTIONS]

可用选项：

  • --url, -u：要分析的网站 URL（必填）
  • --output, -o：输出目录（默认 ./output）
  • --viewport-width：视口宽度像素（默认 1600）
  • --viewport-height：视口高度像素（默认 1200）

提取过程会：加载页面并等待网络空闲、截取视口与整页截图、提取 HTML 结构、提取全部 CSS（外链与内联）、计算每个元素的样式、捕获交互状态（悬停 10 个元素）、分析完整调色板、提取字体排版系统、分析布局与间距、检测动画与过渡、提取阴影与视觉效果、识别组件模式、分析 UX 模式、测试响应式行为（3 个断点）、保存全部数据并生成设计指南。

步骤 4：查看生成产物

输出目录包含：

  • 文档：design-guide.md（综合设计指南，主要交付物）、design_data.json（完整结构化数据）
  • 视觉资源：viewport_screenshot.png、fullpage_screenshot.png、interactive_hover.png、responsive_mobile.png、responsive_tablet.png、responsive_desktop.png
  • 源码：extracted.html、extracted.css、computed_styles.json

步骤 5：探索设计指南

design-guide.md 包含：视觉资源、颜色系统、字体排版系统、间距与布局、视觉效果、动画与过渡、交互状态、组件模式、UX 模式、响应式设计、实现指南。

步骤 6：分析设计模式

利用提取数据理解设计系统成熟度（间距比例是否一致、字号比例是否定义、组件库、无障碍）与设计决策（颜色选择、排版层级、动画流畅度、阴影深度系统、圆角一致性）。

步骤 7：像素级复刻（进阶）

使用设计令牌（复制 CSS 变量）、匹配字体排版（精确字体栈与字号）、实现间距（遵循提取的间距比例）、应用效果（精确阴影与圆角值）、添加交互（按文档实现悬停/聚焦状态）、测试响应式（匹配各断点布局）、视觉验证（与截图对比）。

步骤 8：使用 Playwright MCP 交互探索（可选）

可导航到特定页面/状态、测试表单交互、触发模态框/下拉菜单、捕获特定 UI 状态、手动测试动画、探索导航流程。

使用示例

基础用法：

uv run main.py --url https://stripe.com

电商网站分析：

uv run main.py --url https://shopify.com --output ./shopify-design

自定义视口：

uv run main.py --url https://github.com --viewport-width 1920 --viewport-height 1080

设计系统提取：

uv run main.py --url https://primer.style --output ./primer-system

多页面分析：

uv run main.py --url https://example.com -o ./design/home
uv run main.py --url https://example.com/product -o ./design/product
uv run main.py --url https://example.com/about -o ./design/about

高级特性

  • 组件模式识别：自动识别按钮（button、[role="button"]、.btn、input[type="button"]）、卡片（[class*="card"]、article、[class*="post"]）、导航（nav、[role="navigation"]、header nav）、表单（input、select、textarea 样式）。
  • 交互状态捕获：悬停前 10 个交互元素，捕获悬停前后计算样式，截取悬停状态截图，在设计指南中记录变化。
  • 响应式测试：自动测试移动端 375x812、平板 768x1024、桌面 1920x1080。
  • 动画检测：扫描所有元素的 CSS 动画，从样式表提取关键帧规则，识别动画元素，记录过渡属性。

适用场景与限制

适合的 URL：首页（综合概览）、营销页面（最佳设计）、组件库（设计系统文档）、登录/注册页（表单模式）。

有挑战的 URL：需认证内容（可能重定向）、动态 SPA（可能需要额外等待）、有激进反爬措施的网站。

性能说明：简单网站提取约 30-60 秒，复杂网站（GitHub、Stripe）约 60-120 秒，包含 3 个断点的响应式测试。输出大小：设计指南 5-20KB，截图总计 500KB-3MB，CSS 文件 10KB-5MB，计算样式 100KB-10MB，设计数据 JSON 50KB-500KB。

成本：本地 Playwright（免费），无外部 API（免费），无需 API 密钥。CPU 中等，内存 500MB-2GB，磁盘每次提取 5-50MB。

故障排查

  • 浏览器未安装：运行 playwright install chromium。
  • 页面加载超时：可在代码中增加超时，部分 SPA 需额外等待，检查网络连接。
  • 缺少交互状态：部分网站阻止鼠标事件，截图可能只捕获前几个悬停，可用 Playwright MCP 手动捕获更多。
  • 设计指南部分为空：页面可能未使用某些特性（动画、阴影等），对极简设计属正常，可查看 design_data.json 原始数据。
  • CSS 的 CORS 错误：外部样式表可能被阻止，工具会提取可访问部分，可查看 extracted.css 完整性，或用浏览器 DevTools 手动检查。

交付物

运行后交付：design-guide.md（主要综合指南）、全部截图（视觉参考）、design_data.json（结构化数据）、源文件（HTML、CSS、计算样式）。可选：复刻的组件、对比分析、令牌库（CSS/SCSS 变量文件）。

技能版本：2.0（增强版 - 完整设计语言提取）；最后更新：2025-11-16；提取深度：综合（11+ 分析类型）。