# Send UI Design to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - 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. ## Suggested prompts ### New install ```text 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. ``` ### Upgrade existing ```text 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. ``` ## Machine-readable fields ```json { "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": { "downloadUrl": "/downloads/ui-design", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-design", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "README.md", "SKILL.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "ui-design", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-30T20:24:40.214Z", "expiresAt": "2026-05-07T20:24:40.214Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-design", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-design", "contentDisposition": "attachment; filename=\"ui-design-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "ui-design" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "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." ] } }, "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" } } ``` ## Documentation ### UI Design Fundamentals The definitive guide for building production-grade web interfaces. Covers the full stack of design decisions from layout to motion. ### WHEN To Use Designing new UI components or pages Building landing pages, dashboards, or applications Reviewing code for design quality Creating distinctive interfaces that avoid generic aesthetics Implementing accessibility requirements ### KEYWORDS ui design, web design, layout, typography, color palette, spacing, visual hierarchy, responsive design, accessibility, motion design, component design, design tokens, frontend, css, tailwind ### The 80/20 of Design Quality FactorImpactTime InvestmentTypography40%Choose 1-2 fonts wellSpacing25%Use consistent scaleColor20%Limit palette, ensure contrastEverything else15%Shadows, borders, motion Focus on typography and spacing first. They're 65% of perceived quality. ### Commit to a Direction Mediocrity is forgettable. Pick an extreme: DirectionCharacteristicsUse 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 ### Grid vs Flexbox Decision 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 ### Container Strategy /* Standard content width */ .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(1rem, 5vw, 3rem); } /* Full-bleed with contained content */ .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } ### Common Layout Mistakes 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 ### Typography Typography carries 90% of a design's personality. ### Font Pairing by Context 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 ### Type Scale (1.25 ratio) --text-xs: 0.64rem; /* 10px - captions */ --text-sm: 0.8rem; /* 13px - secondary */ --text-base: 1rem; /* 16px - body */ --text-lg: 1.25rem; /* 20px - lead */ --text-xl: 1.563rem; /* 25px - h4 */ --text-2xl: 1.953rem; /* 31px - h3 */ --text-3xl: 2.441rem; /* 39px - h2 */ --text-4xl: 3.052rem; /* 49px - h1 */ ### Typography Rules 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 ### Typography Mistakes 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) ### Building a Palette Every palette needs five functional roles: RolePurposeUsagePrimaryBrand identityButtons, links, active statesNeutralText, backgroundsBody text, cards, dividersAccentSecondary actionsTags, badges, highlightsSemanticFeedbackSuccess/warning/error statesSurfaceLayered backgroundsCards, modals, overlays ### Surface Layering (Dark Mode) Create depth through lightness, not shadows: :root { --surface-0: hsl(220 15% 8%); /* page background */ --surface-1: hsl(220 15% 12%); /* card */ --surface-2: hsl(220 15% 16%); /* raised element */ --surface-3: hsl(220 15% 20%); /* popover/modal */ } ### Contrast Requirements (WCAG) Text SizeMinimum RatioEnhanced (AAA)Normal text (<18px)4.5:17:1Large text (≥18px bold, ≥24px)3:14.5:1UI components3:1— ### Color Mistakes 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 ### 8px Base Unit Scale --space-1: 0.25rem; /* 4px - tight gaps */ --space-2: 0.5rem; /* 8px - input padding */ --space-3: 0.75rem; /* 12px - button padding */ --space-4: 1rem; /* 16px - default spacing */ --space-6: 1.5rem; /* 24px - section padding */ --space-8: 2rem; /* 32px - section gaps */ --space-12: 3rem; /* 48px - major breaks */ --space-16: 4rem; /* 64px - page rhythm */ ### Spacing Rules 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 ### Spacing Mistakes 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 ### Visual Hierarchy Guide the eye through deliberate contrast. ### Hierarchy Techniques TechniqueHowImpactSizeHero 3-4x bodyImmediate focal pointWeightBold headings, regular bodyScannabilityColorPrimary vs mutedInformation layersSpaceIsolation creates emphasisDraws attentionPositionTop-left anchors readingNatural flow ### Card Hierarchy Pattern Eyebrow ← xs, uppercase, muted color Title ← xl, semibold, primary color Body ← base, secondary color, 1.6 line-height Action ← spaced apart, mt-4 minimum ### Breakpoint Strategy BreakpointTargetKey Changes< 640pxMobileSingle column, stacked nav, 44px touch targets640-1024pxTabletTwo columns, collapsible sidebars1024-1440pxDesktopFull layout, hover enabled> 1440pxWideMax-width container, prevent ultra-wide lines ### Fluid Techniques /* Fluid typography */ h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); } /* Fluid spacing */ section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); } /* Intrinsic grid */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); } ### Responsive Mistakes MistakeProblemFixNo viewport metaBroken mobileAdd width=device-widthFixed widthsOverflow on mobileUse max-w-* and %Tiny touch targetsFrustrating tapsMinimum 44x44pxHidden horizontal scrollBroken layoutTest at 375px width ### Accessibility Accessibility is not optional. ### Critical Requirements 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