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.

[jongio]

PR Review - #7371

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

Summary

What: Adds comprehensive CLI UX documentation to the style guide - progress report states, logging conventions, input patterns (text, yes/no, list select), loading animations, and agentic flow UX. Also updates AGENTS.md to reference the style guide.

Why: Converts Figma design specs into a Markdown reference so contributors (human and AI) can follow consistent terminal UX patterns without needing Figma access.

Assessment: Solid documentation effort that fills a real gap. The agentic flow section and color summary tables are particularly useful. A few factual mismatches between the doc and the actual code implementations need correcting (details in inline comments).

Findings

Category	Critical	High	Medium	Low
Quality	0	0	3	1
Total	0	0	3	1

Key Findings

1. [MEDIUM] Quality: WithHintFormat described as "white" but actually renders magenta
2. [MEDIUM] Quality: "Three spinner variants" text doesn't match four-row table
3. [MEDIUM] Quality: Cancelled state shares Warning prefix and has no core helper
4. [LOW] Quality: Grammar - "an single" should be "a single"

Test Coverage Estimate

Documentation-only PR - no code changes requiring test coverage.

What's Done Well

• Thorough agentic flow UX section with clear color-to-function mappings
• Good use of examples for each input pattern (initial, hint, typing, submitted states)
• Implementation reference linking to actual source files
• The cancelled scenario example with multi-service deployment is a helpful real-world case

---

4 inline comments below.

[hyoshis]

Removed the design guideline for Agentic flow & Extension-specific flows. I plan to add them in separate files so that agent can better understand and recommend the design. The scope of this guideline is Azd Core only.

[jongio]

Issues to address:

• azd-style-guide.md:83 - says six states but only 5 are listed (Cancelled was removed, count wasn't updated)
• AGENTS.md:167 - uses (✗) for Failed but console.go:535 prints (x)