返回提示词库Back to prompts
语言当前显示中英对照
设计创意design
Website Design System Builder
来自 prompts.chat 开放提示词库的公开模板，适合视觉方向和创意工作。正文保留原文，方便直接复制使用。
An open prompt template from prompts.chat for visual direction and creative work. The original wording is preserved for direct copying.
ChatGPTClaudeGeminiCodex
0 次复制copies·小黑丸整理Curated by XHW
提示词正文Prompt text
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.
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.
使用场景Best used for
适合视觉方向和创意工作，使用前请替换其中的角色、主题和具体约束。
Useful for visual direction and creative work. Replace the role, topic, and constraints before using it.
使用提醒Usage note
这条内容来自 prompts.chat 公开提示词库；说明为中英对照，正文保留来源原文。使用前请检查并按自己的工作场景改写。
Sourced from the prompts.chat public library. Descriptions are bilingual; the prompt preserves the original text. Review and adapt it to your work before use.