{
  "schemaVersion": "1.0",
  "item": {
    "slug": "ui-design",
    "name": "UI Design",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/wpank/ui-design",
    "canonicalUrl": "https://clawhub.ai/wpank/ui-design",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/ui-design",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-design",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/ui-design"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/ui-design",
    "agentPageUrl": "https://openagent3.xyz/skills/ui-design/agent",
    "manifestUrl": "https://openagent3.xyz/skills/ui-design/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/ui-design/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "UI Design Fundamentals",
        "body": "The definitive guide for building production-grade web interfaces. Covers the full stack of design decisions from layout to motion."
      },
      {
        "title": "WHEN To Use",
        "body": "Designing new UI components or pages\nBuilding landing pages, dashboards, or applications\nReviewing code for design quality\nCreating distinctive interfaces that avoid generic aesthetics\nImplementing accessibility requirements"
      },
      {
        "title": "KEYWORDS",
        "body": "ui design, web design, layout, typography, color palette, spacing, visual hierarchy, responsive design, accessibility, motion design, component design, design tokens, frontend, css, tailwind"
      },
      {
        "title": "The 80/20 of Design Quality",
        "body": "FactorImpactTime InvestmentTypography40%Choose 1-2 fonts wellSpacing25%Use consistent scaleColor20%Limit palette, ensure contrastEverything else15%Shadows, borders, motion\n\nFocus on typography and spacing first. They're 65% of perceived quality."
      },
      {
        "title": "Commit to a Direction",
        "body": "Mediocrity is forgettable. Pick an extreme:\n\nDirectionCharacteristicsUse WhenBrutally MinimalStark, essential, nothing extraDeveloper tools, productivityLuxury/RefinedPremium, subtle eleganceHigh-end products, fashionPlayfulFun, bright, approachableConsumer apps, gamesEditorialType-forward, grid-basedContent sites, magazinesIndustrialFunction-forward, robustB2B, enterprise"
      },
      {
        "title": "Grid vs Flexbox Decision",
        "body": "Layout NeedToolWhyPage-level structureCSS Grid (grid-template-areas)Named regions, explicit controlNavigation barsFlexboxSingle-axis, gap spacingCard gridsGrid (auto-fill/auto-fit)Responsive without media queriesCenteringGrid (place-items: center)Shortest, most reliableSidebar + contentGrid (250px 1fr)Fixed + fluidStacking/overlapsGrid + grid-area: 1/1No position: absolute needed"
      },
      {
        "title": "Container Strategy",
        "body": "/* Standard content width */\n.container {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding-inline: clamp(1rem, 5vw, 3rem);\n}\n\n/* Full-bleed with contained content */\n.full-bleed {\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\n}"
      },
      {
        "title": "Common Layout Mistakes",
        "body": "MistakeProblemFixMixing container widthsInconsistent alignmentUse single max-w-* valueContent behind fixed navbarHidden contentAdd pt-[navbar-height]No mobile paddingEdge-to-edge textAdd px-4 minimumCentered everythingWeak hierarchyLeft-align body text"
      },
      {
        "title": "Typography",
        "body": "Typography carries 90% of a design's personality."
      },
      {
        "title": "Font Pairing by Context",
        "body": "ContextDisplay FontBody FontExampleEditorialHigh-contrast serifNeutral humanistPlayfair + Source SansSaaSGeometric sansMatching sansDM Sans + DM MonoLuxuryThin modern serifElegant sansCormorant + JostDeveloperMonospace displayMonospace bodyJetBrains Mono + IBM PlexPlayfulRounded/quirkyClean readableNunito + Outfit"
      },
      {
        "title": "Type Scale (1.25 ratio)",
        "body": "--text-xs: 0.64rem;   /* 10px - captions */\n--text-sm: 0.8rem;    /* 13px - secondary */\n--text-base: 1rem;    /* 16px - body */\n--text-lg: 1.25rem;   /* 20px - lead */\n--text-xl: 1.563rem;  /* 25px - h4 */\n--text-2xl: 1.953rem; /* 31px - h3 */\n--text-3xl: 2.441rem; /* 39px - h2 */\n--text-4xl: 3.052rem; /* 49px - h1 */"
      },
      {
        "title": "Typography Rules",
        "body": "RuleValueWhyMinimum body size16pxBelow is hard to readBody line-height1.5-1.75Improves readabilityHeading line-height1.1-1.2Tighter for large textLine length60-75 charactersOptimal readingParagraph spacing1.5emClear separation"
      },
      {
        "title": "Typography Mistakes",
        "body": "MistakeProblemFixSystem fonts onlyGeneric lookUse Google Fonts or variable fontsToo many fontsVisual chaosMax 2 familiesWeak weight contrastPoor hierarchyBold headings (600+), regular bodyLong linesHard to readAdd max-w-prose (65ch)"
      },
      {
        "title": "Building a Palette",
        "body": "Every palette needs five functional roles:\n\nRolePurposeUsagePrimaryBrand identityButtons, links, active statesNeutralText, backgroundsBody text, cards, dividersAccentSecondary actionsTags, badges, highlightsSemanticFeedbackSuccess/warning/error statesSurfaceLayered backgroundsCards, modals, overlays"
      },
      {
        "title": "Surface Layering (Dark Mode)",
        "body": "Create depth through lightness, not shadows:\n\n:root {\n  --surface-0: hsl(220 15% 8%);   /* page background */\n  --surface-1: hsl(220 15% 12%);  /* card */\n  --surface-2: hsl(220 15% 16%);  /* raised element */\n  --surface-3: hsl(220 15% 20%);  /* popover/modal */\n}"
      },
      {
        "title": "Contrast Requirements (WCAG)",
        "body": "Text SizeMinimum RatioEnhanced (AAA)Normal text (<18px)4.5:17:1Large text (≥18px bold, ≥24px)3:14.5:1UI components3:1—"
      },
      {
        "title": "Color Mistakes",
        "body": "MistakeProblemFixPurple gradient on white\"AI aesthetic\" clichéUse intentional brand colorsLow contrast textAccessibility failTest with contrast checkerColor-only indicatorsColorblind users excludedAdd icons/textToo many colorsVisual noise3-5 colors maximumLight gray text on whiteUnreadableslate-600 minimum"
      },
      {
        "title": "8px Base Unit Scale",
        "body": "--space-1: 0.25rem;  /* 4px - tight gaps */\n--space-2: 0.5rem;   /* 8px - input padding */\n--space-3: 0.75rem;  /* 12px - button padding */\n--space-4: 1rem;     /* 16px - default spacing */\n--space-6: 1.5rem;   /* 24px - section padding */\n--space-8: 2rem;     /* 32px - section gaps */\n--space-12: 3rem;    /* 48px - major breaks */\n--space-16: 4rem;    /* 64px - page rhythm */"
      },
      {
        "title": "Spacing Rules",
        "body": "RuleImplementationUse gap not marginsdisplay: flex; gap: var(--space-4)Consistent paddingSame values on all cards/sectionsMore space between groupsLess space within groups (Gestalt)No arbitrary valuesOnly use scale tokens"
      },
      {
        "title": "Spacing Mistakes",
        "body": "MistakeProblemFixArbitrary pixel valuesInconsistent rhythmUse spacing scale onlyMargin on childrenMargin collapse bugsUse gap on parentEqual spacing everywhereNo visual groupingMore between, less withinTight mobile paddingCramped feelingMinimum p-4 on mobile"
      },
      {
        "title": "Visual Hierarchy",
        "body": "Guide the eye through deliberate contrast."
      },
      {
        "title": "Hierarchy Techniques",
        "body": "TechniqueHowImpactSizeHero 3-4x bodyImmediate focal pointWeightBold headings, regular bodyScannabilityColorPrimary vs mutedInformation layersSpaceIsolation creates emphasisDraws attentionPositionTop-left anchors readingNatural flow"
      },
      {
        "title": "Card Hierarchy Pattern",
        "body": "Eyebrow  ← xs, uppercase, muted color\nTitle    ← xl, semibold, primary color\nBody     ← base, secondary color, 1.6 line-height\nAction   ← spaced apart, mt-4 minimum"
      },
      {
        "title": "Breakpoint Strategy",
        "body": "BreakpointTargetKey Changes< 640pxMobileSingle column, stacked nav, 44px touch targets640-1024pxTabletTwo columns, collapsible sidebars1024-1440pxDesktopFull layout, hover enabled> 1440pxWideMax-width container, prevent ultra-wide lines"
      },
      {
        "title": "Fluid Techniques",
        "body": "/* Fluid typography */\nh1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }\n\n/* Fluid spacing */\nsection { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }\n\n/* Intrinsic grid */\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));\n  gap: var(--space-6);\n}"
      },
      {
        "title": "Responsive Mistakes",
        "body": "MistakeProblemFixNo viewport metaBroken mobileAdd width=device-widthFixed widthsOverflow on mobileUse max-w-* and %Tiny touch targetsFrustrating tapsMinimum 44x44pxHidden horizontal scrollBroken layoutTest at 375px width"
      },
      {
        "title": "Accessibility",
        "body": "Accessibility is not optional."
      },
      {
        "title": "Critical Requirements",
        "body": "RequirementImplementationStandardColor contrast4.5:1 normal, 3:1 largeWCAG 2.1 AAKeyboard navigationTab order matches visualWCAG 2.1.1Focus indicatorsVisible :focus-visible ringWCAG 2.4.7Semantic HTML<button>, <nav>, <main>WCAG 1.3.1Alt textDescriptive for imagesWCAG 1.1.1Motion safetyprefers-reduced-motionWCAG 2.3.3Touch targets44×44px minimumWCAG 2.5.8"
      },
      {
        "title": "Focus Styles",
        "body": ":focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n/* Remove default only if custom exists */\n:focus:not(:focus-visible) {\n  outline: none;\n}"
      },
      {
        "title": "Motion Safety",
        "body": "@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}"
      },
      {
        "title": "Motion & Animation",
        "body": "Use motion to communicate, not decorate."
      },
      {
        "title": "Timing Guidelines",
        "body": "InteractionDurationEasingButton hover150msease-outModal open250msease-outModal close200msease-inPage transition300msease-in-outStagger delay50-80ms per item—Micro-feedback100msease-out"
      },
      {
        "title": "Staggered Entrance",
        "body": ".item {\n  opacity: 0;\n  translate: 0 1rem;\n  animation: reveal 0.5s ease-out forwards;\n}\n.item:nth-child(1) { animation-delay: 0ms; }\n.item:nth-child(2) { animation-delay: 60ms; }\n.item:nth-child(3) { animation-delay: 120ms; }\n\n@keyframes reveal {\n  to { opacity: 1; translate: 0 0; }\n}"
      },
      {
        "title": "Motion Mistakes",
        "body": "MistakeProblemFixAnimating width/heightPerformance hitUse transform only> 500ms durationFeels sluggish150-300ms for mostMotion everywhereOverwhelmingFocus on entrances/exitsNo reduced-motionAccessibility failAlways check preference"
      },
      {
        "title": "Component States",
        "body": "Every interactive element needs clear states.\n\nStateVisual TreatmentDefaultBase stylingHoverSubtle background/shadow shiftActive/PressedSlight inset, reduced shadowFocusHigh-visibility ringDisabled50% opacity, not-allowed cursorLoadingSpinner or skeleton"
      },
      {
        "title": "Button Example",
        "body": ".btn {\n  transition: all 150ms ease-out;\n}\n.btn:hover {\n  background: var(--color-primary-600);\n}\n.btn:active {\n  transform: scale(0.98);\n}\n.btn:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}"
      },
      {
        "title": "Design Tokens Architecture",
        "body": "Structure tokens in three layers:\n\n/* Layer 1: Primitives */\n--blue-500: oklch(0.55 0.2 250);\n--gray-100: oklch(0.95 0.005 250);\n--radius-md: 0.5rem;\n\n/* Layer 2: Semantic */\n--color-primary: var(--blue-500);\n--color-surface: var(--gray-100);\n--radius-button: var(--radius-md);\n\n/* Layer 3: Component */\n--btn-bg: var(--color-primary);\n--btn-radius: var(--radius-button);\n--btn-padding: var(--space-2) var(--space-4);\n\nThis allows theme switching by remapping Layer 2 only."
      },
      {
        "title": "Typography",
        "body": "Intentional font pairing (not system defaults)\n Consistent type scale\n Line length ≤ 75 characters\n 16px minimum body text"
      },
      {
        "title": "Color",
        "body": "Cohesive palette (3-5 colors)\n WCAG contrast met (4.5:1 normal, 3:1 large)\n Semantic colors defined\n Dark mode tested (if applicable)"
      },
      {
        "title": "Spacing",
        "body": "Consistent rhythm using scale\n No arbitrary pixel values\n Proper mobile padding"
      },
      {
        "title": "Hierarchy",
        "body": "Clear visual flow\n Primary action obvious\n Information layered by importance"
      },
      {
        "title": "Responsive",
        "body": "Mobile tested (375px)\n No horizontal overflow\n Touch targets ≥ 44px"
      },
      {
        "title": "Accessibility",
        "body": "Keyboard navigable\n Focus visible\n Screen reader tested\n Motion-safe"
      },
      {
        "title": "States",
        "body": "Hover on all interactive elements\n Focus-visible on all focusable\n Loading states for async\n Error states for forms"
      },
      {
        "title": "Performance",
        "body": "Images optimized (WebP, srcset)\n Fonts subset\n Animations use transform/opacity"
      },
      {
        "title": "NEVER Do",
        "body": "NEVER skip contrast checking — Test every text/background combination\nNEVER use color alone — Always pair with icons/text for meaning\nNEVER remove focus outlines — Unless replacing with visible alternative\nNEVER use arbitrary spacing — Stick to the scale\nNEVER animate layout properties — Only transform and opacity\nNEVER ignore reduced-motion — Always check the preference\nNEVER center everything — Left-align body text\nNEVER use tiny touch targets — 44px minimum\nNEVER use low-contrast text — slate-600 minimum on white\nNEVER use generic system fonts — Choose intentional typography"
      },
      {
        "title": "Related Skills",
        "body": "ui-ux-pro-max — Searchable design databases with CLI\nfrontend-design — Creative aesthetics, avoiding \"AI slop\"\ntheme-factory — Applying themes to artifacts\ndesign-system-patterns — Token architecture and theming"
      }
    ],
    "body": "UI Design Fundamentals\n\nThe definitive guide for building production-grade web interfaces. Covers the full stack of design decisions from layout to motion.\n\nWHEN To Use\nDesigning new UI components or pages\nBuilding landing pages, dashboards, or applications\nReviewing code for design quality\nCreating distinctive interfaces that avoid generic aesthetics\nImplementing accessibility requirements\nKEYWORDS\n\nui design, web design, layout, typography, color palette, spacing, visual hierarchy, responsive design, accessibility, motion design, component design, design tokens, frontend, css, tailwind\n\nDesign Philosophy\nThe 80/20 of Design Quality\nFactor\tImpact\tTime Investment\nTypography\t40%\tChoose 1-2 fonts well\nSpacing\t25%\tUse consistent scale\nColor\t20%\tLimit palette, ensure contrast\nEverything else\t15%\tShadows, borders, motion\n\nFocus on typography and spacing first. They're 65% of perceived quality.\n\nCommit to a Direction\n\nMediocrity is forgettable. Pick an extreme:\n\nDirection\tCharacteristics\tUse When\nBrutally Minimal\tStark, essential, nothing extra\tDeveloper tools, productivity\nLuxury/Refined\tPremium, subtle elegance\tHigh-end products, fashion\nPlayful\tFun, bright, approachable\tConsumer apps, games\nEditorial\tType-forward, grid-based\tContent sites, magazines\nIndustrial\tFunction-forward, robust\tB2B, enterprise\nLayout\nGrid vs Flexbox Decision\nLayout Need\tTool\tWhy\nPage-level structure\tCSS Grid (grid-template-areas)\tNamed regions, explicit control\nNavigation bars\tFlexbox\tSingle-axis, gap spacing\nCard grids\tGrid (auto-fill/auto-fit)\tResponsive without media queries\nCentering\tGrid (place-items: center)\tShortest, most reliable\nSidebar + content\tGrid (250px 1fr)\tFixed + fluid\nStacking/overlaps\tGrid + grid-area: 1/1\tNo position: absolute needed\nContainer Strategy\n/* Standard content width */\n.container {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding-inline: clamp(1rem, 5vw, 3rem);\n}\n\n/* Full-bleed with contained content */\n.full-bleed {\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\n}\n\nCommon Layout Mistakes\nMistake\tProblem\tFix\nMixing container widths\tInconsistent alignment\tUse single max-w-* value\nContent behind fixed navbar\tHidden content\tAdd pt-[navbar-height]\nNo mobile padding\tEdge-to-edge text\tAdd px-4 minimum\nCentered everything\tWeak hierarchy\tLeft-align body text\nTypography\n\nTypography carries 90% of a design's personality.\n\nFont Pairing by Context\nContext\tDisplay Font\tBody Font\tExample\nEditorial\tHigh-contrast serif\tNeutral humanist\tPlayfair + Source Sans\nSaaS\tGeometric sans\tMatching sans\tDM Sans + DM Mono\nLuxury\tThin modern serif\tElegant sans\tCormorant + Jost\nDeveloper\tMonospace display\tMonospace body\tJetBrains Mono + IBM Plex\nPlayful\tRounded/quirky\tClean readable\tNunito + Outfit\nType Scale (1.25 ratio)\n--text-xs: 0.64rem;   /* 10px - captions */\n--text-sm: 0.8rem;    /* 13px - secondary */\n--text-base: 1rem;    /* 16px - body */\n--text-lg: 1.25rem;   /* 20px - lead */\n--text-xl: 1.563rem;  /* 25px - h4 */\n--text-2xl: 1.953rem; /* 31px - h3 */\n--text-3xl: 2.441rem; /* 39px - h2 */\n--text-4xl: 3.052rem; /* 49px - h1 */\n\nTypography Rules\nRule\tValue\tWhy\nMinimum body size\t16px\tBelow is hard to read\nBody line-height\t1.5-1.75\tImproves readability\nHeading line-height\t1.1-1.2\tTighter for large text\nLine length\t60-75 characters\tOptimal reading\nParagraph spacing\t1.5em\tClear separation\nTypography Mistakes\nMistake\tProblem\tFix\nSystem fonts only\tGeneric look\tUse Google Fonts or variable fonts\nToo many fonts\tVisual chaos\tMax 2 families\nWeak weight contrast\tPoor hierarchy\tBold headings (600+), regular body\nLong lines\tHard to read\tAdd max-w-prose (65ch)\nColor\nBuilding a Palette\n\nEvery palette needs five functional roles:\n\nRole\tPurpose\tUsage\nPrimary\tBrand identity\tButtons, links, active states\nNeutral\tText, backgrounds\tBody text, cards, dividers\nAccent\tSecondary actions\tTags, badges, highlights\nSemantic\tFeedback\tSuccess/warning/error states\nSurface\tLayered backgrounds\tCards, modals, overlays\nSurface Layering (Dark Mode)\n\nCreate depth through lightness, not shadows:\n\n:root {\n  --surface-0: hsl(220 15% 8%);   /* page background */\n  --surface-1: hsl(220 15% 12%);  /* card */\n  --surface-2: hsl(220 15% 16%);  /* raised element */\n  --surface-3: hsl(220 15% 20%);  /* popover/modal */\n}\n\nContrast Requirements (WCAG)\nText Size\tMinimum Ratio\tEnhanced (AAA)\nNormal text (<18px)\t4.5:1\t7:1\nLarge text (≥18px bold, ≥24px)\t3:1\t4.5:1\nUI components\t3:1\t—\nColor Mistakes\nMistake\tProblem\tFix\nPurple gradient on white\t\"AI aesthetic\" cliché\tUse intentional brand colors\nLow contrast text\tAccessibility fail\tTest with contrast checker\nColor-only indicators\tColorblind users excluded\tAdd icons/text\nToo many colors\tVisual noise\t3-5 colors maximum\nLight gray text on white\tUnreadable\tslate-600 minimum\nSpacing\n8px Base Unit Scale\n--space-1: 0.25rem;  /* 4px - tight gaps */\n--space-2: 0.5rem;   /* 8px - input padding */\n--space-3: 0.75rem;  /* 12px - button padding */\n--space-4: 1rem;     /* 16px - default spacing */\n--space-6: 1.5rem;   /* 24px - section padding */\n--space-8: 2rem;     /* 32px - section gaps */\n--space-12: 3rem;    /* 48px - major breaks */\n--space-16: 4rem;    /* 64px - page rhythm */\n\nSpacing Rules\nRule\tImplementation\nUse gap not margins\tdisplay: flex; gap: var(--space-4)\nConsistent padding\tSame values on all cards/sections\nMore space between groups\tLess space within groups (Gestalt)\nNo arbitrary values\tOnly use scale tokens\nSpacing Mistakes\nMistake\tProblem\tFix\nArbitrary pixel values\tInconsistent rhythm\tUse spacing scale only\nMargin on children\tMargin collapse bugs\tUse gap on parent\nEqual spacing everywhere\tNo visual grouping\tMore between, less within\nTight mobile padding\tCramped feeling\tMinimum p-4 on mobile\nVisual Hierarchy\n\nGuide the eye through deliberate contrast.\n\nHierarchy Techniques\nTechnique\tHow\tImpact\nSize\tHero 3-4x body\tImmediate focal point\nWeight\tBold headings, regular body\tScannability\nColor\tPrimary vs muted\tInformation layers\nSpace\tIsolation creates emphasis\tDraws attention\nPosition\tTop-left anchors reading\tNatural flow\nCard Hierarchy Pattern\nEyebrow  ← xs, uppercase, muted color\nTitle    ← xl, semibold, primary color\nBody     ← base, secondary color, 1.6 line-height\nAction   ← spaced apart, mt-4 minimum\n\nResponsive Design\nBreakpoint Strategy\nBreakpoint\tTarget\tKey Changes\n< 640px\tMobile\tSingle column, stacked nav, 44px touch targets\n640-1024px\tTablet\tTwo columns, collapsible sidebars\n1024-1440px\tDesktop\tFull layout, hover enabled\n> 1440px\tWide\tMax-width container, prevent ultra-wide lines\nFluid Techniques\n/* Fluid typography */\nh1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }\n\n/* Fluid spacing */\nsection { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }\n\n/* Intrinsic grid */\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));\n  gap: var(--space-6);\n}\n\nResponsive Mistakes\nMistake\tProblem\tFix\nNo viewport meta\tBroken mobile\tAdd width=device-width\nFixed widths\tOverflow on mobile\tUse max-w-* and %\nTiny touch targets\tFrustrating taps\tMinimum 44x44px\nHidden horizontal scroll\tBroken layout\tTest at 375px width\nAccessibility\n\nAccessibility is not optional.\n\nCritical Requirements\nRequirement\tImplementation\tStandard\nColor contrast\t4.5:1 normal, 3:1 large\tWCAG 2.1 AA\nKeyboard navigation\tTab order matches visual\tWCAG 2.1.1\nFocus indicators\tVisible :focus-visible ring\tWCAG 2.4.7\nSemantic HTML\t<button>, <nav>, <main>\tWCAG 1.3.1\nAlt text\tDescriptive for images\tWCAG 1.1.1\nMotion safety\tprefers-reduced-motion\tWCAG 2.3.3\nTouch targets\t44×44px minimum\tWCAG 2.5.8\nFocus Styles\n:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n/* Remove default only if custom exists */\n:focus:not(:focus-visible) {\n  outline: none;\n}\n\nMotion Safety\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\nMotion & Animation\n\nUse motion to communicate, not decorate.\n\nTiming Guidelines\nInteraction\tDuration\tEasing\nButton hover\t150ms\tease-out\nModal open\t250ms\tease-out\nModal close\t200ms\tease-in\nPage transition\t300ms\tease-in-out\nStagger delay\t50-80ms per item\t—\nMicro-feedback\t100ms\tease-out\nStaggered Entrance\n.item {\n  opacity: 0;\n  translate: 0 1rem;\n  animation: reveal 0.5s ease-out forwards;\n}\n.item:nth-child(1) { animation-delay: 0ms; }\n.item:nth-child(2) { animation-delay: 60ms; }\n.item:nth-child(3) { animation-delay: 120ms; }\n\n@keyframes reveal {\n  to { opacity: 1; translate: 0 0; }\n}\n\nMotion Mistakes\nMistake\tProblem\tFix\nAnimating width/height\tPerformance hit\tUse transform only\n> 500ms duration\tFeels sluggish\t150-300ms for most\nMotion everywhere\tOverwhelming\tFocus on entrances/exits\nNo reduced-motion\tAccessibility fail\tAlways check preference\nComponent States\n\nEvery interactive element needs clear states.\n\nState\tVisual Treatment\nDefault\tBase styling\nHover\tSubtle background/shadow shift\nActive/Pressed\tSlight inset, reduced shadow\nFocus\tHigh-visibility ring\nDisabled\t50% opacity, not-allowed cursor\nLoading\tSpinner or skeleton\nButton Example\n.btn {\n  transition: all 150ms ease-out;\n}\n.btn:hover {\n  background: var(--color-primary-600);\n}\n.btn:active {\n  transform: scale(0.98);\n}\n.btn:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\nDesign Tokens Architecture\n\nStructure tokens in three layers:\n\n/* Layer 1: Primitives */\n--blue-500: oklch(0.55 0.2 250);\n--gray-100: oklch(0.95 0.005 250);\n--radius-md: 0.5rem;\n\n/* Layer 2: Semantic */\n--color-primary: var(--blue-500);\n--color-surface: var(--gray-100);\n--radius-button: var(--radius-md);\n\n/* Layer 3: Component */\n--btn-bg: var(--color-primary);\n--btn-radius: var(--radius-button);\n--btn-padding: var(--space-2) var(--space-4);\n\n\nThis allows theme switching by remapping Layer 2 only.\n\nPre-Delivery Checklist\nTypography\n Intentional font pairing (not system defaults)\n Consistent type scale\n Line length ≤ 75 characters\n 16px minimum body text\nColor\n Cohesive palette (3-5 colors)\n WCAG contrast met (4.5:1 normal, 3:1 large)\n Semantic colors defined\n Dark mode tested (if applicable)\nSpacing\n Consistent rhythm using scale\n No arbitrary pixel values\n Proper mobile padding\nHierarchy\n Clear visual flow\n Primary action obvious\n Information layered by importance\nResponsive\n Mobile tested (375px)\n No horizontal overflow\n Touch targets ≥ 44px\nAccessibility\n Keyboard navigable\n Focus visible\n Screen reader tested\n Motion-safe\nStates\n Hover on all interactive elements\n Focus-visible on all focusable\n Loading states for async\n Error states for forms\nPerformance\n Images optimized (WebP, srcset)\n Fonts subset\n Animations use transform/opacity\nNEVER Do\nNEVER skip contrast checking — Test every text/background combination\nNEVER use color alone — Always pair with icons/text for meaning\nNEVER remove focus outlines — Unless replacing with visible alternative\nNEVER use arbitrary spacing — Stick to the scale\nNEVER animate layout properties — Only transform and opacity\nNEVER ignore reduced-motion — Always check the preference\nNEVER center everything — Left-align body text\nNEVER use tiny touch targets — 44px minimum\nNEVER use low-contrast text — slate-600 minimum on white\nNEVER use generic system fonts — Choose intentional typography\nRelated Skills\nui-ux-pro-max — Searchable design databases with CLI\nfrontend-design — Creative aesthetics, avoiding \"AI slop\"\ntheme-factory — Applying themes to artifacts\ndesign-system-patterns — Token architecture and theming"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/wpank/ui-design",
    "publisherUrl": "https://clawhub.ai/wpank/ui-design",
    "owner": "wpank",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/ui-design",
    "downloadUrl": "https://openagent3.xyz/downloads/ui-design",
    "agentUrl": "https://openagent3.xyz/skills/ui-design/agent",
    "manifestUrl": "https://openagent3.xyz/skills/ui-design/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/ui-design/agent.md"
  }
}