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
| Variable | Description |
|---|---|
| [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
- Fill in the variables.
- Hand the output to designers to build Figma styles.
- 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.
