You know what you want,
you just don't know what it's called.
See it working, learn the name, understand when to use it, then tell AI directly.
63 real UI patterns — every one clickable, playable, with a prompt you can copy.
Search in English or Chinese, by name or alias — even by description: bottom sheet or fill in step by step.
The three indie developers ask about most
Click a heading and the content below it expands; click again and it collapses back out of the way.
Originals run about 3–5MB, thumbnails around 200KB. When you clean up you can choose "delete the original, keep the thumbnail" — browsing stays unaffected while you reclaim most of the space.
Yes. Deleted photos move to "Recently deleted" and stay there for 30 days. Pick "Restore" from that folder and they go back where they were.
The system compares each image's content hash and capture settings. The same photo at different resolutions or in different formats counts as a duplicate, and you can choose which version has the best quality.
You know Button. You don't know when NOT to use it.
Start with these 10
Bottom Sheet
底部弹出面板
A panel that slides up from the bottom edge of the screen and rests there without taking over the whole display.
Modal
模态框 / 对话框
Something pops up in the middle of the screen, and until you deal with it you cannot use the page underneath.
Toast
轻提示
A small confirmation that drifts into the corner of the screen after an action and disappears on its own a few seconds later.
Snackbar
带操作提示条
Looks much like a toast, except it carries one optional action button at the bottom — typically "Undo".
Skeleton
骨架屏
Before the data arrives, lay out the future layout using grey blocks so the shape of the page is already on screen.
Accordion
手风琴 / 折叠面板
Click a heading and the content below it expands; click again and it collapses back out of the way.
Tabs
标签页
Several peer content sections sit side by side; switching tabs swaps the whole panel — and each one gets its own URL.
Switch
开关
A control that slides left and right, on or off, with the state always plainly visible.
Slider
滑块
A track you drag left or right to land on a value, with the current number always shown beside it.
Empty State
空状态
The block you show when a list is completely empty — it should explain why it is empty and what to do next.