Agent Skills
返回列表
设计规范提取器

设计规范提取器

设计多媒体 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_5b12983f/design-spec-extractor。

技能介绍

解决什么问题

当工程师拿到 UI 截图、网页链接或一组页面稿时，常见难点不是“看没看懂”，而是难以把视觉判断沉淀为可复用规则：#1D4ED8 是主色还是强调色？16px 间距是组件内边距还是栅格槽？字体是 Inter 还是系统默认？

design-spec-extractor 的目标是把设计证据整理成结构化规范，而不是输出泛泛的风格评价。它适合用于设计评审前、前端组件化前、设计系统文档化时，将零散视觉信息转成可交付对象。

如何工作

技能先识别输入类型：本地图片、图片 URL、网页 URL 或多来源组合。对网页链接，若运行环境可用，会采集截图与 computed styles；不可用时退化为 HTML/CSS 线索提取。

分析按六个维度进行：

  • 视觉风格：判断调性、关键特征与适用场景
  • 配色体系：提取主色、辅助色、功能色、背景、文本与边框色
  • 字体排版：字号、字重、行高、对齐，低置信度时输出候选字体
  • 布局间距：栅格、容器宽度、模块间距、响应式倾向
  • 组件模式：按钮、卡片、导航、表格、空状态等
  • 设计原理：把现象上升为一致性、层级、品牌目标等结论

最终可生成 analysis.json、design_spec.md、design_spec.html，必要时输出 design_spec.pptx。脚本默认会保留源图或网页预览，方便回溯证据。

适用边界

该技能不用于法律规范、普通照片审美评价，也不替代 design-to-code。如果设计稿过糊、网页需登录、动态内容抓取失败，应优先补截图；如果只给局部组件，只能输出局部规范，不能冒充完整设计系统。

使用场景

  • 评审前把一张 UI 截图整理成配色、字体、间距和布局规范，便于团队确认视觉口径。
  • 把网页链接转成在线 HTML 设计规范文档，供前端和设计查看主色、栅格与组件样式。
  • 将多张后台页面稿归纳为公共设计语言与差异项，形成设计系统文档和评审 PPT。
  • 前端组件化前提取按钮、卡片、导航等组件的圆角、阴影、边框和状态规律，减少样式返工。

适合人员

  • 负责设计评审的前端工程师，需要把设计稿证据转成可复核的样式规范。
  • 搭建组件库的 UI 工程师，需要提取配色、字体、间距和组件规律，统一组件实现。
  • 整理交付物的产品经理，需要把网页或截图变成设计系统文档和汇报 PPT。
  • 接手旧项目的视觉设计师，需要从截图和页面链接中补齐缺失的设计规范。