{ "schemaVersion": "1.0", "item": { "slug": "web-design", "name": "Web Design", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/wpank/web-design", "canonicalUrl": "https://clawhub.ai/wpank/web-design", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/web-design", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-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", "slug": "web-design", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-10T20:44:21.446Z", "expiresAt": "2026-05-17T20:44:21.446Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-design", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-design", "contentDisposition": "attachment; filename=\"web-design-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "web-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/web-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/web-design", "agentPageUrl": "https://openagent3.xyz/skills/web-design/agent", "manifestUrl": "https://openagent3.xyz/skills/web-design/agent.json", "briefUrl": "https://openagent3.xyz/skills/web-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": "Web Design Patterns", "body": "CSS implementation patterns for production-grade interfaces. For design fundamentals and decision-making, see ui-design. This skill focuses on code.\n\nSee also: ui-design for typography/color/spacing theory, frontend-design for creative aesthetics." }, { "title": "OpenClaw / Moltbot / Clawbot", "body": "npx clawhub@latest install web-design" }, { "title": "Layout Principles", "body": "Use CSS Grid for two-dimensional layouts and Flexbox for one-dimensional flow. Choose the right tool for each context.\n\nLayout NeedToolWhyPage-level structureCSS Grid (grid-template-areas)Named regions, explicit row/column controlNavigation barsFlexboxSingle-axis alignment, spacing with gapCard gridsGrid (auto-fill / auto-fit)Responsive without media queriesCenteringGrid (place-items: center)Shortest, most reliable centeringSidebar + contentGrid (grid-template-columns: 250px 1fr)Proportional sizing with fixed sidebarStacking overlapsGrid + grid-area: 1/1Layer elements without position: absolute" }, { "title": "Spatial Composition", "body": "Go beyond predictable layouts. Intentional asymmetry, overlapping elements, and grid-breaking accents create visual interest. Use grid stacking (grid-area: 1/1) instead of position: absolute for overlapping elements. Choose generous negative space for luxury/editorial aesthetics, or controlled density for data-rich interfaces — the choice must be intentional." }, { "title": "Typography", "body": "Typography carries 90% of a design's personality. Choose fonts that match the interface's purpose.\n\nContextDisplay Font DirectionBody Font DirectionExample PairingEditorial / magazineHigh-contrast serifNeutral humanist sansPlayfair Display + Source Sans 3SaaS dashboardGeometric sansMatching weight sansDM Sans + DM Mono (data)Creative portfolioExpressive displayClean readable sansSyne + OutfitE-commerce luxuryThin modern serifElegant sansCormorant Garamond + JostDeveloper toolingMonospace displayMonospace bodyJetBrains Mono + IBM Plex Mono" }, { "title": "Type Scale", "body": "Use a consistent ratio. A 1.25 (major third) scale works for most interfaces: text-xs 0.64rem, text-sm 0.8rem, text-base 1rem, text-lg 1.25rem, text-xl 1.563rem, text-2xl 1.953rem, text-3xl 2.441rem, text-4xl 3.052rem. Set body text to 1rem (16px minimum), line-height 1.5 for body, 1.1–1.2 for headings. Limit line length to 60–75ch." }, { "title": "Building a Palette", "body": "Every palette needs five functional roles:\n\nRolePurposeExample UsagePrimaryBrand identity, primary actionsButtons, links, active statesNeutralText, borders, backgroundsBody text, cards, dividersAccentSecondary actions, highlightsTags, badges, secondary buttonsSuccess / Warning / ErrorSemantic feedbackToasts, form validation, statusSurfaceLayered backgroundsCards on page, modals on overlay" }, { "title": "Contrast and Depth", "body": "Create depth through surface layering, not just 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\nUse HSL or OKLCH for perceptually uniform color manipulation. Dominant color with sharp accents outperforms evenly-distributed palettes. Always verify WCAG contrast: 4.5:1 for normal text, 3:1 for large text." }, { "title": "Spacing", "body": "Consistent spacing creates rhythm. Use an 8px base unit (or 4px for dense UIs):\n\nTokenValueUse--space-10.25rem (4px)Inline icon gaps, tight padding--space-20.5rem (8px)Input padding, compact lists--space-30.75rem (12px)Button padding, card inner spacing--space-41rem (16px)Default element spacing--space-61.5rem (24px)Section padding, card gaps--space-82rem (32px)Section separation--space-123rem (48px)Major section breaks--space-164rem (64px)Page-level vertical rhythm\n\nApply spacing consistently: use gap on Grid/Flexbox containers instead of margins on children. This eliminates margin-collapse bugs and simplifies responsive adjustments." }, { "title": "Visual Hierarchy", "body": "Guide the eye through deliberate contrast in size, weight, color, and space." }, { "title": "Hierarchy Techniques", "body": "TechniqueHowImpactSize contrastHero heading 3–4x body sizeImmediate focal pointWeight contrastBold headings + regular bodyScannabilityColor contrastPrimary text vs muted secondaryInformation layeringSpatial groupingTight spacing within groups, wide betweenGestalt proximityElevationShadows / surface layersInteractive affordanceWhitespace isolationEmpty space around key elementEmphasis through absence" }, { "title": "Practical Pattern — Card Hierarchy", "body": "Layer hierarchy within cards: eyebrow (xs, uppercase, muted) → title (xl, semibold) → body (base, secondary color, 1.6 line-height) → action (spaced apart with margin-top). Use surface color for separation and consistent padding from spacing tokens." }, { "title": "Breakpoint Strategy", "body": "BreakpointTargetApproach< 640pxMobileSingle column, stacked navigation, touch targets ≥ 44px640–1024pxTabletTwo-column options, collapsible sidebars1024–1440pxDesktopFull layout, hover interactions enabled> 1440pxWideMax-width container (1280px), prevent ultra-wide line lengths" }, { "title": "Fluid Techniques", "body": "Prefer fluid sizing over rigid breakpoints where possible:\n\n/* Fluid typography — scales between 640px and 1440px viewport */\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 — no media queries needed */\n.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); }\n\nUse container queries (@container) for component-level responsiveness when a component's layout should respond to its container, not the viewport." }, { "title": "Accessibility", "body": "Accessibility is not optional. Build it in from the start.\n\nRequirementImplementationStandardColor contrast4.5:1 normal text, 3:1 large text / UIWCAG 2.1 AAKeyboard navigationAll interactive elements focusable and operableWCAG 2.1.1Focus indicatorsVisible :focus-visible ring, 2px+ offsetWCAG 2.4.7Semantic HTMLUse