A decision manual for "when to use which" covering all 63 UI components in Apple HIG, organized by 8 functional categories. Menus and Actions (Buttons/Menus/Context Menus/Toolbars/Pop-up Buttons/Pull-down Buttons/Activity Views/Ornaments) · Selection and Input (Text Fields/Pickers/Segmented Controls/Sliders/Steppers/Toggles/Color Wells/Image Wells/Combo Boxes/Virtual Keyboards) · Presentation (Alerts/Action Sheets/Sheets/Popovers/Panels/Windows/Scroll Views/Page Controls) · Layout and Organization (Lists and Tables/Collections/Outline Views/Split Views/Tab Views/Sidebars/Boxes/Labels/Column Views/Lockups/Disclosure Controls) · Navigation and Search (Tab Bars/Sidebars/Search Fields/Path Controls/Token Fields) · Content Containers (Charts/Images/Text/Web Views) · Status Indicators (Progress Views/Activity Rings/Gauges/Ratings) · System Experiences (Widgets/Live Activities/Notifications/Controls/Complications/Shortcuts/Menu Bars/Status Bars/Top Shelf/Watch Faces). Each component includes a definition + when to use it + key do/don't guidance + cross-platform support. Includes anatomy diagrams for Primary/Secondary buttons.
The complete essence of all 28 UX laws and psychological effects from Jon Yablonski’s *Laws of UX* 2.0, distilling decades of experimental findings from cognitive psychology into actionable mantras that PMs can directly apply to design decisions. Grouped into 6 clusters by underlying intent: ① Cognitive Load (Cognitive Load / Working Memory / Miller's Law / Chunking / Tesler's Law (Law of Conservation of Complexity) / Occam's Razor / Law of Prägnanz) — The brain has limited processing power, so subtract ruthlessly and shift complexity from the user to the system. ② Decision Friction (Hick's Law / Choice Overload / Cognitive Bias / Paradox of the Active User) — More options lead to slower, more anxious decisions; framing and wording skew judgment; users never read manuals. ③ Gestalt Grouping (Proximity / Similarity / Common Region / Uniform Connectedness / Closure / Symmetry / Continuity) — The human brain automatically groups visual elements; use spacing, borders, and color to control “what belongs with what.” ④ Time Perception and Motivation (Doherty Threshold 400ms / Flow / Goal-Gradient Effect / Zeigarnik Effect / Parkinson's Law / Peak-End Rule / Serial Position Effect) — Users’ perceived speed, progress, and memory matter more than objective data. ⑤ Familiarity and Resilience (Jakob's Law / Mental Model / Postel's Law) — Users expect your product to work the same way as others’ products; be liberal in what you accept, conservative in what you send. ⑥ Attention and Aesthetics (Selective Attention / Banner Blindness / Von Restorff Effect / Aesthetic-Usability Effect / Pareto Principle 80/20) — Highlight what matters, avoid ad-like visual patterns, and remember that attractive things feel more usable. Each entry includes definition, psychological origin, how to apply it, counterexamples, and when to use it. Written for non-technical PMs, with in-line explanations of jargon, in bilingual Chinese-English format. Designed for quick recall of “which law to remember next time you encounter interface problem X.”
A collection of 23 AI webpage / 3D modeling / real-time typography works by Xiaohongshu vibecoding creators. Covers: ① Pretext, the viral open-source frontend typography library (by Cheng Lou, React animation author, 21 million views) ② SOP for cinematic AI-built webpages (Nano Banana + Higgsfield + Seedance + Google AI Studio + Landingbook) ③ Making premium-feeling Vibecoding pages (Page Flows + Godly godly.website + Mobbin) ④ Bringing pages to life (Unicorn Studio + React Bits reactbits.dev + Design Spells) ⑤ AI 3D modeling (Hitem3D 2.1 hi3d.AI / turn one image into a PBR 3D figurine in seconds) ⑥ Google Genie 3 world generation model ⑦ AI real-time generation of endless webpages (shared by Karpathy) ⑧ 5 ways to play with Gemini 3 3D particle animations + starry-sky particle gesture recognition ⑨ GPT Image 2 360° panoramic images ⑩ Minimax 2.7 Plus, a Vibecoding model accessible in mainland China
