Back to skills

Advanced UI Prompt Architect

Generates structured prompts for creating professional SaaS interfaces, landing pages, and dashboards with clear layout, components, and visual design rules.

Views

36

Uses

4

Updated

March 14, 2026

Author

Sourasith Phomhome
Sourasith Phomhome

Skill creator

ui-designweb-designlayoutcomponentsvisual-designaidocumentation
PropertyValue
keywordsui-design, web-design, layout, components, visual-design, ai, documentation

Advanced UI Prompt Architect

Purpose

This skill helps generate highly structured prompts for designing professional SaaS interfaces, landing pages, and dashboards.

It transforms a simple product idea into a detailed UI design prompt with clear layout structure, hierarchy, components, and visual design rules.

The goal is to avoid generic AI-generated UI and instead produce structured, designer-level interfaces.

When to Use

Use this skill when the user wants to generate:

  • SaaS landing pages
  • product marketing pages
  • dashboards
  • analytics platforms
  • AI tools interfaces
  • enterprise software UI
  • modern web application layouts

Instructions

When the user provides a simple idea or product concept, expand it into a complete structured prompt.

Always organize the prompt using the following sections.

1. Product Context

Describe the product and who uses it.

Example:

Design a professional interface for an AI telemetry platform used by engineering teams to monitor infrastructure performance, system health, and AI agents in real time.

2. Design Direction

Define the overall visual style.

Use qualities such as:

  • technical
  • structured
  • enterprise-grade
  • modern SaaS
  • minimal but precise

Also include design restrictions.

Example:

Avoid generic startup SaaS design.
Avoid playful illustrations.
Avoid excessive gradients unless specified.

3. Layout Structure

Define the page layout.

Include:

  • centered container
  • container width (1200px – 1360px)
  • editorial grid system
  • vertical hierarchy
  • clear spacing rhythm

4. Page Sections

Define the structure of the page.

Typical structure:

Hero section
Feature section
Product dashboard preview
Integration section
Pricing section
Footer

5. Component System

Describe the components that should appear.

Examples:

  • navigation bar
  • feature cards
  • analytics panels
  • charts
  • buttons
  • KPI indicators
  • product preview

6. Visual Design Rules

Define the visual system.

Include:

  • color palette
  • accent color
  • typography style
  • shadows and borders
  • card styling

Example:

Neutral background palette.
Accent color emerald green.
Soft shadows and subtle borders.
Rounded cards with balanced spacing.

7. UI Content

Describe what appears inside the UI preview.

Examples:

  • bar charts
  • radar charts
  • activity feeds
  • telemetry graphs
  • KPI dashboards
  • monitoring panels

8. Interaction and Motion

Add interaction ideas.

Examples:

  • hover animations
  • chart loading animation
  • micro interactions for buttons
  • subtle background motion

Output Format

The output must be:

  • one complete structured prompt
  • written in clear English
  • formatted with sections
  • ready to paste into AI builders such as Aura, Gemini, or Claude

Example Usage

User prompt:

@Advanced UI Prompt Architect

Product: AI Command Center
Mode: Dark
Accent Color: Emerald Green
Focus: Dashboard preview

The skill should generate a complete UI design prompt describing layout, hierarchy, components, and visual system.