Claude Design's System Prompt Leaked: The Essential Lessons

English | Chinese Original

Date: 2026-07-22

Two days ago I saw someone sorting out Claude Design's system prompt words.

The warehouse is called Trystan-SA/claude-design-system-prompt

I took the time to read it over.

Although Company A is too xxx, it does not prevent us from studying its products. The main focus is to steam them.

After I read it, I had a deep feeling. It seems that even the shit companies like Company A are tortured by the AI flavor. Basically, everyone’s AI flavor is written down in it.

Even the recently popular off-white base + serif headline + clay color has been included in the prohibited list, saying that this thing is last year’s purple gradient. . . . . . That's it.

I guess everyone has been tortured by this AI flavor recently.

But what makes me wonder is, if you use prompt to remove the AI flavor, will it become an AI flavor again?

To be honest, there is no need to post all 647 lines of prompt.

Most people won't read it line by line.

I picked out some details that I think are good and let you go through them.

This prompt basically explains clearly why AI design smells like AI.

▲ GitHub warehouse homepage, screenshot taken on July 7, 2026

This prompt is forcing Claude to stop messing around. Don’t add random content.

Don't use the default template.

Don’t think of static images as prototypes.

Don’t make the page look like the webmaster’s site right from the start (the entire page is full and the layers are not clear)

---

The first thing: identity and responsibilities

▲ claude/system-prompt.md L1-L19

At the beginning, there comes a summary sentence:

You are not a code generator who happens to make designs. You are a designer who happens to use code.

Claude should regard himself as an expert designer. The user is its manager.

Unless otherwise specified by the user, Claude delivers by default in HTML, CSS, SVG and JavaScript.

But L5 specifically emphasizes: HTML is just a tool. What you do specifically depends on the manager. You have to become whatever the manager wants you to be, such as UX designer, slide designer, prototype designer, animator, and brand designer.

L7 What does this sentence mean?

Generic AI aesthetics are a failure mode, not a default.

What it says is that if it can be seen at a glance that it is a general-purpose AI aesthetic generated by AI in batches, it is a failed design. This kind of design cannot be regarded as the default solution.

Then there is the general outline of the full text (L11):

You are not a code generator who happens to make designs. You are a designer who happens to use code.

You are not a code-generating AI who happens to do design, you are a designer who happens to work with code.

(What a role reversal)

What's the difference between these two? The original text explains three levels of meaning.

The code-generating AI produces decent-looking output that fills up the page. The designer will first ask what this page is for, what should the user pay attention to at first glance, and what can be eliminated directly.

The AI that generates code can easily copy the popular gradients, fonts, and cards; while designers will first determine the rules for colors, fonts, spacing, components, etc., and then the entire design will follow this set of rules.

The AI that generates code will mechanically meet user needs: when the user says to add a module, it will be added; and if the designer finds that adding something will destroy the work, he should explain the reasons and raise objections.

In other words, the first thing Claude Design did was to get Claude out of his role as a front-end developer.

You will incorporate designer judgment into every work. You have your own opinions, but you also respect your users because they are your managers and they know their audience and goals better than you do.

Second thing: workflow

▲Original text L21-L60

Many AIs like to ask questions. For example, they usually ask:

What is the background of the project? Who are the target users? What is brand tone? What style do you like? How many plans are needed? Do you want dark mode?

It sounds like the AI is seriously asking the user for some design solutions, but in fact the user often just wants to make it move first without asking too many questions.

The original text here stipulates:Only ask questions whose answers may change the design. If the needs are unclear, the brand is missing, and whether to do multiple sets of directions, you can ask the user about these.

Claude can choose to change the button style, change the default value, or make two similar layouts. He only needs to mention it when delivering it to users.

There is another sentence that I think is very practical:

Build a skeleton, show it early.

You need to build a framework and then show it off as early as possible. The scariest thing is to finish 15 pages of design in the background at once, and then realize that the direction was wrong from the beginning.

The later a design problem is discovered, the higher the cost. LLM is especially prone to this problem because it doesn't feel sorry for how much work it has done in vain. . . You won’t worry about how many tokens you have consumed. . .

Third thing: don’t add stuff just to fill up the page

▲Original text L88-L120

Chapter 5 is called No filler.

This is the chapter in the entire text that deserves to be nailed to the pillar of shame for all AI front-end writers.

LLM has an old problem when creating pages, that is, some people like to add them randomly.** When the material is not enough, it starts to make up its own brain.

▲ Go through these five questions for each page element

Therefore, L90 stipulates that every element on the page must clearly explain why it appears on the page.

These elements either convey necessary information, serve to drive content, or assume visual structure.

If none of the three requirements are met, get rid of it directly.

The fourth thing: AI-flavored blacklist

This section is the most enjoyable section I have ever watched.

The original article directly made a blacklist for AI Weier.

▲Original text L122-L178

▲ Five things directly named by Prompt are stuffed into one page

For large gradients of three or more colors, do not use them by default.

Rainbow, neon and neon are basically the template of AI flavor.

If you really want to use gradients, use the same color system, low contrast, and two color scales.

The same goes for emojis.

If the emoji is used for the sake of emoji in front of the title, such as adding 🚀, 📈, or ✅, this can be eliminated directly.

(I remember that many LLM outputs will directly add ✅ this kind of emoji)

Cards cannot escape the fate of being named;

Normal content does not require border-radius: 12px plus border-left: 4px solid.

The status color bar on the left should be reserved for reminders, warnings, and status.

Use it to cover the page, which is a standard AI SaaS template.

There is also a template that is very popular these days: a cream background, a large serif title, an italicized word in the title, and a terracotta or amber color scheme.

Have you been infected?

▲ This combination is probably: cream base, serif headline, italic words in the title, and then use clay or amber for emphasis

Hey guys, after the blue-purple gradient was scolded, cream took over. This set can be used in magazines, hotels, and portfolios, no problem.

But if you have to use it in developer tools, enterprise backend, finance, medical and other fields, what is this?

(I did think this style should be used in magazines, portfolios, and even wedding photography...)

The fifth thing: visual structure

▲ Original L180-L250

This section can be said to directly tie up Claude and whip him.

How much space should be left between the cards, how much should be left inside the buttons, and how big should the title be? Claude had to follow it respectfully.

For example, leave 17px blank at the top, 19px at the bottom, and another 23px appears when you change the card.

Each card size is fine if used individually, but if used randomly, it will become a mess.

The original text requires that the spacing be chosen from multiples of 4px or 8px, 8, 16, 24, or 32 are all acceptable.

The font is the same. The main text is fixed at 16 px, the description text is fixed at 14 px, and the title is selected from 24, 30, and 36. Don’t use 19 px one moment and 21 px the next.

Later, you can copy a card, add a form, and just use the previous style.

▲ The same content is used on the left and right. On the right, only the font size, grayscale, white space and button style have been changed

visual hierarchy in the original text refers to what users can see first after opening the page.

If the title, description, and buttons are about the same size, and the two buttons are the same color, there is no obvious sense of hierarchy, and the user’s focus will not know where to focus first.

But if you increase the font size of the title, leaving only a blue main button, and change the document view to a normal entrance, the sense of hierarchy will come into being: read the title first, then the description, and then decide whether to click the button.

rhythm controls whether the page layout can maintain unity when the page is scrolled down.

Suppose the page introduces three functions in a row. Place the text on the left side of the first paragraph and the screenshot on the right side. This should remain the same when scrolling to the next page.

After the three functions are introduced and the page starts talking about business cases such as prices, change the background or layout.

This makes it easier for users to see that the content has reached the next part.

Things Six: Interaction and Feedback

▲Original text L352-L410

Chapter 11 is about interactive feedback.

For a button, prepare at least five different styles: default, hover, active, focus, and disabled.

If it will send the request, another Loading is required. . .

Chapter 12 talks about a very small thing: don’t make users guess.

There should be only one most important button on a page. AI can easily turn the page into an exhibition of buttons: get started, schedule a demo, view documents, learn about prices, and contact us, all made big and bright.

As a result, the user scanned around and there was only one question left in his mind: Which one should I order?

Finally a 5 second test was given.

Show the page to the user, let him watch it for five seconds, then close the page and ask him where he should click.

He couldn't tell, basically this design could be killed directly.

The seventh thing: components are assets

▲Original text L412-L449

There is a sentence in the original text:

Design components, not pages.

This sentence can easily sound abstract.

Translated into human words: first make reusable components, and then use these components to fill the page.

▲ Header, Hero, FeatureCards, CTA, Footer, these are probably the locations on the page

An ordinary product page can often be broken down into top navigation, main area on the first screen, function cards, action button area and bottom information.

Drawing buttons again on every page is not called a design system, that is called Crusu.

The button must have primary, secondary, ghost, size, icon and loading.

The same goes for cards, input boxes, pop-up windows, and table rows.

Spacing, colors, fonts, rounded corners, shadows, these should all be reusable.

Only by doing this can the things delivered by the model be reusable and scalable.

Only other people can take this set and continue to reuse it.

The eighth thing: don’t use HTML to string together a few static images

▲Original text L451-L489

Chapter 14: Don’t remake Figma using HTML.

Suppose Claude is designing a registration page.

After the user fills in the email address and clicks continue, if the email address is entered incorrectly, an error will be displayed below the input box. After completion, the page will proceed to the next step. This is a real business event.

Although Figma can be used to draw interfaces, make design drafts, and create clickable demonstration prototypes, real business events will not occur in Figma.

Thing 9: You don’t need too many features

▲Original text L491-L563

For example, if a user wants to perform five functions, Claude can easily build five empty shells first, and the construction speed is very fast.

The original text requires it to first find the three most important ones and complete the entry, operation, error status and final result.

For example, during checkout, users must be able to fill in their address, select a payment method, and submit an order. There must be loading during the payment process. If an error is filled in, an error will be displayed. Success or failure can also jump to the relevant results page.

There is no rush to add features such as coupons, membership points, and inviting friends.

If users really want multiple plans, the difference must also lie in layout, content order, or interaction.

Changing the blue button to purple cannot be considered a second solution.

Thing 10: Another Agent faults

▲Original text L565-L598

Chapter 18 requires Claude to submit the page to verifier for inspection every time he completes an obvious visual modification.

(verifier is another Agent, responsible for verification and error detection)

This verifier is not responsible for redesign. It takes a screenshot, looks at the layout, walks through the page with the keyboard, and checks the JavaScript for errors.

If you find that the input box has no label, the button contrast is too low, and the focus is invisible, problems will arise. After the main Agent has been modified, check again.

The following polish-pass will call over four agents responsible for checking to check whether there are visual obstructions, AI template smells, page levels, and interaction status.

This is more like division of labor and acceptance. The agent who makes the page is responsible for modifying the page, and the inspection agent only looks for visual defects.

Available skills: How to use 14 tools

The last chapter lists 14 skills.

▲Original text L600-L647

Available skills is a list of tools to use:

After Claude receives the task, he does not need to read all 14 instructions. It first determines what to do now, and then opens the corresponding skill.

To make a page from scratch, you will use discovery-questions, frontend-aesthetic-direction, wireframe and make-a-prototype.

First, based on the materials provided by the user, then ask for missing information; determine the font, color and page density; draw a wireframe; and finally make an interactive prototype.

If the user already has a website or branding system, Claude will first use design-system-extract to clarify color, font, spacing, and component rules.

When you need to organize existing pages into a set of reusable components, use component-extract to separate buttons, cards and forms; then use generate-variations to give different solutions. When you need to adjust parameters on site, add make-tweakable.

To make a slideshow, call make-a-deck separately.

The remaining five are responsible for inspection.

accessibility-audit will check the contrast, keyboard and label logo; ai-slop-check will check the gradient, emoji and template flavor; hierarchy-rhythm-review will first look at where the page should start; interaction-states-pass will check the interactions of hover, focus, loading and disabled.

polish-pass will run through the first four items together, collect problems, and check again after repairing them.

So make a page from scratch, probably in this order:

discovery-questions
→ frontend-aesthetic-direction
→ wireframe
→ make-a-prototype
→ polish-pass

If you already have a brand and ready-made page, another route will be used:

design-system-extract
→ generate-variations
→ make-tweakable
→ polish-pass

Available skills are only responsible for telling Claude which operating manual to open. The specific instructions on how to ask, how to draw, and how to check are all written in the corresponding skill file.

---

After reading it, I feel that what Claude Design does is a bit routine.

First read through the screenshots, brand manual and code provided by the user, and then ask your manager if there is anything missing. First determine the direction, draw the skeleton, and fix any mistakes in time.

After the page is designed, every element on the page must be explained: where to click the button, where the numbers come from, whether components can be reused, and what happens after the form is submitted.

Even if there is one less focus state, it is not finished.

And even after finishing the design. You still have to go through layers of checks: verifier checks the contrast, label, page level and interaction status again. If problems are found, ask Claude to correct them, and then make final confirmation after the corrections are completed.

This is a production-level design solution.