Convert design guideline from Figma to azd-style-guide.md

[hyoshis]

Summary

Expands the azd CLI style guide with core UX documentation by converting the guidelines from Figma to a MD file, and adds a style guide reference to AGENTS.md so AI coding agents follow consistent CLI output patterns.

Changes

cli/azd/docs/style-guidelines/azd-style-guide.md

• Agentic Flow UX — Documents UX patterns for AI-driven operations
• User Inputs — Documents text input, yes/no, and list select patterns including hint (?) behavior and ghost-text
• Loading Animation — Documents bar-fill, braille, and short spinner variants with usage guidelines
• Cancelled state — Documents multi-service deployment cancellation UX
• CLI Color Standards — Added magenta note for agentic experiences
• Fix — Corrected hint text color from "hi-magenta" to "hi-blue" to match actual implementation (WithHighLightFormat)

cli/azd/AGENTS.md

• Added "CLI UX & Style" section pointing agents to the style guide

Here are some BEFORE & AFTER CLI outputs after applying the style guide file.

[Copilot]

Pull request overview

Expands the azd CLI style guide with detailed UX guidance (progress states, spinners, prompts, agentic UX), and updates agent instructions to reference the style guide for consistent CLI output patterns.

Changes:

• Extended azd-style-guide.md with expanded progress report states/examples, logging conventions, input UX patterns, loading animations, and agentic flow UX.
• Added references to the style guide from AGENTS.md so agents follow these CLI UX conventions.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
cli/azd/docs/style-guidelines/azd-style-guide.md	Adds substantial UX/style documentation for CLI output, including progress states, spinners, inputs, and agentic UX patterns.
cli/azd/AGENTS.md	Links AI agent instructions to the CLI UX/style guide.

Comments suppressed due to low confidence (7)

cli/azd/docs/style-guidelines/azd-style-guide.md:226

• WithHintFormat is described here as "white"/"hint-colored", but output.WithHintFormat currently renders magenta (color.MagentaString). This section should be updated to match the implementation (or the helper renamed/changed if the intent is different).

Hint copy can directly follow any Success, Error, or Warning log. Hint text should:

- Provide more context to the log above
- In some cases, provide an actionable path forward (see: Actionable Hints)
- Use the white color variable (`WithHintFormat`)

cli/azd/docs/style-guidelines/azd-style-guide.md:343

• This doc says list selects should show no more than 7 items, but the current Select component default (DefaultSelectOptions.DisplayCount) is 6. Please update the guideline (or adjust the default) so contributors have an accurate reference.

- The list should display no more than 7 items at a time.
- When a list contains more than 7 items, ellipses (`...`) should be used to help users understand there are more items available up or down the list.

cli/azd/docs/style-guidelines/azd-style-guide.md:349

• The [Type ? for hint] helper is described as "hi-magenta" for list select, but in the current UX components that helper is rendered via WithHighLightFormat (hi-blue). Please align this line with the implementation (and/or clarify which element is intended to be magenta vs. hi-blue).

- The `[Type ? for hint]` pattern follows the same behavior as Text Input — hi-magenta in bold, with ghost-text in secondary text color.

cli/azd/docs/style-guidelines/azd-style-guide.md:137

• This example uses the Unicode "✗" in the failed progress prefix, but the current CLI helpers print "(x) Failed:" (see pkg/input/console.go and pkg/output/ux/uxitem.go). Please align the example/output conventions with the implementation (or update the shared prefix constants consistently if the new symbol is intended).

  <span style="color:red">(✗) Failed:</span> Creating Cosmos DB: cosmos-r2w2adrz3rvwxu

cli/azd/docs/style-guidelines/azd-style-guide.md:529

• Minor inconsistency: this says "There are three spinner variants" but the table lists four (Bar-fill, Braille, Short, No Terminal). Please update the text to match the table.

There are three spinner variants based on terminal capability:

| Variant | Characters | When Used |
| --- | --- | --- |
| **Bar-fill** | `\|=======\|` (bouncing fill bar) | Single-operation progress in interactive terminal |
| **Braille** | `⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏` | Multi-item concurrent progress lists |
| **Short** | `.`, `..`, `...` | Non-interactive or limited terminals |
| **No Terminal** | *(empty)* | No terminal attached (e.g., piped output) |

cli/azd/docs/style-guidelines/azd-style-guide.md:308

• This says yes/no results should be printed as yes/no, but the current Confirm component prints "Yes"/"No" (capitalized). Update the guideline and examples to match the actual output.

- Once a user has selected y or n, the result should be printed in blue text (**yes** or **no**).

cli/azd/docs/style-guidelines/azd-style-guide.md:552

• The agentic spinner is documented as cycling at 250ms intervals, but internal/agent/display.go triggers canvas updates every 200ms, which also advances the pkg/ux.Spinner animation index on each render. Consider removing the hard-coded interval claim, or updating it to reflect the effective behavior in the current implementation.

The agentic spinner uses the **same default character set** as the standard spinner (`|`, `/`, `-`, `\`) rendered in **magenta** via `WithHintFormat()`, cycling at 250ms intervals. This is different from the bar-fill spinner (`|=======|`) used for standard provisioning/deployment progress.

[Copilot]

The new Cancelled progress state is documented as a first-class progress report state, but there is no corresponding progress prefix/state in the current core UX helpers (no StepCancelled in pkg/input/console.go or Cancelled ux item in pkg/output/ux). Either qualify this as an aspirational/extension-specific pattern, or add the missing implementation so contributors can actually produce this state consistently.

This issue also appears on line 136 of the same file.

Suggested change

	6. **Cancelled**: `(!) Cancelled: [Verb] Message goes here – [reason]`
	- Yellow exclamation indicates the operation was cancelled due to another failure
	- Includes the reason (typically which sibling operation failed)
	- Used in multi-service scenarios when a failure in one service causes others to be cancelled
	6. **Cancelled** (extension-specific / aspirational): `(!) Cancelled: [Verb] Message goes here – [reason]`
	- Yellow exclamation indicates the operation was cancelled due to another failure
	- Includes the reason (typically which sibling operation failed)
	- Used in multi-service scenarios when a failure in one service causes others to be cancelled
	- Requires custom UX handling today; core progress helpers do **not** yet provide a built-in `Cancelled` state

[Copilot]

These examples rely on <span style="color:..."> inside <pre> blocks to show color, but GitHub-flavored Markdown sanitization typically strips inline styles. Consider switching back to fenced code blocks and describing the intended color via the helper function names (or use screenshots) so the docs render correctly in GitHub.

This issue also appears in the following locations of the same file:

• line 221
• line 308
• line 342
• line 349
• line 522
• ...and 1 more

[Copilot]

Grammar: "Select an single option" should be "Select a single option".

Suggested change

	? Select an single option: [Use arrows to move, type to filter]
	? Select a single option: [Use arrows to move, type to filter]