Pull a style guide from a website screenshot

Get the colors, type, spacing and button styles from a screenshot as a simple style guide.

You'll attach

Needs screenshot

Works with

ChatGPTClaudeGeminiGrokCopilot

How to use it

1. Open chatgpt.com or claude.ai (or another AI listed here).
2. Attach the screenshot (or paste it straight into the chat).
3. Copy the prompt, paste it into the chat and send.
4. Use a color picker on the real page to confirm exact HEX values.

Look at the attached screenshot of a website or app.

Write a style guide from what you can see:
1. Colors: list each one with its role (background, text, primary button, accent) and your best HEX estimate. Say they are estimates from the image.
2. Type: heading and body style (serif or sans, weight, rough size relationship), and fonts it looks similar to.
3. Spacing and layout: grid, margins, how much space between sections.
4. Components: buttons, cards, inputs, nav. Describe shape, borders, shadows and states you can see.
5. Tone of voice from the copy.

Then give the colors and type as CSS variables I can start from.