# Send Frontend 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": "frontend-design-guidelines", "name": "Frontend Design", "source": "tencent", "type": "skill", "category": "内容创作", "sourceUrl": "https://clawhub.ai/wpank/frontend-design-guidelines", "canonicalUrl": "https://clawhub.ai/wpank/frontend-design-guidelines", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/frontend-design-guidelines", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-design-guidelines", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "README.md", "SKILL.md", "LICENSE.txt" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "frontend-design-guidelines", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-29T18:52:56.943Z", "expiresAt": "2026-05-06T18:52:56.943Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-design-guidelines", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-design-guidelines", "contentDisposition": "attachment; filename=\"frontend-design-guidelines-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "frontend-design-guidelines" }, "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/frontend-design-guidelines" }, "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/frontend-design-guidelines", "downloadUrl": "https://openagent3.xyz/downloads/frontend-design-guidelines", "agentUrl": "https://openagent3.xyz/skills/frontend-design-guidelines/agent", "manifestUrl": "https://openagent3.xyz/skills/frontend-design-guidelines/agent.json", "briefUrl": "https://openagent3.xyz/skills/frontend-design-guidelines/agent.md" } } ``` ## Documentation ### Frontend Design Create memorable frontend interfaces that stand out from generic AI-generated aesthetics through bold creative choices. See also: ui-design for fundamentals (typography, color, spacing), web-design for CSS patterns. ### OpenClaw / Moltbot / Clawbot npx clawhub@latest install frontend-design ### WHAT This Skill Does Guides creation of visually distinctive web interfaces by: Establishing a bold aesthetic direction before coding Making intentional typography, color, and spatial choices Implementing motion and micro-interactions that delight Avoiding the predictable patterns that mark AI-generated UIs ### WHEN To Use Building a new component, page, or web application Creating landing pages, marketing sites, or product UIs Redesigning interfaces to be more memorable Any frontend work where visual impact matters ### KEYWORDS frontend design, web ui, ui design, landing page, creative ui, web aesthetics, typography, visual design, motion design, distinctive interface ### Design Thinking Process Before writing code, commit to an aesthetic direction: ### 1. Understand Context Purpose: What problem does this interface solve? Audience: Who uses it and what do they expect? Constraints: Framework, performance, accessibility requirements ### 2. Choose a Bold Direction Pick an extreme aesthetic — mediocrity is forgettable: DirectionCharacteristicsBrutally MinimalStark, essential, nothing extraMaximalist ChaosDense, layered, overwhelming intentionallyRetro-FuturisticBlends vintage aesthetics with modern techOrganic/NaturalSoft, flowing, nature-inspiredLuxury/RefinedPremium materials, subtle elegancePlayful/Toy-likeFun, approachable, brightEditorial/MagazineType-forward, grid-basedBrutalist/RawExposed structure, anti-designArt Deco/GeometricBold shapes, symmetry, ornamentIndustrial/UtilitarianFunction-forward, robust ### 3. Identify the Memorable Element What single thing will someone remember about this interface? Commit to it. ### Typography NEVER use generic fonts: Arial, Helvetica, system-ui Inter, Roboto (unless highly intentional) DO choose distinctive fonts: Pair a characterful display font with a refined body font Explore: Space Grotesk, Clash Display, Cabinet Grotesk, Satoshi, General Sans, Instrument Serif, Fraunces, Newsreader /* Example pairing */ --font-display: 'Clash Display', sans-serif; --font-body: 'Satoshi', sans-serif; ### Color & Theme Commit to a cohesive palette — don't hedge with safe choices Dominant + accent outperforms evenly-distributed colors Use CSS variables for consistency Avoid purple gradients on white (the "AI default") :root { --color-bg: #0a0a0a; --color-surface: #141414; --color-text: #fafafa; --color-accent: #ff4d00; --color-muted: #666666; } ### Spatial Composition Break expectations: Asymmetry over perfect balance Overlap elements intentionally Diagonal flow or unconventional layouts Generous negative space OR controlled density — not middle ground Grid-breaking elements that draw attention ### Motion & Interaction Focus on high-impact moments: Page load: Staggered reveals with animation-delay Scroll-triggered animations that surprise Hover states with personality Prefer CSS animations for HTML; Motion library for React /* Staggered entrance */ .card { animation: fadeUp 0.6s ease-out backwards; } .card:nth-child(1) { animation-delay: 0.1s; } .card:nth-child(2) { animation-delay: 0.2s; } .card:nth-child(3) { animation-delay: 0.3s; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } ### Backgrounds & Atmosphere Create depth and atmosphere: Gradient meshes and multi-stop gradients Noise textures and grain overlays Geometric patterns or subtle grids Layered transparencies Dramatic shadows or complete flatness Custom cursors for interactive elements ### Match Complexity to Vision Maximalist vision → elaborate code with extensive animations Minimalist vision → restraint, precision, perfect spacing Elegance = executing the vision well, not adding more ### Vary Between Generations Never converge on patterns: Alternate light/dark themes Use different font families each time Explore different aesthetic directions Each design should feel unique ### NEVER Do NEVER use generic font families (Inter, Roboto, Arial, system fonts) NEVER use purple gradients on white backgrounds — the "AI aesthetic" NEVER use predictable, cookie-cutter layouts NEVER skip the design thinking phase — understand before building NEVER hedge with safe, middle-ground aesthetics — commit to a direction NEVER forget that distinctive design requires distinctive code NEVER converge on the same patterns across generations — vary intentionally NEVER add complexity without purpose — minimalism and maximalism both require intention ## Trust - Source: tencent - Verification: Indexed source record - Publisher: wpank - Version: 1.0.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-04-29T18:52:56.943Z - Expires at: 2026-05-06T18:52:56.943Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/frontend-design-guidelines) - [Send to Agent page](https://openagent3.xyz/skills/frontend-design-guidelines/agent) - [JSON manifest](https://openagent3.xyz/skills/frontend-design-guidelines/agent.json) - [Markdown brief](https://openagent3.xyz/skills/frontend-design-guidelines/agent.md) - [Download page](https://openagent3.xyz/downloads/frontend-design-guidelines)