For AI agents: the complete documentation index is available at https://docs.flezise.com/26.09/llms.txt, the full documentation bundle is available at https://docs.flezise.com/26.09/llms-full.txt, and this page is available as Markdown at https://docs.flezise.com/26.09/artifacts/specs/ui-ux-specs.md.
Docs
  • 26.09

    • UI/UX specs

    A UI/UX spec pairs a written design document with a live canvas of the actual screens, rendered as HTML and CSS in the browser. You review the interface itself before any code is written, and the decisions you make on the canvas flow back into the product requirements.

    A written spec alone

    Screens described in words

    A design section tells you what a screen should contain, and you picture it. What ships can drift from what everyone imagined.

    Flezise

    Screens you can open

    The design artifact holds the real screens. You click through the flow, edit them in place, and approve what you can see.

    The design artifact

    Three types cover the full range of UI/UX work in a project:

    TypeWhat it is
    UI/UX DesignEditable visual mockup with HTML and CSS screens rendered in the browser
    Annotated WireframeGreybox layout with numbered annotation pins and per-pin engineering notes; the PRD-to-design handoff
    Brand KitMark, wordmark, and color palette with WCAG contrast ratios, plus type pairing, spacing, motion guidelines, do/don't examples, and an asset manifest

    All three move through the same status lifecycle (Draft, In Review, Revise, Approved). The UI/UX Design and Annotated Wireframe draft once the PRD is approved; the Brand Kit has no prerequisite and can start any time. The Design tab is the canvas; the written specification lives in the same artifact alongside it.

    Design on the canvas

    The top bar gives you the core controls: screen count, a View / Edit toggle (shown as Live while the canvas is generating), zoom, Fit to view, state toggles for loading, error, and empty, nav connectors, Present, Export, and Generate for image and video assets. The left rail holds Select, Pan, Design system, Auto layout, and Brand assets (logos in PNG, SVG, or JPG; fonts in WOFF2, WOFF, TTF, or OTF).

    Changes come from the Design Session, a chat scoped to the canvas. How your instruction is applied depends on what you write:

    • A broad instruction containing words like "redesign", "rebuild", "from scratch", or "entire page" rebuilds the selected screen's HTML completely.
    • A global style direction such as "darker", "change the color palette", or "more minimal" updates the design system and applies the change across every screen. Adding a specific element name (button, header, card) in the same instruction routes it to a targeted patch instead.
    • Any other instruction applies a surgical patch to the selected screen or element.

    Select a screen or element before asking to pin the change there. The design canvas page covers every control and the routing logic in full.

    Requirements that feed the PRD

    A design decision is often a product requirement in disguise. As you work, the canvas captures those as UI requirements and tracks where each one stands:

    BadgeMeaning
    Not in PRDCaptured on the canvas; not yet sent to the PRD
    ProposedAn amendment is open in the PRD and regeneration is running
    In PRDThe PRD now carries the requirement
    DroppedRejected; not carried forward

    Press Send to PRD to open a PRD amendment for the requirement, or press the X to drop it. A Not in PRD badge blocks approval: the spec cannot be approved until every requirement is either proposed or dropped.

    What a good UI/UX spec covers

    The verifier agent checks every design artifact against a quality rubric across three areas.

    Interactive states. Every screen needs a defined layout for each state it can enter:

    StateWhen it appears
    happyNormal loaded content
    emptyNo data yet
    loadingFetch in progress
    errorRequest failed
    destructiveAn action that cannot be undone
    staleData that may have changed since last fetch
    latencyResponse is slow or degraded
    recoveryReturning from an error

    Designs that define only the happy path leave engineers to guess the rest.

    Accessibility. The spec describes keyboard navigation order, visible focus indicators, accessible labels for interactive elements, color contrast against WCAG thresholds, reduced-motion alternatives for any animation, and the layout at each supported breakpoint.

    Role and permission visibility. Controls and content that vary by role are specified explicitly: which roles see the element, what the denied state looks like, who owns a sensitive action, and whether ownership changes what is visible.

    Reviewing a UI/UX spec

    A UI/UX spec passes through the same review and approval gate as every other spec. Submit it with Submit for Review and the verifier agent posts findings in the review cockpit. Resolve or waive each finding before the Approve button becomes available.

    Two things block approval before level rules apply: unresolved review findings, and design requirements that have not been sent to the PRD or dropped. The UX Designer role approves for interaction quality, usability, and accessibility.

    See Review findings and Approve an artifact for the review cockpit, decision markers, and multi-level approval.

    Exports and renderings

    Canvas artifacts are captured directly: press Export to get a full-page screenshot or PDF of the current screens. Designs and wireframes play as a click-through in Present mode, following the navigation connectors between screens. Decks open a speaker view with a filmstrip, timers, and speaker notes instead.

    See renderings for format options and how to share an export.

    Next steps