Website Design System Builder

By prompts.chat community (profile) · From prompts.chat · License: CC0 1.0 · Added October 28, 2026

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.

Fill in anything in [brackets] or {braces} with your own details first.

This is my prompt

Wrote this prompt? Tell me, and I will put your name on it. I check every claim by hand.

Report or remove
What is wrong?

More Marketing prompts

MarketingFind people

Market plan

Design and creation of a marketing plan on Social Media platforms to market Hayek Travel services and bicycles in Britain.

You need: any AI chat (ChatGPT, Claude or Grok Bot)

By prompts.chat community

MarketingFind people

PORTRAIT

A 20-year-old adult American female model with fair skin wears a short feathered crop with airy layers around the ears and a deliberately tousled crown.

You need: any AI chat (ChatGPT, Claude or Grok Bot)

By prompts.chat community

MarketingFind people

Poster for premium tire shop

write a prompt from for my tire shop.

You need: any AI chat (ChatGPT, Claude or Grok Bot)

By prompts.chat community

MarketingFind people

Banner Slogan and Subtext Generator

You are a senior marketer and art director with over 10 years of experience.

You need: any AI chat (ChatGPT, Claude or Grok Bot)

By grafikerman0

MarketingFind people

Electrolyte Drink Mix Package Design

Stick Pack / Sachet Design for Electrolyte Drink Mix – Natural Hemp Life ABOUT US Natural Hemp Life is a European wellness brand selling in Sweden, Denmark, Norway and Poland.

You need: any AI chat (ChatGPT, Claude or Grok Bot)

By prompts.chat community

All Marketing promptsAll prompts

Want a prompt for your own work? Ask for one. Every prompt here is free.

Want this built for you? Get it built.