UX & AI Knowledge Guide

Web Access

฿150

46 UI/UX components, design patterns, and AI prompt templates across 11 categories

What you get

46 UI/UX component guides
AI prompt templates for each
Best practices & anti-patterns
Bilingual EN/TH

Content Preview

47 topics across 11 categories — see real samples below

Button

action

Triggers an action when clicked. The most important interactive element in any interface.

When to use

Submit a form (sign up, login, checkout)
Trigger an action (save, delete, share)
Navigate to another page (CTA)

Best Practices

Primary button = 1 per section max
Use verb labels: 'Save changes' not 'OK'

AI Prompt Example

Create a primary button that says 'Get Started' with a right arrow icon. On click, navigate to /signup. Include hover and loading states.

Text Input

input

Lets users type text — names, emails, search queries, etc.

When to use

Collecting user data (name, email, phone)
Search functionality
Short free-text responses

Best Practices

Always show a label above the input
Use placeholder as hint, not as label

AI Prompt Example

Create an email input field with label 'Email address', placeholder 'you@example.com', validation for email format, and an error message below when invalid.

Select / Dropdown

input

Pick one option from a list. Great when there are 4-15 choices.

When to use

Country or language selection
Category filters
Settings with predefined values

Best Practices

Use radio buttons if < 4 options
Add search for 10+ options

AI Prompt Example

Create a select dropdown for 'Role' with options: Designer, Developer, PM, Other. Default to empty with placeholder 'Select your role'. Show a label above.

Checkbox & Toggleinput

Carddisplay

Badge / Tagdisplay

Data Tabledisplay

Modal / Dialogfeedback

+ 39 more topics — unlock with purchase