---
-template-target: UiSpec
+template-target: SpecUi
template-levels: pro, master
-template-note: the UI specification of a pro or master project, made when the project is created (P-530)
-description: The UI specification of {{project}}: what each page shows and how it looks
-tags: ai, uispec
+template-note: the UI specification of a pro or master project, made when the project is created (P-530; named SpecUi, P-605)
+description: The UI specification of {{project}}: how its UI behaves — screen flows, layouts, what each page shows
+tags: ai, specui
status: draft
---
# {{project}}: UI specification
-This is the UI specification for {{project}}: what each page shows and how it looks, so the UI can be rebuilt the same. Its companions: [[Spec]] (the specification), [[UiSpec]] (the UI specification), [[Design]] (the design) and [[Implementation]] (the implementation).
+This is SpecUi, the UI specification for {{project}}, kept by the designer with the person: how the UI behaves — screen flows, layouts, what each page shows and in what order — so another build's UI looks the same for the most part. No code references. Its companions: [[Spec]] (what it does), [[SpecUi]] (how the UI behaves), [[Design]] (the mechanisms), [[DesignRoutes]] (the API) and [[SpecTest]] (the black-box tests); each code base that builds {{project}} keeps its own topics, named after it (e.g. `Proto1Impl`, `Proto1Code`, `Proto1Routes`, `Proto1Test`).
## Goals
…
- **Role:** what each page shows, in what order, and the look rules across pages, so another build's UI looks the same for the most part.
- **A line belongs here if** a person looking at the screen would notice it changing.
-- **It fails if** two builds that follow it look noticeably different, or if a UI decision lives only in a work item.
+- **It fails if** two builds that follow it look noticeably different, if a UI decision lives only in a work item, or if it names files, classes or components of one code base.
## Pages
…