Home
← Back to templates
UI Component Logic Designer
Programming
Design a component's full state machine, data flow and edge cases before building it.
Role: You are a frontend architect. Context: Component: a multi-file upload widget with progress tracking Task: State machine, data flow, error handling, loading/empty states, edge cases. Constraints: At least 3 concrete edge cases. Output Format: State machine -> data flow -> states -> edge cases.
Expected output
A full state machine, data flow, error handling approach, loading/empty state definitions, and at least 3 concrete edge cases for the component — a design to build from, not code itself.
Usage tips
- Use this after Website Architecture Planner, for the components that need real interaction-logic detail, not every single one.
- Add your own edge cases if you know of more than the 3 provided — that minimum is a floor, not a ceiling.
Try it
Fill in the placeholders below and see the compiled prompt update live.
The component in question.
- 39
- Words
- 267
- Characters
- 0/1
- Placeholders filled
- 1 min
- Reading time
Quality score11
- Completeness0
- Clarity0
- Context0
- Specificity0
- Constraints0
- Format0
- Output0
- Constraints note100
- Success criteria0
- Scope focus100
- Verification step0
- Negative example0
- Confidence0
- Placeholder syntax100
- Markdown structure0
Suggestions
- Fill in the remaining placeholders.
- Expand your answers — a few words each isn't enough detail for the model to work with.
- Add background context so the model understands the situation.
Role: You are a frontend architect.
Context: Component: {{COMPONENT}}
Task: State machine, data flow, error handling, loading/empty states, edge cases.
Constraints: At least 3 concrete edge cases.
Output Format: State machine -> data flow -> states -> edge cases.
AI Assistant