---
title: "Prompt to Turn ChatGPT into an Website Design System Builder"
platform: "Promptally"
canonical_url: "https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-an-website-design-system-builder"
modality: "PROMPT"
category: "Personas, Teachers & Roleplay"
compatible_models: [Universal / Model Agnostic]
access_tier: "Free Public Artifact (No Auth Required)"
license: "MIT"
---

# Prompt to Turn ChatGPT into an Website Design System Builder

**Summary:** Prompt to Turn ChatGPT into an Website Design System Builder is a verified PROMPT blueprint on Promptally in Personas, Teachers & Roleplay optimized for leading AI models. High-performance Prompt to Turn ChatGPT into an Website Design System Builder prompt blueprint. Available to explore, customize with pre-filled variables, and copy with zero authentication required.

## Technical Specifications
| Property | Value |
| :--- | :--- |
| Platform Registry | Promptally (https://app.promptally.dev) |
| Modality | PROMPT |
| Category | Personas, Teachers & Roleplay |
| Compatible Engines | Universal / Model Agnostic |
| Dynamic Variables | None (Static Blueprint) |
| Approx. Token Length | 382 |
| Access Tier | Free Public Artifact (No Auth Required) |
| License | MIT |

### Pre-Filled Template & Production Source

```md
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.
```

## Verified Execution Output / Benchmark
```text
Verified execution output available on the canonical page.
```

## Related Blueprints on Promptally
- [Prompt to Turn ChatGPT into an Networking Engineer Portfolio Website](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-an-networking-engineer-portfolio-website)
- [Prompt to Turn ChatGPT into an Senior Java Backend Engineer Expert](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-an-senior-java-backend-engineer-expert)
- [Prompt to Turn ChatGPT into an UGC-Style TikTok Script Generator for Gen Z Skincare](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-an-ugc-style-tiktok-script-generator-for-gen-z-skincare)
- [Prompt to Turn ChatGPT into an Google Ads Title Copywriter](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-an-google-ads-title-copywriter)
- [Prompt to Turn ChatGPT into an PDF Shareholder Extractor](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-an-pdf-shareholder-extractor)
- [Prompt to Turn ChatGPT into an 3D to 2D Floor Plan Converter](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-an-3d-to-2d-floor-plan-converter)
- [Prompt to Turn ChatGPT into an Mechanical Part Render to Technical Drawing Converter](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-an-mechanical-part-render-to-technical-drawing-converter)
- [Prompt to Turn ChatGPT into an 3D Mechanical Part Image to Technical Drawing Conversion](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-an-3d-mechanical-part-image-to-technical-drawing-conversion)