一个网站设计系统提取提示词:把任意网站的设计规范导出成 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
更多
登录后可点赞、收藏、评论和举报。
还没有评论,先发起一个具体问题。