Recursos de Implementación
100 íconos, 129 reglas UX/Web, 23 prompts de estilo y 271 guías across 5 stacks.
01 Catálogo de íconos
02 Reglas UX / Web
- Icon Button Labels Accessibility · Web Critical Ver →
Icon-only buttons must have accessible names
✓ DoAdd aria-label to icon buttons✕ Don'tIcon button without label<button aria-label='Close'><XIcon /></button><button><XIcon /></button> - Form Control Labels Accessibility · Web Critical Ver →
All form controls need labels or aria-label
✓ DoUse label element or aria-label✕ Don'tInput without accessible name<label for='email'>Email</label><input id='email' /><input placeholder='Email' /> - Visible Focus States Focus · Web Critical Ver →
All interactive elements need visible focus states
✓ DoUse :focus-visible with ring/outline✕ Don'tNo focus indicationfocus-visible:ring-2 focus-visible:ring-blue-500outline-none // no replacement - Never Remove Outline Focus · Web Critical Ver →
Never remove outline without providing replacement
✓ DoReplace outline with visible alternative✕ Don'tRemove outline completelyfocus:outline-none focus:ring-2focus:outline-none // nothing else - Outline Replacement Anti-Pattern · Web Critical Ver →
Never use outline-none without replacement
✓ DoProvide visible focus replacement✕ Don'tRemove outline with nothingfocus:outline-none focus:ring-2 focus:ring-blue-500focus:outline-none // alone - Smooth Scroll Navigation · Web High Ver →
Anchor links should scroll smoothly to target section
✓ DoUse scroll-behavior: smooth on html element✕ Don'tJump directly without transitionhtml { scroll-behavior: smooth; }<a href='#section'> without CSS - Back Button Navigation · Mobile High Ver →
Users expect back to work predictably
✓ DoPreserve navigation history properly✕ Don'tBreak browser/app back button behaviorhistory.pushState()location.replace() - Excessive Motion Animation · All High Ver →
Too many animations cause distraction and motion sickness
✓ DoAnimate 1-2 key elements per view maximum✕ Don'tAnimate everything that movesSingle hero animationanimate-bounce on 5+ elements - Reduced Motion Animation · All High Ver →
Respect user's motion preferences
✓ DoCheck prefers-reduced-motion media query✕ Don'tIgnore accessibility motion settings@media (prefers-reduced-motion: reduce)No motion query check - Loading States Animation · All High Ver →
Show feedback during async operations
✓ DoUse skeleton screens or spinners✕ Don'tLeave UI frozen with no feedbackanimate-pulse skeletonBlank screen while loading - Hover vs Tap Animation · All High Ver →
Hover effects don't work on touch devices
✓ DoUse click/tap for primary interactions✕ Don'tRely only on hover for important actionsonClick handleronMouseEnter only - Z-Index Management Layout · Web High Ver →
Stacking context conflicts cause hidden elements
✓ DoDefine z-index scale system (10 20 30 50)✕ Don'tUse arbitrary large z-index valuesz-10 z-20 z-50z-[9999] - Content Jumping Layout · Web High Ver →
Layout shift when content loads is jarring
✓ DoReserve space for async content✕ Don'tLet images/content push layout aroundaspect-ratio or fixed heightNo dimensions on images - Touch Target Size Touch · Mobile High Ver →
Small buttons are hard to tap accurately
✓ DoMinimum 44x44px touch targets✕ Don'tTiny clickable areasmin-h-[44px] min-w-[44px]w-6 h-6 buttons - Focus States Interaction · All High Ver →
Keyboard users need visible focus indicators
✓ DoUse visible focus rings on interactive elements✕ Don'tRemove focus outline without replacementfocus:ring-2 focus:ring-blue-500outline-none without alternative - Loading Buttons Interaction · All High Ver →
Prevent double submission during async actions
✓ DoDisable button and show loading state✕ Don'tAllow multiple clicks during processingdisabled={loading} spinnerButton clickable while loading - Error Feedback Interaction · All High Ver →
Users need to know when something fails
✓ DoShow clear error messages near problem✕ Don'tSilent failures with no feedbackRed border + error messageNo indication of error - Confirmation Dialogs Interaction · All High Ver →
Prevent accidental destructive actions
✓ DoConfirm before delete/irreversible actions✕ Don'tDelete without confirmationAre you sure modalDirect delete on click - Color Contrast Accessibility · All High Ver →
Text must be readable against background
✓ DoMinimum 4.5:1 ratio for normal text✕ Don'tLow contrast text#333 on white (7:1)#999 on white (2.8:1) - Color Only Accessibility · All High Ver →
Don't convey information by color alone
✓ DoUse icons/text in addition to color✕ Don'tRed/green only for error/successRed text + error iconRed border only for error - Alt Text Accessibility · All High Ver →
Images need text alternatives
✓ DoDescriptive alt text for meaningful images✕ Don'tEmpty or missing alt attributesalt='Dog playing in park'alt='' for content images - ARIA Labels Accessibility · All High Ver →
Interactive elements need accessible names
✓ DoAdd aria-label for icon-only buttons✕ Don'tIcon buttons without labelsaria-label='Close menu'<button><Icon/></button> - Keyboard Navigation Accessibility · Web High Ver →
All functionality accessible via keyboard
✓ DoTab order matches visual order✕ Don'tKeyboard traps or illogical tab ordertabIndex for custom orderUnreachable elements - Form Labels Accessibility · All High Ver →
Inputs must have associated labels
✓ DoUse label with for attribute or wrap input✕ Don'tPlaceholder-only inputs<label for='email'>placeholder='Email' only - Error Messages Accessibility · All High Ver →
Error messages must be announced
✓ DoUse aria-live or role=alert for errors✕ Don'tVisual-only error indicationrole='alert'Red border only - Image Optimization Performance · All High Ver →
Large images slow page load
✓ DoUse appropriate size and format (WebP)✕ Don'tUnoptimized full-size imagessrcset with multiple sizes4000px image for 400px display - Input Labels Forms · All High Ver →
Every input needs a visible label
✓ DoAlways show label above or beside input✕ Don'tPlaceholder as only label<label>Email</label><input>placeholder='Email' only - Submit Feedback Forms · All High Ver →
Confirm form submission status
✓ DoShow loading then success/error state✕ Don'tNo feedback after submitLoading -> Success messageButton click with no response - Touch Friendly Responsive · Web High Ver →
Mobile layouts need touch-sized targets
✓ DoIncrease touch targets on mobile✕ Don'tSame tiny buttons on mobileLarger buttons on mobileDesktop-sized targets on mobile - Readable Font Size Responsive · All High Ver →
Text must be readable on all devices
✓ DoMinimum 16px body text on mobile✕ Don'tTiny text on mobiletext-base or largertext-xs for body text - Viewport Meta Responsive · Web High Ver →
Set viewport for mobile devices
✓ DoUse width=device-width initial-scale=1✕ Don'tMissing or incorrect viewport<meta name='viewport'...>No viewport meta tag - Horizontal Scroll Responsive · Web High Ver →
Avoid horizontal scrolling
✓ DoEnsure content fits viewport width✕ Don'tContent wider than viewportmax-w-full overflow-x-hiddenHorizontal scrollbar on mobile - Contrast Readability Typography · All High Ver →
Body text needs good contrast
✓ DoUse darker text on light backgrounds✕ Don'tGray text on gray backgroundtext-gray-900 on whitetext-gray-400 on gray-100 - Loading Indicators Feedback · All High Ver →
Show system status during waits
✓ DoShow spinner/skeleton for operations > 300ms✕ Don'tNo feedback during loadingSkeleton or spinnerFrozen UI - Disclaimer AI Interaction · All High Ver →
Users need to know they talk to AI
✓ DoClearly label AI generated content✕ Don'tPresent AI as humanAI Assistant labelFake human name without label - Gaze Hover Spatial UI · VisionOS High Ver →
Elements should respond to eye tracking before pinch
✓ DoScale/highlight element on look✕ Don'tStatic element until pinchhoverEffect()onTap only - Motion Sensitivity Accessibility · All High Ver →
Parallax/Scroll-jacking causes nausea
✓ DoRespect prefers-reduced-motion✕ Don'tForce scroll effects@media (prefers-reduced-motion)ScrollTrigger.create() - Keyboard Handlers Accessibility · Web High Ver →
Interactive elements must support keyboard interaction
✓ DoAdd onKeyDown alongside onClick✕ Don'tClick-only interaction<div onClick={fn} onKeyDown={fn} tabIndex={0}><div onClick={fn}> - Semantic HTML Accessibility · Web High Ver →
Use semantic HTML before ARIA attributes
✓ DoUse button/a/label elements✕ Don'tDiv with role attribute<button onClick={fn}>Submit</button><div role='button' onClick={fn}>Submit</div> - Autocomplete Attribute Forms · Web High Ver →
Inputs need autocomplete attribute for autofill
✓ DoAdd appropriate autocomplete value✕ Don'tMissing autocomplete<input autocomplete='email' type='email' /><input type='email' /> - Never Block Paste Forms · Web High Ver →
Never prevent paste functionality
✓ DoAllow paste on all inputs✕ Don'tBlock paste on password/code<input type='password' /><input onPaste={e => e.preventDefault()} /> - Inline Errors Forms · Web High Ver →
Show error messages inline near the problem field
✓ DoInline error with focus on first error✕ Don'tSingle error at top<input /><span class='text-red-500'>{error}</span><div class='error'>{allErrors}</div> // at top - Virtualize Lists Performance · Web High Ver →
Virtualize lists exceeding 50 items
✓ DoUse virtual list for large datasets✕ Don'tRender all items<VirtualList items={items} />items.map(item => <Item />) - URL Reflects State State · Web High Ver →
URL should reflect current UI state
✓ DoSync filters/tabs/pagination to URL✕ Don'tState only in memory?tab=settings&page=2useState only // lost on refresh - Confirm Destructive Actions State · Web High Ver →
Destructive actions require confirmation
✓ DoShow confirmation dialog before delete✕ Don'tDelete without confirmationif (confirm('Delete?')) delete()onClick={delete} // no confirmation - Sticky Navigation Navigation · Web Medium Ver →
Fixed nav should not obscure content
✓ DoAdd padding-top to body equal to nav height✕ Don'tLet nav overlap first section contentpt-20 (if nav is h-20)No padding compensation - Active State Navigation · All Medium Ver →
Current page/section should be visually indicated
✓ DoHighlight active nav item with color/underline✕ Don'tNo visual feedback on current locationtext-primary border-b-2All links same style - Deep Linking Navigation · All Medium Ver →
URLs should reflect current state for sharing
✓ DoUpdate URL on state/view changes✕ Don'tStatic URLs for dynamic contentUse query params or hashSingle URL for all states - Duration Timing Animation · All Medium Ver →
Animations should feel responsive not sluggish
✓ DoUse 150-300ms for micro-interactions✕ Don'tUse animations longer than 500ms for UItransition-all duration-200duration-1000 - Continuous Animation Animation · All Medium Ver →
Infinite animations are distracting
✓ DoUse for loading indicators only✕ Don'tUse for decorative elementsanimate-spin on loaderanimate-bounce on icons - Transform Performance Animation · Web Medium Ver →
Some CSS properties trigger expensive repaints
✓ DoUse transform and opacity for animations✕ Don'tAnimate width/height/top/left propertiestransform: translateY()top: 10px animation - Overflow Hidden Layout · Web Medium Ver →
Hidden overflow can clip important content
✓ DoTest all content fits within containers✕ Don'tBlindly apply overflow-hiddenoverflow-auto with scrolloverflow-hidden truncating content - Fixed Positioning Layout · Web Medium Ver →
Fixed elements can overlap or be inaccessible
✓ DoAccount for safe areas and other fixed elements✕ Don'tStack multiple fixed elements carelesslyFixed nav + fixed bottom with gapMultiple overlapping fixed elements - Stacking Context Layout · Web Medium Ver →
New stacking contexts reset z-index
✓ DoUnderstand what creates new stacking context✕ Don'tExpect z-index to work across contextsParent with z-index isolates childrenz-index: 9999 not working - Viewport Units Layout · Web Medium Ver →
100vh can be problematic on mobile browsers
✓ DoUse dvh or account for mobile browser chrome✕ Don'tUse 100vh for full-screen mobile layoutsmin-h-dvh or min-h-screenh-screen on mobile - Container Width Layout · Web Medium Ver →
Content too wide is hard to read
✓ DoLimit max-width for text content (65-75ch)✕ Don'tLet text span full viewport widthmax-w-prose or max-w-3xlFull width paragraphs - Touch Spacing Touch · Mobile Medium Ver →
Adjacent touch targets need adequate spacing
✓ DoMinimum 8px gap between touch targets✕ Don'tTightly packed clickable elementsgap-2 between buttonsgap-0 or gap-1 - Gesture Conflicts Touch · Mobile Medium Ver →
Custom gestures can conflict with system
✓ DoAvoid horizontal swipe on main content✕ Don'tOverride system gesturesVertical scroll primaryHorizontal swipe carousel only - Tap Delay Touch · Mobile Medium Ver →
300ms tap delay feels laggy
✓ DoUse touch-action CSS or fastclick✕ Don'tDefault mobile tap handlingtouch-action: manipulationNo touch optimization - Hover States Interaction · Web Medium Ver →
Visual feedback on interactive elements
✓ DoChange cursor and add subtle visual change✕ Don'tNo hover feedback on clickable elementshover:bg-gray-100 cursor-pointerNo hover style - Active States Interaction · All Medium Ver →
Show immediate feedback on press/click
✓ DoAdd pressed/active state visual change✕ Don'tNo feedback during interactionactive:scale-95No active state - Disabled States Interaction · All Medium Ver →
Clearly indicate non-interactive elements
✓ DoReduce opacity and change cursor✕ Don'tConfuse disabled with normal stateopacity-50 cursor-not-allowedSame style as enabled - Success Feedback Interaction · All Medium Ver →
Confirm successful actions to users
✓ DoShow success message or visual change✕ Don'tNo confirmation of completed actionToast notification or checkmarkAction completes silently - Heading Hierarchy Accessibility · Web Medium Ver →
Screen readers use headings for navigation
✓ DoUse sequential heading levels h1-h6✕ Don'tSkip heading levels or misuse for stylingh1 then h2 then h3h1 then h4 - Screen Reader Accessibility · All Medium Ver →
Content should make sense when read aloud
✓ DoUse semantic HTML and ARIA properly✕ Don'tDiv soup with no semantics<nav> <main> <article><div> for everything - Skip Links Accessibility · Web Medium Ver →
Allow keyboard users to skip navigation
✓ DoProvide skip to main content link✕ Don'tNo skip link on nav-heavy pagesSkip to main content link100 tabs to reach content - Lazy Loading Performance · All Medium Ver →
Load content as needed
✓ DoLazy load below-fold images and content✕ Don'tLoad everything upfrontloading='lazy'All images eager load - Code Splitting Performance · Web Medium Ver →
Large bundles slow initial load
✓ DoSplit code by route/feature✕ Don'tSingle large bundledynamic import()All code in main bundle - Caching Performance · Web Medium Ver →
Repeat visits should be fast
✓ DoSet appropriate cache headers✕ Don'tNo caching strategyCache-Control headersEvery request hits server - Font Loading Performance · Web Medium Ver →
Web fonts can block rendering
✓ DoUse font-display swap or optional✕ Don'tInvisible text during font loadfont-display: swapFOIT (Flash of Invisible Text) - Third Party Scripts Performance · Web Medium Ver →
External scripts can block rendering
✓ DoLoad non-critical scripts async/defer✕ Don'tSynchronous third-party scriptsasync or defer attribute<script src='...'> in head - Bundle Size Performance · Web Medium Ver →
Large JavaScript slows interaction
✓ DoMonitor and minimize bundle size✕ Don'tIgnore bundle size growthBundle analyzerNo size monitoring - Render Blocking Performance · Web Medium Ver →
CSS/JS can block first paint
✓ DoInline critical CSS defer non-critical✕ Don'tLarge blocking CSS filesCritical CSS inlineAll CSS in head - Error Placement Forms · All Medium Ver →
Errors should appear near the problem
✓ DoShow error below related input✕ Don'tSingle error message at top of formError under each fieldAll errors at form top - Inline Validation Forms · All Medium Ver →
Validate as user types or on blur
✓ DoValidate on blur for most fields✕ Don'tValidate only on submitonBlur validationSubmit-only validation - Input Types Forms · All Medium Ver →
Use appropriate input types
✓ DoUse email tel number url etc✕ Don'tText input for everythingtype='email'type='text' for email - Autofill Support Forms · Web Medium Ver →
Help browsers autofill correctly
✓ DoUse autocomplete attribute properly✕ Don'tBlock or ignore autofillautocomplete='email'autocomplete='off' everywhere - Required Indicators Forms · All Medium Ver →
Mark required fields clearly
✓ DoUse asterisk or (required) text✕ Don'tNo indication of required fields* required indicatorGuess which are required - Password Visibility Forms · All Medium Ver →
Let users see password while typing
✓ DoToggle to show/hide password✕ Don'tNo visibility toggleShow/hide password buttonPassword always hidden - Input Affordance Forms · All Medium Ver →
Inputs should look interactive
✓ DoUse distinct input styling✕ Don'tInputs that look like plain textBorder/background on inputsBorderless inputs - Mobile Keyboards Forms · Mobile Medium Ver →
Show appropriate keyboard for input type
✓ DoUse inputmode attribute✕ Don'tDefault keyboard for all inputsinputmode='numeric'Text keyboard for numbers - Mobile First Responsive · Web Medium Ver →
Design for mobile then enhance for larger
✓ DoStart with mobile styles then add breakpoints✕ Don'tDesktop-first causing mobile issuesDefault mobile + md: lg: xl:Desktop default + max-width queries - Breakpoint Testing Responsive · Web Medium Ver →
Test at all common screen sizes
✓ DoTest at 320 375 414 768 1024 1440✕ Don'tOnly test on your deviceMultiple device testingSingle device development - Image Scaling Responsive · Web Medium Ver →
Images should scale with container
✓ DoUse max-width: 100% on images✕ Don'tFixed width images overflowmax-w-full h-autowidth='800' fixed - Table Handling Responsive · Web Medium Ver →
Tables can overflow on mobile
✓ DoUse horizontal scroll or card layout✕ Don'tWide tables breaking layoutoverflow-x-auto wrapperTable overflows viewport - Line Height Typography · All Medium Ver →
Adequate line height improves readability
✓ DoUse 1.5-1.75 for body text✕ Don'tCramped or excessive line heightleading-relaxed (1.625)leading-none (1) - Line Length Typography · Web Medium Ver →
Long lines are hard to read
✓ DoLimit to 65-75 characters per line✕ Don'tFull-width text on large screensmax-w-proseFull viewport width text - Font Size Scale Typography · All Medium Ver →
Consistent type hierarchy aids scanning
✓ DoUse consistent modular scale✕ Don'tRandom font sizesType scale (12 14 16 18 24 32)Arbitrary sizes - Font Loading Typography · Web Medium Ver →
Fonts should load without layout shift
✓ DoReserve space with fallback font✕ Don'tLayout shift when fonts loadfont-display: swap + similar fallbackNo fallback font - Heading Clarity Typography · All Medium Ver →
Headings should stand out from body
✓ DoClear size/weight difference✕ Don'tHeadings similar to body textBold + larger sizeSame size as body - Empty States Feedback · All Medium Ver →
Guide users when no content exists
✓ DoShow helpful message and action✕ Don'tBlank empty screensNo items yet. Create one!Empty white space - Error Recovery Feedback · All Medium Ver →
Help users recover from errors
✓ DoProvide clear next steps✕ Don'tError without recovery pathTry again button + help linkError message only - Progress Indicators Feedback · All Medium Ver →
Show progress for multi-step processes
✓ DoStep indicators or progress bar✕ Don'tNo indication of progressStep 2 of 4 indicatorNo step information - Toast Notifications Feedback · All Medium Ver →
Transient messages for non-critical info
✓ DoAuto-dismiss after 3-5 seconds✕ Don'tToasts that never disappearAuto-dismiss toastPersistent toast - Confirmation Messages Feedback · All Medium Ver →
Confirm successful actions
✓ DoBrief success message✕ Don'tSilent successSaved successfully toastNo confirmation - Truncation Content · All Medium Ver →
Handle long content gracefully
✓ DoTruncate with ellipsis and expand option✕ Don'tOverflow or broken layoutline-clamp-2 with expandOverflow or cut off - User Freedom Onboarding · All Medium Ver →
Users should be able to skip tutorials
✓ DoProvide Skip and Back buttons✕ Don'tForce linear unskippable tourSkip Tutorial buttonLocked overlay until finished - Autocomplete Search · Web Medium Ver →
Help users find results faster
✓ DoShow predictions as user types✕ Don'tRequire full type and enterDebounced fetch + dropdownNo suggestions - No Results Search · Web Medium Ver →
Dead ends frustrate users
✓ DoShow 'No results' with suggestions✕ Don'tBlank screen or '0 results'Try searching for X insteadNo results found. - Streaming AI Interaction · All Medium Ver →
Waiting for full text is slow
✓ DoStream text response token by token✕ Don'tShow loading spinner for 10s+Typewriter effectSpinner until 100% complete - Depth Layering Spatial UI · VisionOS Medium Ver →
UI needs Z-depth to separate content from environment
✓ DoUse glass material and z-offset✕ Don'tFlat opaque panels blocking view.glassBackgroundEffect()bg-white - Auto-Play Video Sustainability · Web Medium Ver →
Video consumes massive data and energy
✓ DoClick-to-play or pause when off-screen✕ Don'tAuto-play high-res video loopsplaysInline muted preload='none'autoplay loop - Asset Weight Sustainability · Web Medium Ver →
Heavy 3D/Image assets increase carbon footprint
✓ DoCompress and lazy load 3D models✕ Don'tLoad 50MB texturesDraco compressionRaw .obj files - Aria Live Accessibility · Web Medium Ver →
Async updates need aria-live for screen readers
✓ DoAdd aria-live='polite' for dynamic content✕ Don'tSilent async updates<div aria-live='polite'>{status}</div><div>{status}</div> // no announcement - Decorative Icons Accessibility · Web Medium Ver →
Decorative icons should be hidden from screen readers
✓ DoAdd aria-hidden='true' to decorative icons✕ Don'tDecorative icon announced<Icon aria-hidden='true' /><Icon /> // announced as 'image' - Checkbox Radio Hit Target Focus · Web Medium Ver →
Checkbox/radio must share hit target with label
✓ DoWrap input and label together✕ Don'tSeparate tiny checkbox<label class='flex gap-2'><input type='checkbox' /><span>Option</span></label><input type='checkbox' id='x' /><label for='x'>Option</label> - Semantic Input Types Forms · Web Medium Ver →
Use semantic input type attributes
✓ DoUse email/tel/url/number types✕ Don'ttext type for everything<input type='email' /><input type='text' /> // for email - Submit Button Enabled Forms · Web Medium Ver →
Keep submit enabled and show spinner during requests
✓ DoShow loading spinner keep enabled✕ Don'tDisable button during submit<button>{loading ? <Spinner /> : 'Submit'}</button><button disabled={loading}>Submit</button> - Avoid Layout Reads Performance · Web Medium Ver →
Avoid layout reads during render phase
✓ DoRead layout in effects or callbacks✕ Don'tgetBoundingClientRect in renderuseEffect(() => { el.getBoundingClientRect() })const rect = el.getBoundingClientRect() // in render - Batch DOM Operations Performance · Web Medium Ver →
Group DOM operations to minimize reflows
✓ DoBatch writes then reads✕ Don'tInterleave reads and writeswrites.forEach(w => w()); reads.forEach(r => r())write(); read(); write(); read(); // thrashing - Lazy Load Images Performance · Web Medium Ver →
Lazy-load images below the fold
✓ DoUse loading='lazy' for below-fold images✕ Don'tLoad all images eagerly<img loading='lazy' src='...' /><img src='...' /> // above fold only - Deep Linking State · Web Medium Ver →
Stateful components should support deep-linking
✓ DoEnable sharing current view via URL✕ Don'tNo shareable staterouter.push({ query: { ...filters } })setFilters(f) // not in URL - Text Overflow Typography · Web Medium Ver →
Handle text overflow properly
✓ DoUse truncate/line-clamp/break-words✕ Don'tText overflows container<p class='truncate'>Long text...</p><p>Long text...</p> // overflows - No Transition All Anti-Pattern · Web Medium Ver →
Avoid transition: all - specify properties
✓ DoTransition specific properties✕ Don'ttransition: alltransition-colors duration-200transition-all duration-200 - No Hardcoded Dates Anti-Pattern · Web Medium Ver →
Use Intl for date/number formatting
✓ DoUse Intl.DateTimeFormat✕ Don'tHardcoded date formatnew Intl.DateTimeFormat('en').format(date)date.toLocaleDateString() // or manual format - Breadcrumbs Navigation · Web Low Ver →
Show user location in site hierarchy
✓ DoUse for sites with 3+ levels of depth✕ Don'tUse for flat single-level sitesHome > Category > ProductOnly on deep nested pages - Easing Functions Animation · All Low Ver →
Linear motion feels robotic
✓ DoUse ease-out for entering ease-in for exiting✕ Don'tUse linear for UI transitionsease-outlinear - Pull to Refresh Touch · Mobile Low Ver →
Accidental refresh is frustrating
✓ DoDisable where not needed✕ Don'tEnable by default everywhereoverscroll-behavior: containDefault overscroll - Haptic Feedback Touch · Mobile Low Ver →
Tactile feedback improves interaction feel
✓ DoUse for confirmations and important actions✕ Don'tOveruse vibration feedbacknavigator.vibrate(10)Vibrate on every tap - Date Formatting Content · All Low Ver →
Use locale-appropriate date formats
✓ DoUse relative or locale-aware dates✕ Don'tAmbiguous date formats2 hours ago or locale format01/02/03 - Number Formatting Content · All Low Ver →
Format large numbers for readability
✓ DoUse thousand separators or abbreviations✕ Don'tLong unformatted numbers1.2K or 1,2341234567 - Placeholder Content Content · All Low Ver →
Show realistic placeholders during dev
✓ DoUse realistic sample data✕ Don'tLorem ipsum everywhereReal sample contentLorem ipsum - Bulk Actions Data Entry · Web Low Ver →
Editing one by one is tedious
✓ DoAllow multi-select and bulk edit✕ Don'tSingle row actions onlyCheckbox column + Action barRepeated actions per row - Feedback Loop AI Interaction · All Low Ver →
AI needs user feedback to improve
✓ DoThumps up/down or 'Regenerate'✕ Don'tStatic output onlyFeedback componentRead-only text - Spellcheck Disable Forms · Web Low Ver →
Disable spellcheck on emails and codes
✓ DoSet spellcheck='false' on codes✕ Don'tSpellcheck on technical input<input spellCheck='false' type='email' /><input type='email' /> // red squiggles - Proper Unicode Typography · Web Low Ver →
Use proper Unicode characters
✓ DoUse ... curly quotes proper dashes✕ Don'tASCII approximations'Hello...' with proper ellipsis'Hello...' with three dots - Preconnect CDN Performance · Web Ver →
Add preconnect links for CDN domains
✓ DoPreconnect to known domains✕ Don't<link rel='preconnect' href='https://cdn.example.com' />// no preconnect hintLow - Non-Breaking Spaces Typography · Web Ver →
Use non-breaking spaces for units and brand names
✓ DoUse between number and unit✕ Don't10 kg or Next.js 1410 kg // may wrapLow - No Zoom Disable Anti-Pattern · Web Ver →
Never disable zoom in viewport meta
✓ DoAllow user zoom✕ Don't<meta name='viewport' content='width=device-width'><meta name='viewport' content='maximum-scale=1'>Critical
03 Prompts de estilo (copy-paste)
- ✦ Minimalism & Swiss Style display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessary Ver →
Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows and gradients. Focus on clarity and functionality.
display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessaryChecklist: ☐ Grid-based layout 12-16 columns, ☐ Typography hierarchy clear, ☐ No unnecessary decorations, ☐ WCAG AAA contrast verified, ☐ Mobile responsive grid
- ✦ Neumorphism border-radius: 12-16px, box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8), background: linear-gradient(145deg, color1, color2), transform: scale on press Ver →
Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color scheme with light/dark variations. Embossed/debossed effect on interactive elements.
border-radius: 12-16px, box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8), background: linear-gradient(145deg, color1, color2), transform: scale on pressChecklist: ☐ Rounded corners 12-16px consistent, ☐ Multiple shadow layers (2-3), ☐ Pastel color verified, ☐ Monochromatic palette checked, ☐ Press animation smooth 150ms
- ✦ Glassmorphism backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2), -webkit-backdrop-filter: blur(15px), z-index layering for depth Ver →
Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders, light source reflection, layered depth. Perfect for modern overlays and cards.
backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2), -webkit-backdrop-filter: blur(15px), z-index layering for depthChecklist: ☐ Backdrop-filter blur 10-20px, ☐ Translucent white 15-30% opacity, ☐ Subtle border 1px light, ☐ Vibrant background verified, ☐ Text contrast 4.5:1 checked
- ✦ Brutalism border-radius: 0px, transition: none or 0s, font-family: system-ui or monospace, font-weight: 700+, border: visible 2-4px, colors: #FF0000, #0000FF, #FFFF00, #000000, #FFFFFF Ver →
Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp corners, bold large typography, visible grid lines, default system fonts, intentional 'broken' design elements.
border-radius: 0px, transition: none or 0s, font-family: system-ui or monospace, font-weight: 700+, border: visible 2-4px, colors: #FF0000, #0000FF, #FFFF00, #000000, #FFFFFFChecklist: ☐ No border-radius (0px), ☐ No transitions (instant), ☐ Bold typography (700+), ☐ Pure primary colors used, ☐ Visible grid/borders, ☐ Asymmetric layout intentional
- ✦ 3D & Hyperrealism transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow() Ver →
Build an immersive 3D interface using realistic textures, 3D models (Three.js/Babylon.js), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based motion. Include skeuomorphic elements with tactile detail.
transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow()Checklist: ☐ WebGL/Three.js integrated, ☐ 3D models loaded, ☐ Parallax 3-5 layers, ☐ Realistic lighting verified, ☐ Complex shadows rendered, ☐ Physics animation smooth 300-400ms
- ✦ Vibrant & Block-based display: flex/grid with large gaps (48px+), font-size: 32px+, background: animated patterns (CSS), color: neon/vibrant colors, animation: continuous pattern movement Ver →
Design an energetic, vibrant interface with bold block layouts, geometric shapes, high color contrast, large typography (32px+), animated background patterns, duotone effects. Perfect for startups and youth-focused apps. Use 4-6 contrasting colors from complementary/triadic schemes.
display: flex/grid with large gaps (48px+), font-size: 32px+, background: animated patterns (CSS), color: neon/vibrant colors, animation: continuous pattern movementChecklist: ☐ Block layout with 48px+ gaps, ☐ Large typography 32px+, ☐ 4-6 vibrant colors max, ☐ Animated patterns active, ☐ Scroll-snap enabled, ☐ High contrast verified (7:1+)
- ✦ Dark Mode (OLED) background: #000000 or #121212, color: #FFFFFF or #E0E0E0, text-shadow: 0 0 10px neon-color (sparingly), filter: brightness(0.8) if needed, color-scheme: dark Ver →
Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), midnight blue accents. Use minimal glow effects, vibrant neon accents (green, blue, gold, purple), high contrast text. Optimize for eye comfort and OLED power saving.
background: #000000 or #121212, color: #FFFFFF or #E0E0E0, text-shadow: 0 0 10px neon-color (sparingly), filter: brightness(0.8) if needed, color-scheme: darkChecklist: ☐ Deep black #000000 or #121212, ☐ Vibrant neon accents used, ☐ Text contrast 7:1+, ☐ Minimal glow effects, ☐ OLED power optimization, ☐ No white (#FFFFFF) background
- ✦ Accessible & Ethical color-contrast: 7:1+, font-size: 16px+, outline: 3-4px on :focus-visible, aria-label, role attributes, @media (prefers-reduced-motion), touch-target: 44x44px, cursor: pointer Ver →
Design with WCAG AAA compliance. Include: high contrast (7:1+), large text (16px+), keyboard navigation, screen reader compatibility, focus states visible (3-4px ring), semantic HTML, ARIA labels, skip links, reduced motion support (prefers-reduced-motion), 44x44px touch targets.
color-contrast: 7:1+, font-size: 16px+, outline: 3-4px on :focus-visible, aria-label, role attributes, @media (prefers-reduced-motion), touch-target: 44x44px, cursor: pointerChecklist: ☐ WCAG AAA verified, ☐ 7:1+ contrast checked, ☐ Keyboard navigation tested, ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ Semantic HTML used, ☐ Touch targets 44x44px
- ✦ Claymorphism border-radius: 16-24px, border: 3-4px solid, box-shadow: inset -2px -2px 8px, 4px 4px 8px, background: pastel-gradient, animation: soft bounce (cubic-bezier 0.34, 1.56) Ver →
Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer), pastel colors, smooth animations. Perfect for children's apps and creative tools.
border-radius: 16-24px, border: 3-4px solid, box-shadow: inset -2px -2px 8px, 4px 4px 8px, background: pastel-gradient, animation: soft bounce (cubic-bezier 0.34, 1.56)Checklist: ☐ Border-radius 16-24px, ☐ Thick borders 3-4px, ☐ Double shadows (inner+outer), ☐ Pastel colors used, ☐ Soft bounce animations, ☐ Playful interactions
- ✦ Aurora UI background: conic-gradient or radial-gradient with multiple stops, animation: @keyframes gradient (8-12s), background-size: 200% 200%, filter: saturate(1.2), blend-mode: screen or multiply Ver →
Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs (blue-orange, purple-yellow), flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects.
background: conic-gradient or radial-gradient with multiple stops, animation: @keyframes gradient (8-12s), background-size: 200% 200%, filter: saturate(1.2), blend-mode: screen or multiplyChecklist: ☐ Mesh/flowing gradients applied, ☐ 8-12s animation loop, ☐ Complementary colors used, ☐ Smooth color transitions, ☐ Iridescent effect subtle, ☐ Text contrast verified
- ✦ Retro-Futurism color: neon colors (#0080FF, #FF006E, #00FFFF), text-shadow: 0 0 10px neon, background: #000 or #1A1A2E, font-family: monospace, animation: glitch (skew+offset), filter: hue-rotate Ver →
Build a retro-futuristic (cyberpunk/vaporwave) interface with neon colors (blue, pink, cyan), deep black background, 80s aesthetic, CRT scanlines, glitch effects, neon glow text/borders, monospace fonts, geometric patterns. Use neon text-shadow and animated glitch effects.
color: neon colors (#0080FF, #FF006E, #00FFFF), text-shadow: 0 0 10px neon, background: #000 or #1A1A2E, font-family: monospace, animation: glitch (skew+offset), filter: hue-rotateChecklist: ☐ Neon colors used, ☐ CRT scanlines effect, ☐ Glitch animations active, ☐ Monospace font, ☐ Deep black background, ☐ Glow effects applied, ☐ 80s patterns present
- ✦ Flat Design box-shadow: none, background: solid color, border-radius: 0-4px, color: solid (no gradients), fill: solid, stroke: 1-2px, font: bold sans-serif, icons: simplified SVG Ver →
Create a flat, 2D interface with bold colors, no shadows/gradients, clean lines, simple geometric shapes, icon-heavy, typography-focused, minimal ornamentation. Use 4-6 solid, bright colors in a limited palette with high saturation.
box-shadow: none, background: solid color, border-radius: 0-4px, color: solid (no gradients), fill: solid, stroke: 1-2px, font: bold sans-serif, icons: simplified SVGChecklist: ☐ No shadows/gradients, ☐ 4-6 solid colors max, ☐ Clean lines consistent, ☐ Simple shapes used, ☐ Icon-heavy layout, ☐ High saturation colors, ☐ Fast loading verified
- ✦ Skeuomorphism background: complex gradient (8-12 stops), box-shadow: realistic multi-layer, background-image: texture overlay (noise, grain), filter: drop-shadow, transform: scale on press (300-500ms) Ver →
Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture overlays, tactile press animations. Perfect for premium/luxury products.
background: complex gradient (8-12 stops), box-shadow: realistic multi-layer, background-image: texture overlay (noise, grain), filter: drop-shadow, transform: scale on press (300-500ms)Checklist: ☐ Realistic textures applied, ☐ Complex gradients 8-12 stops, ☐ Multi-layer shadows, ☐ Texture overlays present, ☐ Tactile animations smooth, ☐ Depth effect pronounced
- ✦ Liquid Glass animation: morphing SVG paths (400-600ms), backdrop-filter: blur + saturate, filter: hue-rotate + brightness, blend-mode: screen, background: iridescent gradient Ver →
Create a premium liquid glass effect with morphing shapes, flowing animations, chromatic aberration, iridescent gradients, smooth 400-600ms transitions. Use SVG morphing for shape changes, dynamic blur, smooth color transitions creating a fluid, premium feel.
animation: morphing SVG paths (400-600ms), backdrop-filter: blur + saturate, filter: hue-rotate + brightness, blend-mode: screen, background: iridescent gradientChecklist: ☐ Morphing animations 400-600ms, ☐ Chromatic aberration applied, ☐ Dynamic blur active, ☐ Iridescent gradients, ☐ Smooth color transitions, ☐ Premium feel achieved
- ✦ Motion-Driven animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400ms Ver →
Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations, page transitions. Use Intersection Observer for scroll effects, transform for performance, GPU acceleration.
animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400msChecklist: ☐ Scroll animations active, ☐ Parallax 3-5 layers, ☐ Entrance animations smooth, ☐ Page transitions fluid, ☐ GPU accelerated, ☐ Prefers-reduced-motion respected
- ✦ Micro-interactions animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop Ver →
Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover effects, haptic feedback triggers for mobile. Focus on responsive, contextual interactions.
animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loopChecklist: ☐ Micro-animations 50-100ms, ☐ Gesture-responsive, ☐ Tactile feedback visual/haptic, ☐ Loading spinners smooth, ☐ Success/error states clear, ☐ Hover effects subtle
- ✦ Inclusive Design aria-* attributes complete, role attributes semantic, focus-visible: 3-4px ring, color-contrast: 7:1+, @media (prefers-reduced-motion), alt text on all images, form labels properly associated Ver →
Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, WCAG AAA compliance, symbol-based color indicators (not color-only), haptic feedback, voice interaction support, reduced motion options.
aria-* attributes complete, role attributes semantic, focus-visible: 3-4px ring, color-contrast: 7:1+, @media (prefers-reduced-motion), alt text on all images, form labels properly associatedChecklist: ☐ WCAG AAA verified, ☐ 7:1+ contrast all text, ☐ Keyboard accessible (Tab/Enter), ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ No color-only indicators, ☐ Haptic fallback
- ✦ Zero Interface voice-commands: Web Speech API, gesture-detection: touch events, AI-predictions: hidden by default (reveal on hover), progressive-disclosure: show on demand, minimal UI visible Ver →
Create a voice-first, gesture-based, AI-driven interface with minimal visible UI, progressive disclosure, voice recognition UI, gesture detection, AI predictions, smart suggestions, context-aware actions. Hide controls until needed.
voice-commands: Web Speech API, gesture-detection: touch events, AI-predictions: hidden by default (reveal on hover), progressive-disclosure: show on demand, minimal UI visibleChecklist: ☐ Voice commands responsive, ☐ Gesture detection active, ☐ AI predictions hidden/revealed, ☐ Progressive disclosure working, ☐ Minimal visible UI, ☐ Smart suggestions contextual
- ✦ Soft UI Evolution box-shadow: softer multi-layer (0 2px 4px), background: improved contrast pastels, border-radius: 8-12px, animation: 200-300ms smooth, outline: 2-3px on focus, contrast: 4.5:1+ Ver →
Design evolved neumorphism with improved contrast (WCAG AA+), modern aesthetics, subtle depth, accessibility focus. Use soft shadows (softer than flat but clearer than pure neumorphism), better color hierarchy, improved focus states, modern 200-300ms animations.
box-shadow: softer multi-layer (0 2px 4px), background: improved contrast pastels, border-radius: 8-12px, animation: 200-300ms smooth, outline: 2-3px on focus, contrast: 4.5:1+Checklist: ☐ Improved contrast AA/AAA, ☐ Soft shadows modern, ☐ Border-radius 8-12px, ☐ Animations 200-300ms, ☐ Focus states visible, ☐ Color hierarchy clear
- ✦ Bento Grids display: grid, grid-template-columns: repeat(auto-fit, minmax(...)), gap: 1rem, border-radius: 20px, background: #FFF, box-shadow: subtle Ver →
Design a Bento Grid layout. Use: modular grid system, rounded corners (16-24px), different card sizes (1x1, 2x1, 2x2), card-based hierarchy, soft backgrounds (#F5F5F7), subtle borders, content-first, Apple-style aesthetic.
display: grid, grid-template-columns: repeat(auto-fit, minmax(...)), gap: 1rem, border-radius: 20px, background: #FFF, box-shadow: subtleChecklist: ☐ Grid layout (CSS Grid), ☐ Rounded corners 16-24px, ☐ Varied card spans, ☐ Content fits card size, ☐ Responsive re-flow, ☐ Apple-like aesthetic
- ✦ Neubrutalism border: 3px solid black, box-shadow: 5px 5px 0px black, colors: #FFDB58 #FF6B6B #4ECDC4, font-weight: 700, no gradients Ver →
Design a neubrutalist interface. Use: high contrast, hard black borders (3px+), bright pop colors, no blur, sharp or slightly rounded corners, bold typography, hard shadows (offset 4px 4px), raw aesthetic but functional.
border: 3px solid black, box-shadow: 5px 5px 0px black, colors: #FFDB58 #FF6B6B #4ECDC4, font-weight: 700, no gradientsChecklist: ☐ Hard borders (2-4px), ☐ Hard offset shadows, ☐ High saturation colors, ☐ Bold typography, ☐ No blurs/gradients, ☐ Distinctive 'ugly-cute' look
- ✦ HUD / Sci-Fi FUI border: 1px solid rgba(0,255,255,0.5), color: #00FFFF, background: transparent or rgba(0,0,0,0.8), font-family: monospace, text-shadow: 0 0 5px cyan Ver →
Design a futuristic HUD (Heads Up Display) or FUI. Use: thin lines (1px), neon cyan/blue on black, technical markers, decorative brackets, data visualization, monospaced tech fonts, glowing elements, transparency.
border: 1px solid rgba(0,255,255,0.5), color: #00FFFF, background: transparent or rgba(0,0,0,0.8), font-family: monospace, text-shadow: 0 0 5px cyanChecklist: ☐ Fine lines 1px, ☐ Neon glow text/borders, ☐ Monospaced font, ☐ Dark/Transparent BG, ☐ Decorative tech markers, ☐ Holographic feel
- ✦ Pixel Art font-family: 'Press Start 2P', image-rendering: pixelated, box-shadow: 4px 0 0 #000 (pixel border), no anti-aliasing Ver →
Design a pixel art inspired interface. Use: pixelated fonts, 8-bit or 16-bit aesthetic, sharp edges (image-rendering: pixelated), limited color palette, blocky UI elements, retro gaming feel.
font-family: 'Press Start 2P', image-rendering: pixelated, box-shadow: 4px 0 0 #000 (pixel border), no anti-aliasingChecklist: ☐ Pixelated fonts loaded, ☐ Images sharp (no blur), ☐ CSS box-shadow for pixel borders, ☐ Retro palette, ☐ Blocky layout