跳到主要内容
一个网站设计系统提取提示词:把任意网站的设计规范导出成 markdown
景行景行

一个网站设计系统提取提示词:把任意网站的设计规范导出成 markdown

来源:prompts.chat 发布时间:2026-09-12

一个网站设计系统提取提示词。

你把它复制到 Claude Chrome 浏览器扩展里,它会分析当前网站的设计系统,导出成一个 markdown 文件。

分析哪些页面:

  • 首页
  • 产品页或定价页
  • 内容内页
  • 表单或联系页
  • 有独特 UI 模式的页面

文档化什么:

  • 色彩:主色、辅色、强调色、中性色,带 hex/rgb
  • 字体:字体族、字重、字号、行高,H1-H6、正文、说明
  • 间距和布局:间距刻度、容器宽度、网格、断点
  • 按钮和 CTA:主/次/三级样式,含 hover 和 active
  • 表单和输入:字段样式、边框、焦点状态
  • 导航:页头/导航、页脚
  • 卡片和容器:圆角、阴影、边框
  • 图标和图像风格

它的特别之处:要求用实际计算的 CSS 值(通过元素检查),不是视觉估算,所以颜色、尺寸、间距是准确的。还会标记跨页面的不一致,不挑一个忽略其他。

适合谁:

  • 做项目主页、工具界面、需要参考现有设计的科研小组成员
  • 想快速提取一个网站设计系统的人
  • 需要设计规范文档、但不想手动整理的人

用法: 把这段提示词复制到 Claude Chrome 浏览器扩展里,打开目标网站,让它分析。

提示词

分析当前网站的设计系统,检查这些关键页面:首页、产品页或定价页、内容内页、表单或联系页,以及任何有独特 UI 模式的页面(用户评价、定价表等)。

尽可能检查实际计算的 CSS 值(通过元素检查),而不是视觉估算,这样颜色、尺寸、间距才是准确的,不是近似的。

文档化以下内容:

- 色彩:主色、辅色、强调色、中性色,带 hex/rgb 值和各自用在哪
- 字体:字体族、字重、字号、行高,覆盖 H1-H6、正文、说明文字/标签
- 间距和布局:间距刻度、容器宽度、网格结构、响应式断点
- 按钮和 CTA:主/次/三级按钮样式,包含可见的 hover 和 active 状态
- 表单和输入:字段样式、边框、焦点状态
- 导航:页头/导航结构和样式、页脚结构
- 卡片和容器:圆角、阴影、边框
- 图标和图像风格

标记跨页面的不一致(比如不同地方按钮样式不同),不要挑一个忽略其他。

输出结果为一个单独的 markdown(.md)文件,每个类别用 H2 标题,色板和字阶用表格,CSS 值用代码块。结构要让开发者或设计师能直接使用。保存为 [site-name]-design-system.md,方便我从这个对话里导出。

评论 0

更多

登录后可点赞、收藏、评论和举报。

还没有评论,先发起一个具体问题。

0/2000