How Engineers Can Use AI Coding Assistants to Build Page Design Guidelines

1. Write the Design Brief Before Asking the Tool to Build the Page

When an AI coding assistant generates a page without clear guidance, the result often resembles a default template: a dark background, a purple-blue gradient, three equal-width feature cards, and a collection of decorative labels. None of these elements is necessarily wrong on its own, but together they can disconnect the page from its business purpose and make the main message difficult to remember.

The root problem is missing information. The generation tool does not have access to your internal design judgment. It fills in the gaps based on common patterns in its training data. The solution is to write those judgments down in a design brief. The document should describe the page’s purpose, audience, references, and prohibited patterns. Every later generation can then use it as a source of truth.

The brief does not need to use specialized terminology. Its readers may include you, colleagues who will revise the page later, and the AI coding assistant executing the task. Writing in language that ordinary readers can understand is also a useful test of whether the design thinking is clear.

2. Ten Things a Design Brief Should Include

A practical design brief usually covers the following ten areas. Omitting any of them increases the randomness of the generated result.

1. What should the page communicate?

Describe the page’s core message in one sentence. For example:

Help visitors understand a designer’s areas of expertise within ten seconds and find the portfolio entry point.

Avoid vague statements such as “showcase brand strength.” They do not help determine what should be emphasized or removed. A clear core message makes it easier to decide which content deserves prominence.

2. Who is the page for?

Describe the audience’s identity, reading goal, and usage habits. A product page for investors and a documentation site for developers should differ in information density, wording, and visual rhythm.

If the audience primarily uses mobile devices, the first screen should support one-handed reading and provide sufficiently large, easy-to-tap controls.

3. What should be learned from the references?

List two or three specific, reusable rules, such as:

• Clear heading hierarchy
• Generous spacing between paragraphs
• Large image areas and concise text

The learning points should be specific enough to implement directly. Terms such as “premium” or “technological” are too vague to guide a design.

4. What should not be copied from the references?

List specific exclusions as well. For example:

• Do not copy a large gradient background.
• Do not use continuously flashing decorative animations.

Explicit exclusions prevent the tool from importing decorative elements from a reference along with its useful structural ideas.

5. How should the colors be defined?

Start with a small set of base colors, usually including one primary color, one accent color, two or three neutral colors, and rules for background-to-text contrast.

Explaining how each color should be used is more valuable than simply listing color values. For example:

Use the primary color only for the main button and key links.

Example:

:root {
  --color-bg: #f7f5f0;
  --color-text: #1f1f1f;
  --color-muted: #6b6b6b;
  --color-primary: #2a5db0;
  --color-accent: #d9822b;
}

Body text should generally have a contrast ratio of at least 4.5:1 against the background, a common baseline for accessibility.

6. What should the typography feel like?

Describe the character of the typography, such as “serious with a literary quality” or “clean and engineering-oriented,” and specify suitable font categories.

Body text typically uses a readable sans-serif or serif font, while headings can use a heavier weight. Keep the type scale to roughly four or five levels. Too many font sizes on one page make the hierarchy difficult to understand.

7. How should the first screen be arranged?

The first screen determines whether readers continue. The brief should specify which elements appear above the fold and their order.

A common structure includes:

1. One core headline
2. One supporting sentence
3. One primary call-to-action
4. An image or illustration that explains the subject

If three feature cards are not the page’s most important information, they should not occupy the first screen.

8. How should buttons and cards work?

Buttons should have a clear hierarchy. Use a solid background for the primary button, and an outlined or text-only style for secondary actions.

Cards should group related content, not serve as decoration. Avoid adding heavy shadows and large corner radii without a functional reason. The brief can define the corner radius, spacing unit, and the expected degree of color change on hover.

9. How much motion is appropriate?

Motion should support understanding, such as a fade when switching pages or a subtle movement for list items.

The brief should define a duration range. A common range is 150 to 300 milliseconds. It should also list prohibited patterns, such as continuously looping background animations.

Consider the reduced-motion setting in the operating system as well. When users enable reduced motion, the interface should fall back to showing the final state directly.

10. Which common AI-generated patterns should be avoided?

Create a list of patterns that frequently appear in generated pages, such as:

• Default purple-blue gradients
• Decorative glows with no functional purpose
• Empty phrases such as “empower” and “all-new”
• Identical small icons attached to every card

Clearly stating these exclusions makes it less likely that the tool will fall back to a generic template.

3. How to Choose References

References generally fall into three categories, and each serves a different purpose.

The first category is an established design reference library. These sites collect color, typography, and component rules, and may provide design guidance that can be adapted directly. Their main advantage is that they reduce guesswork. You only need to determine whether a particular style fits the page’s purpose.

The second category is high-quality pages in the same category. Personal sites, portfolios, and product pages can have very different structures. Pages with similar goals are more useful for understanding how information should be organized. When reviewing them, focus on the first-screen structure and information order rather than the overall visual effect.

The third category is your own brand documentation, such as existing color rules, logo usage, and writing tone. These materials determine whether the new page remains consistent with other channels and should take priority over external references.

Use three questions to evaluate a reference:

• Does it serve an audience similar to mine?
• Is its core information structure suitable for my content?
• Can its decorative elements be removed without affecting functionality?

A reference is worth adopting only when the answer to all three questions is yes.

4. Collaboration Workflow: Document First, Page Second

A recommended workflow has four steps.

Step 1: Ask the AI coding assistant to draft the design brief

You can use a prompt like this:

Please help me organize a design brief first.
Requirements: use language that ordinary readers can understand and avoid unnecessary technical terms.
Please explain each of the following:
1. What the page should communicate
2. Who the page is for
3. What to learn from the references
4. What not to learn from the references
5. How to define the colors
6. What the typography should feel like
7. How to arrange the first screen
8. How buttons and cards should work
9. How much motion to use
10. Which common AI-generated patterns to avoid
After writing it, stop and wait for my confirmation.

Step 2: Review every item manually

Check whether each item is specific enough for another person to implement. If an item contains only adjectives, ask the assistant to add values, positions, or examples.

Step 3: Generate the page only after approval

Provide the approved design brief as context and instruct the tool to follow its color, typography, and first-screen rules exactly.

Step 4: Validate the result against the brief

Review the generated page item by item and record every deviation. Then update the design brief instead of making scattered changes directly in the code.

This approach allows the rules to guide future generations automatically.

5. Common Mistakes

Mistake 1: Describing only the style

Instructions such as “make it feel more premium” provide almost no useful constraints. The tool must then rely on default choices.

Mistake 2: Writing a long document without executable rules

Length is not the goal. What matters is whether each item can support a concrete design decision.

Mistake 3: Listing only what to do

Rules about what not to do can significantly reduce drift and are often more effective than additional positive instructions.

Mistake 4: Skipping the approval step

If the brief is not reviewed by a person, its errors will be amplified in the generated code, increasing the cost of later corrections.

6. Checklist

• Can the page’s purpose be explained in one sentence?
• Is the audience specific enough to describe a real usage context?
• Are both the reference learning points and exclusions listed?
• Do the color rules explain usage, and does the contrast meet accessibility expectations?
• Is the order of first-screen elements clear?
• Is the hierarchy between primary and secondary buttons obvious?
• Do animations have a duration limit and a reduced-motion fallback?
• Are prohibited patterns documented?

7. Summary

A design brief turns vague aesthetic judgment into executable rules. Defining the purpose, audience, references, and exclusions before asking an AI coding assistant to generate a page is an effective way to avoid generic results.

The most important part of the workflow is human review. Once the brief has been checked and approved, it provides a reliable foundation for subsequent code generation.