English | Chinese Original

Date: 2026-07-15

Yesterday I saw that someone had uncovered Claude Design’s Prompt. This is another piece of breaking news after the last time Fable 5 Prompt was uncovered.

I researched it immediately and will explain it to you in this article.

This repo has a total of 647 lines, and the author has also compiled 14 Skills and even made a Codex adapted version.

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

I feel like the shit in Company A seems to be tortured by the AI flavor. Basically, everyone’s AI flavor is written down.

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 I wonder is, if you use prompt to remove the AI flavor, will it become an AI flavor again?

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

What needs to be made clear to everyone is:

First, this is compiled by a third party. The author of the warehouse wrote reverse-engineered, but Anthropic has not confirmed it, so please don’t believe it 100%.

Second, there are three things in the warehouse: a Claude Design system prompt, a set of 14 skills, and a Codex version modified by the warehouse author.

Third, this article will go through all lines from line 1 to line 647 according to the commit 3c3ddb0. Each screenshot has the original text line number, which can be directly compared with the warehouse.

Let's get started now!

---

Identities and roles

▲ claude/system-prompt.md L1-L19. The screenshot is the original text rendering, the line number corresponds to the fixed version of the warehouse, the same below

▲ On the left is the generator action that fills the page first; on the right is the action of asking the target first, talking to the system, and deleting things if necessary

In the first sentence at the beginning, Claude proposed his own identity as expert designer.

The user is its manager.

Unless otherwise noted, it is delivered in HTML, CSS, SVG, and JavaScript by default.

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 a general-purpose AI aesthetic that is batch-generated by AI can be seen at a glance, it should be regarded as a failed design and should not 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.

Code-generating AI produces output that looks good enough to fill 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.

Code-generating AI can easily copy popular gradients, fonts, and cards; designers will first determine the rules for colors, fonts, spacing, components, etc., and then the entire design will follow this set of rules.

Code-generating AI 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 reason 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.

Workflow and query rules

▲Original text L21-L60

For every important design requirement, follow these steps:

1. Figure out the needs first;
2. Then understand the design background, brand specifications, code and screenshots;
3. For multi-step tasks, first write a short todo, and then make a design skeleton for users to see as soon as possible;
4. Verify every change and then continue to iterate;
5. In the end, I only talk about risks and next steps.

Among them, L28 I think is very important:

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 completely wrong from the beginning.

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

What L29 said is: If it involves a major visual change, a subagent is needed to verify it. Don't just check it once before final delivery. One is responsible for doing it, and the other is responsible for making mistakes.

(This can also be understood as confrontation)

L34 talked about how LLM should report to users: the tool should be called when it needs to be called, but "now I will open the file, and next I will check the CSS". Don't tell the user directly about such process-like steps. These processes should be documented in the step 3 plan and should not occur during conversations with users.

Starting from L36, here are the questions rules:

When you encounter a new project, when the requirements are vague, when you don’t know the brand and UI Kit, or when you don’t know how many solutions you want, you need to ask clearly.

When encountering small changes, the context is complete enough, and the scope is clear, there is no need to ask.

L58-L60 means:**Only ask questions whose answers are likely to actually change the design.**Put this type of issue up at once, and then conduct a focused discussion. After the discussion, you can implement it independently.

A button label, a default value, and two similar methods need to be directly left to LLM to choose. Just mention the choice when delivering.

After all, users are not here to accompany AI in requirements review meetings.

Design source for existing context

▲Original text L64-L86

L66 Full text in bold:

Hi-fi designs do not start from scratch.

“High-fidelity design cannot be started from scratch.”

What this means is that you need to find four things before you start: design system or UI Kit, brand assets, existing code, and existing interface screenshots.

Once you find it, follow it and learn about color warmth, fonts, density, rounded corners, shadows, cards, hover animations, copywriting tone, etc.

The high-fidelity design here is an interface that is close to the final product. Colors, fonts, spacing, components and interactions are basically set. The original text requires that this kind of design cannot be drawn out of thin air, but must first look at brand specifications, existing code and product screenshots.

What should I do if I can’t find it?

Ask the user. The user explicitly asks you to make it from scratch, and only then is he allowed to define a visual language for himself.

L86 says this: When designing for a real code base, be sure to read the source code, open the theme, tokens, and component source code directly to find the accurate colors, spacing, and font libraries.

Pixel fidelity to what's in the repo beats your recollection.

(The pixel-level restoration is far beyond your memory), I think this sentence is well translated and written.

If there is an accurate #2563EB in the warehouse, it is much better than the product in the model context memory that seemed to be blue before.

No filler: blank space does not mean lack of content

▲Original text L88-L120

Chapter 5 solves a very typical problem that Claude had when making pages: fear of empty spaces.

If the material is not enough, it will make up for itself: a title, a few numbers that look like data, a few buttons, and a block.

The page is full, but the information is false, the actions are empty, and the structure is patchy.

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.

This is followed immediately by this sentence:

One thousand no's for every yes.

A thousand no's are replaced by one yes.

What this sentence means is that Claude's default action should be not to add randomly. Only things that are truly useful can stay on the page.

This long list of examples does not mean that Claude will be blacklisted.

It's drawing a line: anything with no real information, no real destination, no real purpose, is considered filler.

The first category is fake content.

Lorem ipsum is placeholder text; "47% users" and "99.9% uptime" are unsourced numbers. They look like evidence, but really they just hold up the page.

The second category is false entrance.

There is nowhere to go when you click Learn more, and Coming soon will not be online at all. What the user sees is the button, with no real path behind it.

The third category is to make up modules.

The modules Why choose us, Testimonials, and Meet the team are not impossible to use. The key depends on whether the current page requires them.

The benefits have already been explained. Adding another page of Why choose us is just repetition; there are only two weak evaluations, and trying to make Testimonials is just to make up for the space; the team has nothing to do with the current page, and adding Meet the team is just taking up space.

The fourth category is tautology.

The title, subtitle, and text say the same thing. The three buttons are all called Sign up, and the icon just redraws the text next to it. There are more things on the page, but not more information.

The final category is data slop.

The useless "founded in 2019", the unsourced "99.9% uptime", the table columns that no one reads, and the three bullet points that can clearly explain ten bullet points all fall into this category.

So what I really want to deal with in this paragraph is not a certain English word at all.

It deals with a habit of Claude: as long as the page is empty, he will stuff it with parts that look like the official product website.

Each part looks like that on its own, and when put together it becomes the familiar AI landing page.

L106-L114 are asking for each element:

L118 also added: Claude thinks it would be better to add an extra piece of content. He will ask users first, and he cannot expand the needs.

And finally the L120:

If a section feels empty, that is a layout problem, not a content problem.

If there is an area that seems empty in the page design, adjust the composition, proportion and white space first.

Blank space does not mean lack of content. Don’t make up a piece of nonsense on the spot just to fill up the page.

AI-flavored blacklist

▲Original text L122-L178

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

This section is the most enjoyable section of the whole article.

Company A directly made a blacklist for AI aesthetics, and those whose AI taste was too strong were directly relegated to the sidelines.

Gradient colors are not used by default because the AI flavor is too strong. If you really need to use it, use the same color scheme, low contrast, and two color scales. Rainbow, neon hitting neon, large gradients of three or more colors, it looks like an AI template.

▲ The left side is a common AI gradient with high saturation, cross-hue, and more than 3 color scales; the right side uses solid color first, and then uses the same color, low contrast, and two color scale gradients when hierarchy is needed

Emoji can only be retained in two situations: the brand is already using it, or it has a real function, such as status and classification.

If there are meaningless emojis such as 🚀, 📈, and ✅ in front of the title just to add color, delete it without saying a word.

L135’s summary of emoji is:

No emoji is better than performative emoji.

No emoji, it’s better than pure performance emoji.

Cards default to light shadows, thin borders around the entire circle, or background differences.

The classic border-radius: 12px is paired with border-left: 4px solid, which can only be used in semantic places such as reminders and status.

▲ Ordinary content does not need the left color bar; a full circle of thin borders and light shadows can already complete layering. The color bar on the left is only reserved for reminders, warnings and status

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

Priority is given to using real photography, professional illustrations and mature icon libraries for pictures. If there is no picture, just put a placeholder box and write clearly product shot (1200×800).

What the original article says is:A placeholder indicates that there are no assets here; a bad illustration indicates that you have no money and are pretending. Fonts are also tagged: Inter, Roboto, Arial, Fraunces and bare system font.

L140 also named a set of default aesthetics that Claude often uses.

Claude now has a default aesthetic: #F4F1EA A cream background, a Georgia or Playfair serif display font, an italicized word in the title, and terra cotta or amber.

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

This set can be used in magazines, hotels and portfolios.

However, if it is used in developer tools, finance, medical, enterprise backend and other scenarios, and there is no brand reason, it will be directly judged as an AI template.

In other words, the cream background has also been directly relegated to the sidelines.

The original article puts this combination together with the previous purple gradient:

It is the current default-template look, exactly as purple gradients were before it.

Boy, after the blue-purple gradient was scolded, cream took over.

So now the blue-purple gradient is not AI-flavored, No

L144 Let’s continue talking about color matching: try to use oklch() for color matching from scratch. The entire set of products should be controlled to 3-5 main colors. Warm will be warm and cold will be cold. Don’t patch it all together.

oklch is a seasoning dial that is closer to human eye perception. When adjusting brightness, vividness and hue, it is more natural than RGB, HEX and HSL.

Don’t just draw complex SVG illustrations. Arrows and circles are fine, but leave the characters and scenes to professional illustrations.

17px, you can also see whether a model has design discipline.

▲ Original L180-L250

▲ 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

Chapter 7 talks about visual hierarchy and rhythm, visual hierarchy and rhythm.

Levels rely on five signals: size, color, weight, position, and density.

When users glance at the page, they usually first notice the larger title, stronger colors, heavier fonts, and higher positioning.

There needs to be more white space around these important contents so that readers can more easily distinguish it from other information;

Rhythm talks about the need for recurring structures on the page to be regular.

For example, several consecutive sections are in the same order: title, description, content card, and button. After reading the first paragraph, the user does not need to re-understand the page structure later.

If a certain paragraph requires special emphasis, break the rule. You can change the background or put the CTA in a more obvious position.

But this variation should be used sparingly. If the entire page is completely repeated, the page will appear flat; if each paragraph has a different style, the reader will not know in which order to read.

L202 specifically requires all spacing to fall on a 4px or 8px scale.

margin-bottom: 7px, padding: 18px 22px This kind of value, the original text directly says that it feels chaotic.

It's not the number 17px that is guilty in itself.

It’s you 17 for a while, 19 for a while, 23 for a while, which means that there is no system in the entire page, and it all depends on the model to be compiled wherever it goes.

Chapter 8 applies the same rule to fonts.

There are at most two sets of fonts, and the font sizes must also have scales: 12, 14, 16, 18, 20, 24, 30, 36, 48.

The slide text should be at least 24px, preferably 32px; print should be at least 12pt; mobile text should be at least 16px; the clickable area should be at least 44×44px.

Models often only care about whether things can "fit in".

This chapter deals with whether people can see clearly.

Accessibility: It doesn’t look like prompt here, it looks like acceptance criteria

▲Original text L253-L349

▲ Accessibility will finally fall into contrast, focus, label, error prompts and second signal

Chapter 9 first completes the color system into a system: brand color, semantic color, and 10 neutral colors. You cannot invent a blue color by combining them.

Status cannot be determined by color alone.

In addition to green and red, success and failure must also have icons or text. Color blindness, grayscale, and high contrast modes all require a second signal.

Chapter 10 starts with accessibility.

The contrast ratio should be at least 4.5:1 for regular text, 3:1 for large text, and 3:1 for buttons, icons, and focus rings.

Use <button> for buttons, don’t pretend to be <div onclick>; use <a> for links; tie the input box to <label>; the page must have <nav>, <main>, <article>; the title cannot jump directly from H1 to H3.

L309 writes down the keyboard rules very carefully: everything must be tabbed, pop-up windows can be closed by pressing Escape, drop-down menus can be opened by pressing Enter or Space, and arrow keys can be used to move.

L313 Full text in bold:

Never remove the focus ring.

Never delete the focus ring.

If you think the browser default is ugly, you can change it to a 2px one yourself, but you can't outline: none pretend nothing happened in the future.

Images must have alt, and empty alt is used for pure decoration. The input box must have a label, and the placeholder does not count because it disappears as soon as the user inputs it.

Animation must respect prefers-reduced-motion and cannot flash more than three times per second.

When reporting errors on the form, you are not allowed to just write Invalid. You should say "The email address format is incorrect", and the error must be tied to a specific field.

After reading this, this document no longer looks like "please make a good-looking website."

It's like a front-end acceptance sheet.

One button, six styles to prepare

▲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 is about a very small thing: don’t keep users guessing.

There can only be one most important button on a screen.

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?

For example, the registration page.

The user has already reached the registration page, so let him complete the account creation first. Of course you can keep documents, prices, and contact sales, but just put them as ordinary links. Don't put them together with the registration button to grab attention.

The same goes for forms.

This step only requires your email address, so don’t ask about the company’s size, industry, budget, or team size. There are too many products, so the most frequently purchased ones are shown first; the filter items are too long, so common items such as price, brand, and size are listed first, and the rest are included in more filters.

The original article gives a 5-second test at the end.

Show the page to the person you're meeting for the first time for 5 seconds, close it, and ask them where they should click.

If he can't tell, basically don't blame the copywriter.

There are too many buttons, and the page itself confuses people.

The page is just an arrangement, the components are the things

▲Original text L412-L449

L414：

Design components, not pages.

Design components first, not pages.

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

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

If you have to redraw the buttons on every page, that’s not a design system, it’s a repetitive production of the same garbage.

Buttons must have primary, secondary, and ghost, as well as size, icon, and loading; the same applies to cards, input boxes, pop-up windows, toasts, and table rows.

Then there’s the Design Token: spacing, color, font, rounded corners, shadow.

padding: var(--space-md), don’t write 17px that comes out of nowhere.

Each component must also state when to use it, what variations it has, what states it has, accessibility requirements, and Do's and Don't's.

By doing this, what the model delivers is not just a screenshot of the page.

Others can use this set of things and continue to work on it.

claude is not allowed to use HTML to copy a low-end Figma

▲Original text L451-L489

▲ The HTML prototype must really be able to be clicked, verified and saved, not just a few static images strung together

Chapter 14 is titled Respecting the medium.

There is no need to translate this word hard. It talks about specific actions: since HTML is delivered, click, verify, save and respond.

The first sentence is: Don’t use HTML to make a new Figma.

Since you are using HTML, CSS, JS, and SVG, use what they are really good at.

Grid for complex layout, Flexbox for simple arrangement, CSS Variables for theme, oklch() for color, Container Queries for component responsiveness, and prefers-color-scheme for dark mode.

L473: Interactive prototypes must actually be interactive.

Click to navigate, submit to verify, and then succeed or fail.

Several static images are strung together using <a>. The original text is called screenshot soup. To put it bluntly, it is a fake prototype made from screenshots.

L477 also takes care of the slideshow: the 16:9 canvas must be scaled proportionally to the window, and it must be able to be viewed when changing the laptop or connecting a projection.

L481: The playback position, slide page number, form draft, and tweak parameters are all written into localStorage.

The most common action in design iteration is refresh. Refresh it and throw it all away. This thing will be no different than broken.

The last few lines suddenly start to encourage Claude to show off his skills: scroll drive animation, View Transition, Container Queries, SVG Mask, all can be used.

The previous 480 lines have been restricting Claude from applying the default template, but here we allow it to use the new capabilities of the web page when it has a clear purpose.

What is limiting is decoration without reason, not the expressiveness of the web page itself.

Do a few less, but you have to finish them

▲Original text L491-L563

▲ Ten semi-finished products are not as good as three complete functions. They lack focus, lack of real materials, and lack of proofreading. They are not finished yet

Chapter 15 first asks who the user is.

Engineers, bosses, first-timers, and heavy users all see different points.

Looking at the mobile phone while commuting and the large screen in the conference room are not the same design.

L504: Choose only one main persona. Trying to please everyone usually ends up pleasing no one.

If the user himself is not sure what the audience likes, first make wireframes to verify different bets. Don’t do four sets of hi-fi in one go and then find out that you’ve made the wrong bet on all four sets.

Chapter 16 talks about quality over quantity.

One fully finished set is better than ten half-finished sets.

The picture must be either real or a placeholder; hover, focus, active, and disabled are all completed; copywriting must be proofread; accessibility verification.

L519 directly takes two details as an example: missing a focus state, or writing a 17px margin casually, both are telling others "I don't care about details."

If users want five functions, complete the core three first.

Be bold in one or two areas of color, font, layout, and interaction, and implement it to the end. Choose the safest one in each dimension, and what comes out must be a template.

Chapter 17 talks about delivery format.

Purely visual exploration is done side by side; the process is made into a high-fidelity clickable prototype; slides use a fixed canvas; animations need to have timelines and playback controls.

The plan defaults to more than 3, ranging from safe to bold.

But the differences are real: layout, hierarchy, interaction, tone.

Changing the button from blue to purple is not called the second solution.

Try to put multiple versions in one file and switch between them with switches. Don’t litter your project with v1.html, v2.html, v3.html.

Give your own drawings to another Agent to scold

▲Original text L565-L598

▲ After the design Agent is completed, hand it over to the verifier for inspection; when it comes to replication and expansion requirements, first cross the boundary

Chapter 18 talks about collaboration.

Give the skeleton as early as possible and don't sneak refinement in the wrong direction.

Only caveats and next steps are spoken during delivery.

The correct example given in the original article is: the file has been saved, but the logo still lacks real material, and the tweak panel can change the title.

An example of an error is: I created HTML, added Hero, added CTA, set background color...

The user just watched you do it, don't read it again.

L578 requires the verifier subagent again: take screenshots, view the layout, and run JS detection.

The things you draw tend to become more pleasing to the eye, so I used another agent to scold me.

Chapter 19 is copyright.

Users who ask it to replicate a company's unique UI, proprietary command structure, or brand visual reject it by default. Unless the email domain name can prove that the other party is in that company.

You can ask the user clearly what they want to solve and then make an original version.

Finally, two more items were repeated: You are not allowed to add pages, copywriting, or functions without authorization; you are not allowed to edit content just to fill up space.

The same restrictions have already appeared in Chapter 5, and are repeated here: do not expand requirements without authorization, and do not edit content to fill space.

14 skills: System prompts word management principles, skills management how to do it

▲Original text L600-L647

▲ The 14 skills are divided into two workflows: making from scratch and existing brands, and finally polish-pass

The last chapter has 14 skills.

Seven people are responsible for production: asking for requirements, setting aesthetic direction, making wireframes, making slides, making interactive prototypes, adding tweak panels, and developing multiple plans.

Two systems are responsible for extracting: extracting tokens from the brand and code, and splitting the page into components.

Five are responsible for finding errors: accessibility check, AI flavor check, level and rhythm check, interaction status check, and the last polish-pass runs the first four together.

The original text gives two assembly lines.

Do it from scratch:

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

There are brands:

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

The first step is to ask questions first, then determine the direction, first draw a sketch, then make a prototype, and finally accept it.

The other is to draw existing brands into systems first, then come up with plans, open parameters, and final acceptance.

The system prompt words are responsible for telling Claude what good design is.

Skill is responsible for telling it how to complete this job step by step.

Ask a question: The user has just uploaded the brand manual. Don’t ask him if he has it yet.

▲ claude/skills/discovery-questions.md L1-L60

▲ Read the materials uploaded by users first, then ask questions that will really change the design

discovery-questions The first one is to read what the user has already sent.

Code, screenshots, brand manual, UI Kit, brief, please read them all before asking.

The original article says that the user has just attached a brand guide and you ask "Do you have a brand guide?" This is the fastest way to lose trust.

This sentence is so true.

Users will immediately discover that Claude did not read the information he just uploaded.

The following requirements focus on five things: where to start, how many sets are needed, whether to be safe or innovative, which parameters need to be adjusted on-site, and whether to focus on exploring process or vision.

You can ask about ten questions about open requirements, and three or four questions about half of the requirements that have been discussed.

Don’t cram it into meeting targets.

It also specifically requires asking using a structured form like questions_v2. After the question is finished, the current round will end immediately, and the user will wait until the user has finished answering before continuing.

You can't ask questions and guess the answers for the user at the same time to create the page.

When there is no brand, first take out four sets with completely different directions.

▲ claude/skills/frontend-aesthetic-direction.md L1-L76

▲ The four sets of directions should be different in terms of font, color, density, and industry temperament. They cannot just reskin the same warm color template

frontend-aesthetic-direction is for projects that are truly starting from scratch.

Let’s confirm again: Are there really no brands, ready-made products, reference websites, or design systems?

Just stop and go back and read.

Really not, ask three adjectives, audience, industry, what you like, and what you hate the most.

The user himself couldn't tell clearly, so he gave four sets of directions.

But the four sets cannot all be warm beige and change the shades. The original article clearly requires that the four sets of colors cannot belong to the same family, and at least one set of off-distribution should be used to jump out of the common distribution of the model.

Then write down each set of directions: specific fonts, colors, density, rounded corners, shadows, components, pictures, icons, and animations.

Words such as "modern, simple, and advanced" do not count as directions.

L28 once again named the warm color editing style: cream + serif + clay color, which is the default appearance of the current model. It’s really suitable for magazines, hotels, and portfolios. I’ll choose it again if there’s no reason.

After finalizing, first make a Hero, a card and a set of buttons to show users.

The demos are not like those three adjectives, and if you continue to do more, you will only make bigger mistakes.

AI flavor check: A model’s default aesthetic also has a version number

▲ claude/skills/ai-slop-check.md L1-L71

▲ AI smell check should include severity, confidence and repair actions. The goal is not to miss anything

ai-slop-check made the previous blacklist into a separate review process.

Gradient, emoji, left border card, bad SVG, default font, pure black and white, random colors, free spacing like 7px / 13px, scan them all in one go.

After a hit, it is not only reported, but also repaired directly.

And each item must have confidence and severity. If you're not sure, report it first and filter it later. Don't secretly leave out questions just to look smart.

Article 9 once again singled out the warm-color editorial style and scolded it alone.

Cream base, serif display font, title italics, and terracotta colors appear together, and there is no brand reason. Stop and ask: Is this really a design direction, or has the model slipped back to the default value?

The list also exposed changes to the model's default aesthetic.

In the past two years, the AI flavor was blue-purple gradient, luminous buttons, and glass cards.

If everyone scolds you too much, the model will learn to use it.

Then off-white base, serifs, and clay colors suddenly appeared again.

The AI smell has not gone away, it has just changed its skin. So you can’t just finish this list and leave it alone. The default aesthetic of the model has a version number, and the review rules must be upgraded accordingly.

A tweak panel that reveals all the real host protocols

▲ claude/skills/make-tweakable.md L1-L63

▲The tweak panel only exposes a few key parameters, and modifications must be saved according to the host agreement

make-tweakable is written directly into Claude Design's host communication protocol.

It requires placing a Tweaks floating panel in the finished product, allowing users to adjust colors, fonts, spacing, copy and layout on the spot.

Controls can only be 3-8.

Don’t get excited and create a low-profile Figma on the web page.

Then L29 started, and the host communication protocols came out.

First listen to __activate_edit_mode and __deactivate_edit_mode, and then send __edit_mode_available to the parent window.

The order cannot be reversed.

If you declare yourself editable first, the host will immediately send an activation message, but before your listener is registered, this message will be dropped. The toolbar switch appears to click, but nothing actually happens.

After the user changes the parameters, use __edit_mode_set_keys to send them back to the host.

The default value is placed between EDITMODE-BEGIN and EDITMODE-END, and must be legal JSON. The host will directly rewrite this content and save the file, so it will still be there after refreshing.

The panel should disappear completely when it is closed, and should not be shrunk to a small lump in the lower right corner.

These postMessage events, JSON tags, and persistence requirements all teach the model how to connect to the Claude Design editor.

polish-pass: four agents come together to find fault

▲ claude/skills/polish-pass.md L1-L43

▲ polish-pass reports all the issues first, and then handles them hierarchically according to blocker, quality issue and suggestion

Finally there is polish-pass.

It will call four agents at the same time: one to check accessibility, one to check AI flavor, one to check level and rhythm, and one to check interaction status.

The task of each Agent is not to "report only important issues".

On the contrary, all problems are reported, including low-severity and uncertain ones, with confidence and severity, and finally the main agent removes duplicates and filters.

The warehouse README explains why this is done: the new model will implement "only report important issues" too seriously, and many issues will not be mentioned directly.

This is coverage-first, which means recall first.

The four types of questions are divided into three levels.

Contrast, keyboard, focus, label, etc., which make real users unable to use them, are blockers and should be completely repaired.

Template smell, chaotic hierarchy, and missing status are quality issues that need to be fixed.

For more detailed color and spacing suggestions, deal with them when you have time, and mark them if they are out of range.

After the repair, you have to look again: After changing the contrast to a higher level, have the brand colors been washed out? Will the new focus ring cover the sides? Is the main CTA really the most visible now?

This approach is very similar to what Anthropic talked about in March Harness design for long-running application development: separate generation and scoring, use clear standards to break "good or bad" into checkable questions, and then send the results back to the next round.

But it can only be said that the ideas are correct, and it cannot be deduced that the 647 lines on GitHub must be the original version of Anthropic.

There are two versions of Claude and Codex, the difference lies in how to work.

▲ The Claude version can send subagents for parallel inspection, while the Codex version is more of a single-agent sequential inspection

There are two system prompts in the warehouse: claude/ and codex/. The main contents are basically the same.

The difference is mainly in the Agent architecture.

The Claude version believes that the new model is more strict, so it no longer writes "ask at least N questions", but changes to ask only when certain conditions are met. Make small decisions yourself and don't be overly triggered.

It has a subagent, and both verification and polish-pass can be sent out in parallel.

The Codex version retains the stronger command "Ask at least four more specific questions."

It is written according to a single Agent, and screenshots, DOM, and JavaScript are all reviewed by themselves; the four reviews are run sequentially.

The Codex directory also has a AGENTS.md with only six lines. Its function is to tell Codex: read system-prompt.md first, then the task hits a certain skill, and then read the corresponding file.

With the same set of design principles, if the Agent is changed, the prompt words must also be changed.

Whether there is a subagent, how to find the skill, and whether the model regards "at least four" as a command, all affect the final writing method.

The latest commit compressed the Claude and Codex sets of 28 skills by about 30%.

No matter how well written the rules are, it won't work if the context is eaten up first.

finally

▲ The smell of AI often comes from process gaps: no context, no copywriting, no tokens, no one to check

That AI-flavored blacklist will become obsolete.

Last year it was a purple gradient, this year it’s a cream base, and next year there will be a new default template.

What makes this document long-lasting is the working process it stipulates: get the context first, dare to delete things, incorporate colors and spacing into the system, complete the status of all interactions, and then call another agent to find errors.

The so-called poor aesthetics of a model often means that none of the above things have been done.

If it doesn’t know the brand, it will use the default skin; if there is no real copywriting, it will make up a bunch of fillers; if there are no tokens, it will write wherever it goes; if no one checks it, it will always think that what it just did is good.

Good design is not about writing a few more words "advanced, concise, and high-quality" in the prompt. It is about having a reason for every choice and checking every detail. So don’t just use this warehouse to copy and paste.

In actual use, you can break these rules into your own AGENTS.md, skills, and design review processes.

After all, there were 647 lines of system prompt words, and Claude was not given a copy of "Aesthetics Quickly".

It gives rules.