Website BuildIntermediateGeneralEngineering

Website UI/UX & Design System Planning Prompt

Plans baseline UI styles, components, and UX principles for a corporate website or system, shared between designers and engineers.

Audience: Product, design, front-end · Last updated 2026-07-17
Contents

Scenario

Plans baseline UI styles, components, and UX principles for a corporate website or system, shared between designers and engineers.

Applicable Industry or Company Size

  • General
  • Engineering

Preparation Before Use

  • Brand guidelines (if any).
  • Screenshots of the existing website or system.

Variable Reference

VariableDescription
[Company Name]Your company's official name
[Brand Style Keywords]e.g., professional, grounded, tech-forward, B2B
[Primary Device Usage]e.g., mostly desktop, 40% mobile

Full Prompt

Prompt
You are a senior UX design consultant. Plan a design system and UX principles based on the following inputs.

[Background]
- Company: [Company Name]
- Brand Style Keywords: [Brand Style Keywords]
- Primary Device Usage: [Primary Device Usage]

[Output]
1. 5 UX principles (each with judgment criteria).
2. Color system: primary / secondary / text / background / status colors.
3. Typography system: headings, body text, buttons; recommended sizes and line heights.
4. Spacing and corner radius.
5. Common components: buttons, inputs, cards, tables, tags, toasts, with all states.
6. Responsive breakpoints and navigation strategy.
7. Accessibility check (contrast, keyboard operation, ARIA).

[Judgment Criteria] Do not suggest visuals that conflict with the brand style keywords; explain the purpose of each color, not just provide swatches.

[Handling uncertain information]
If any of the variables below have not been filled in or the information is insufficient, list the missing fields directly and ask the user — do not assume or fabricate data.

[Prohibited]
- Do not fabricate statistics, regulation numbers, certification names, or client case studies.
- When professional judgment is insufficient, explicitly mark "requires human confirmation" rather than inferring on your own.

[Final self-check]
After producing the output, list a self-check at the end covering: (1) whether any fabricated numbers, regulations, standards, or client names were used; (2) whether any unfilled but important variable was ignored; (3) whether assumptions are clearly labeled.

Usage Steps

  1. Fill in the variables.
  2. Hand the output to designers to build Figma styles.
  3. Confirm token naming with front-end engineers.

Example

AEGIS POWER INTEGRATIONS brand style: professional, grounded, tech-forward; primary device usage: mostly desktop, 30% mobile.

Common Mistakes

  • Insufficient color contrast making body text hard to read.
  • Only showing visuals without component states (hover / disabled).

Cautions

  • Must meet WCAG 2.1 AA contrast requirements.
Last updated 2026-07-17

Need further customization to fit your company's process and industry?

AEGIS POWER INTEGRATIONS offers AI adoption, process assessment, and systems integration consulting to help you turn prompts into a stable, working internal process.