Prototype Interface
A prototype is a testable hypothesis about hierarchy and interaction, not a collection of attractive screens.
Visual-target gate
- Inspect the product’s existing UI, tokens, components, assets, and representative flows.
- If an authoritative screenshot, design file, brand system, or selected direction exists, use it as the visual target.
- If the work is greenfield and no target exists, generate exactly three image-based directions that differ in layout composition, typography, density, color behavior, and visual voice. Label them A, B, and C with a short rationale and tradeoff.
- Show the three directions together and wait for the user to select one. Do not build the interface before selection.
Text-only mood boards do not satisfy the gate.
Prototype workflow
- Define the user task, entry state, success signal, and critical decision points.
- Map the shortest complete flow and its alternate or failure routes.
- Write a state matrix before styling.
- Build semantic structure and interaction using the selected design language.
- Use realistic content, including long, empty, invalid, and localized examples.
- Implement keyboard behavior, focus management, labels, announcements, target sizes, contrast, zoom, and reduced motion.
- Capture the prototype at agreed narrow and wide viewports.
- Compare expected and actual at the same browser, scale, theme, data, fonts, and motion state. Preserve expected, actual, and diff.
- Test the critical flow as a user, then revise until no material visual or interaction mismatch remains.
State matrix
| Surface | State | Trigger | Visible response | Keyboard/focus | Evidence |
| --- | --- | --- | --- | --- | --- |
Quality rules
- Wireframes must still establish hierarchy, content, and interaction.
- Do not hide weak layout behind gradients, glass, illustrations, or excessive cards.
- Avoid placeholder text where content length affects design.
- Treat overflow, clipping, unexpected wrapping, inconsistent spacing, and fallback fonts as failures.
- Report browser rendering context because visual snapshots are environment-dependent.
Evidence packet
Return target selection, flow and state matrix, runnable prototype path, test instructions, viewport matrix, expected/actual/diff artifacts, accessibility checks, and unresolved product or visual questions.
1---2name: prototype-interface-33description: Create and verify an interactive UI prototype from a selected visual target or an existing product language. For greenfield work without a target, first generate exactly three different image-based directions and wait for selection. Use for wireframes, prototypes, and UI exploration.4license: Apache-2.05---67# Prototype Interface89A prototype is a testable hypothesis about hierarchy and interaction, not a collection of attractive screens.1011## Visual-target gate12131. Inspect the product’s existing UI, tokens, components, assets, and representative flows.142. If an authoritative screenshot, design file, brand system, or selected direction exists, use it as the visual target.153. If the work is greenfield and no target exists, generate exactly three image-based directions that differ in layout composition, typography, density, color behavior, and visual voice. Label them A, B, and C with a short rationale and tradeoff.164. Show the three directions together and wait for the user to select one. Do not build the interface before selection.1718Text-only mood boards do not satisfy the gate.1920## Prototype workflow21221. Define the user task, entry state, success signal, and critical decision points.232. Map the shortest complete flow and its alternate or failure routes.243. Write a state matrix before styling.254. Build semantic structure and interaction using the selected design language.265. Use realistic content, including long, empty, invalid, and localized examples.276. Implement keyboard behavior, focus management, labels, announcements, target sizes, contrast, zoom, and reduced motion.287. Capture the prototype at agreed narrow and wide viewports.298. Compare expected and actual at the same browser, scale, theme, data, fonts, and motion state. Preserve expected, actual, and diff.309. Test the critical flow as a user, then revise until no material visual or interaction mismatch remains.3132## State matrix3334```markdown35| Surface | State | Trigger | Visible response | Keyboard/focus | Evidence |36| --- | --- | --- | --- | --- | --- |37```3839## Quality rules4041- Wireframes must still establish hierarchy, content, and interaction.42- Do not hide weak layout behind gradients, glass, illustrations, or excessive cards.43- Avoid placeholder text where content length affects design.44- Treat overflow, clipping, unexpected wrapping, inconsistent spacing, and fallback fonts as failures.45- Report browser rendering context because visual snapshots are environment-dependent.4647## Evidence packet4849Return target selection, flow and state matrix, runnable prototype path, test instructions, viewport matrix, expected/actual/diff artifacts, accessibility checks, and unresolved product or visual questions.
leihuang23