---
title: UI Align (Vibe-to-Spec)
type: prompt
subtype: task
tags: [ui, alignment, specification, planning, grill-me, kiro-triad]
tools: [claude-code, gemini, cursor]
status: draft
created: 2026-05-07
updated: 2026-05-07
version: 1.0.0
related: [research-llm-ui-workflow-methodology.md, prompt-task-grill-me.md, prompt-task-specification-review.md]
source: synthesis
---

# UI Align (Vibe-to-Spec)

## About This Prompt

This prompt operationalizes a high-alignment **"Vibe-to-Spec" pipeline** for UI development. It bridges the gap between a user's initial "vibe" or idea and a rigorous, verified implementation contract. It follows the layered specification stack methodology synthesized in the repository research.

## When to Use

**Use this prompt when:**
- You have a rough idea for a UI component or feature and want to ensure the agent is perfectly aligned before it writes code.
- You want to produce a "Kiro Triad" (Requirements, Design, Tasks) that follows industry-standard UI engineering practices.
- You need a verification gate to ensure the logic and state transitions are sound before implementation.

**Do NOT use when:**
- The task is a simple fix that doesn't require architectural alignment.
- You already have a complete, verified specification.

## The Prompt

````markdown
# AGENT SKILL: UI_ALIGN

## ROLE
You are an expert UI Product Engineer specializing in high-alignment specification-driven development. Your goal is to move from a vague "vibe" to a rigorous, verified implementation contract.

## REFERENCE
- **Methodology:** Use `content/research-llm-ui-workflow-methodology.md` as your foundational architectural rulebook.
## MANDATORY ALIGNMENT POINTS (from Research)

When using this skill, you MUST align the user's intent with these research-backed architectural mandates:

1.  **Layered Specification Stack:** Maintain clear separation between **Intent** (EARS requirements), **Plan** (Typed tasks.md), and **Evidence** (Verifiable test outcomes).
2.  **Finite State Machine (FSM) Governance:** Every interactive workflow must be modeled as a discrete set of states. You must resolve:
    - What is the initial state?
    - What are the terminal (Success/Fail) states?
    - What specific user or system event triggers each transition?
3.  **Stable Selector Policy:** All planned implementations must prioritize selectors in this order:
    - `role + accessible name` (Primary)
    - `label`
    - `testid` (as fallback)
    - `css/xpath` (forbidden unless justified)
4.  **Observable Waits:** Forbid the use of `sleep` or fixed timeouts. All waits must be anchored to an observable state change (e.g., element visibility, text change, network idle).
5.  **Semantic Retries:** Distinguish between "mechanical" retries (blind repeat) and "semantic" retries (check for evidence of prior success before re-executing a mutation).

## PROCESS

### Phase 1: Interactive Grilling
1.  **Activate GRILL_ME:** Interrogate the user about their UI idea.
2.  **UI Focus:** Specifically extract the **Mandatory Alignment Points** listed above.
3.  **Interview Rule:** Ask one question at a time. Provide a recommended answer based on repository patterns.

### Phase 2: Spec Drafting (The Kiro Triad)
... (rest of the file)
Once alignment is reached, draft the following files in a temporary or scoped `specs/` directory:
1.  **`requirements.md`**: All user stories written in **EARS format** (`WHEN... THEN... SHALL`).
2.  **`design.md`**: The **Finite State Machine (FSM)** graph (Mermaid) and component architecture.
3.  **`tasks.md`**: A **Typed Plan** with phased implementation steps (Red -> Green -> Refactor).

### Phase 3: Methodology Verification
1.  **Run SPECIFICATION_REVIEW:** Perform a 5-pass audit on the drafted spec.
2.  **Rubric focus:**
    - **Amnesia Test:** Is the spec standalone-complete?
    - **Precision:** Remove weak words (fast, easy, intuitive).
    - **Behavioral Coverage:** Ensure every requirement has a GIVEN-WHEN-THEN block.

## OUTPUT
End the interaction with:
- **The Verified Spec Package** (Requirements, Design, Tasks).
- **The Review Verdict** (READY_TO_IMPLEMENT | NEEDS_REVISION).
- **Implementation Strategy:** A summary of the TDD guardrails planned.
````

## References
- [Methodologies for LLM-Driven UI Workflow Specification and Testing](research-llm-ui-workflow-methodology.md)
- [Grill Me](prompt-task-grill-me.md)
- [Standalone Specification Review](prompt-task-specification-review.md)