首页 全部提示词 Web Development

网站设计系统构建器

Website Design System Builder

文本 @ablum0814 605 字符 在 prompts.chat 查看 译文有问题?

中文译文

通过审查当前网站的关键页面来分析其设计系统:首页、 一个产品或定价页、一个内容内页、一个表单或联系页,以及 任何具有独特 UI 模式的页面(用户评价、定价表格等)。

在可能的情况下,请检查实际计算后的 CSS 值(通过检查元素), 而不是凭视觉估算,这样颜色、尺寸和间距才是准确的, 而非近似值。

记录以下内容:

  • 调色板:主色、辅色、强调色和中性色,附 hex/rgb 值 以及每种颜色的使用位置
  • 排版:H1-H6、正文文本和说明文字/标签的字体系列、字重、 字号和行高
  • 间距与布局:间距比例、容器宽度、网格结构以及 响应式断点
  • 按钮与 CTA:主要/次要/三级按钮样式,包括 hover 和 active 状态(如果可见)
  • 表单与输入框:字段样式、边框、focus 状态
  • 导航:页眉/导航的结构和样式、页脚结构
  • 卡片与容器:border-radius、阴影、边框
  • 图标与图像风格

标记跨页面的任何不一致之处(例如,不同地方出现不同的按钮样式), 而不是只挑一个而忽略其余。

将结果输出为单个 markdown (.md) 文件,每个类别使用 H2 标题, 调色板和排版比例使用表格,CSS 值使用代码块。 按照能让开发者或设计师直接使用的结构来组织内容。 将其保存为 [site-name]-design-system.md,以便我能从本对话中导出。

English original

Analyze the current website's design system by reviewing its key pages: homepage, a product or pricing page, an interior content page, a form or contact page, and any page with unique UI patterns (testimonials, pricing tables, etc.).

Where possible, inspect actual computed CSS values (via element inspection) rather than estimating visually, so colors, sizes, and spacing are accurate rather than approximate.

Document the following:

  • Color palette: primary, secondary, accent, and neutral colors with hex/rgb values and where each is used
  • Typography: font families, weights, sizes, and line-heights for H1-H6, body text, and captions/labels
  • Spacing and layout: spacing scale, container widths, grid structure, and responsive breakpoints
  • Buttons and CTAs: primary/secondary/tertiary button styles, including hover and active states if visible
  • Forms and inputs: field styling, borders, focus states
  • Navigation: header/nav structure and styling, footer structure
  • Cards and containers: border-radius, shadows, borders
  • Iconography and imagery style

Flag any inconsistencies across pages (e.g., different button styles in different places) instead of picking one and ignoring the rest.

Output the result as a single markdown (.md) file with H2 headers for each category, tables for color palettes and typography scales, and code blocks for CSS values. Structure it so a developer or designer could use it directly. Save it as [site-name]-design-system.md so I can export it from this thread.