{
  "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": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/frontend-design-guidelines",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-design-guidelines",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.md",
      "LICENSE.txt"
    ],
    "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-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.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/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."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/frontend-design-guidelines",
    "agentPageUrl": "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"
  },
  "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": "Frontend Design",
        "body": "Create memorable frontend interfaces that stand out from generic AI-generated aesthetics through bold creative choices.\n\nSee also: ui-design for fundamentals (typography, color, spacing), web-design for CSS patterns."
      },
      {
        "title": "OpenClaw / Moltbot / Clawbot",
        "body": "npx clawhub@latest install frontend-design"
      },
      {
        "title": "WHAT This Skill Does",
        "body": "Guides creation of visually distinctive web interfaces by:\n\nEstablishing a bold aesthetic direction before coding\nMaking intentional typography, color, and spatial choices\nImplementing motion and micro-interactions that delight\nAvoiding the predictable patterns that mark AI-generated UIs"
      },
      {
        "title": "WHEN To Use",
        "body": "Building a new component, page, or web application\nCreating landing pages, marketing sites, or product UIs\nRedesigning interfaces to be more memorable\nAny frontend work where visual impact matters"
      },
      {
        "title": "KEYWORDS",
        "body": "frontend design, web ui, ui design, landing page, creative ui, web aesthetics, typography, visual design, motion design, distinctive interface"
      },
      {
        "title": "Design Thinking Process",
        "body": "Before writing code, commit to an aesthetic direction:"
      },
      {
        "title": "1. Understand Context",
        "body": "Purpose: What problem does this interface solve?\nAudience: Who uses it and what do they expect?\nConstraints: Framework, performance, accessibility requirements"
      },
      {
        "title": "2. Choose a Bold Direction",
        "body": "Pick an extreme aesthetic — mediocrity is forgettable:\n\nDirectionCharacteristicsBrutally 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"
      },
      {
        "title": "3. Identify the Memorable Element",
        "body": "What single thing will someone remember about this interface? Commit to it."
      },
      {
        "title": "Typography",
        "body": "NEVER use generic fonts:\n\nArial, Helvetica, system-ui\nInter, Roboto (unless highly intentional)\n\nDO choose distinctive fonts:\n\nPair a characterful display font with a refined body font\nExplore: Space Grotesk, Clash Display, Cabinet Grotesk, Satoshi, General Sans, Instrument Serif, Fraunces, Newsreader\n\n/* Example pairing */\n--font-display: 'Clash Display', sans-serif;\n--font-body: 'Satoshi', sans-serif;"
      },
      {
        "title": "Color & Theme",
        "body": "Commit to a cohesive palette — don't hedge with safe choices\nDominant + accent outperforms evenly-distributed colors\nUse CSS variables for consistency\nAvoid purple gradients on white (the \"AI default\")\n\n:root {\n  --color-bg: #0a0a0a;\n  --color-surface: #141414;\n  --color-text: #fafafa;\n  --color-accent: #ff4d00;\n  --color-muted: #666666;\n}"
      },
      {
        "title": "Spatial Composition",
        "body": "Break expectations:\n\nAsymmetry over perfect balance\nOverlap elements intentionally\nDiagonal flow or unconventional layouts\nGenerous negative space OR controlled density — not middle ground\nGrid-breaking elements that draw attention"
      },
      {
        "title": "Motion & Interaction",
        "body": "Focus on high-impact moments:\n\nPage load: Staggered reveals with animation-delay\nScroll-triggered animations that surprise\nHover states with personality\nPrefer CSS animations for HTML; Motion library for React\n\n/* Staggered entrance */\n.card { animation: fadeUp 0.6s ease-out backwards; }\n.card:nth-child(1) { animation-delay: 0.1s; }\n.card:nth-child(2) { animation-delay: 0.2s; }\n.card:nth-child(3) { animation-delay: 0.3s; }\n\n@keyframes fadeUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}"
      },
      {
        "title": "Backgrounds & Atmosphere",
        "body": "Create depth and atmosphere:\n\nGradient meshes and multi-stop gradients\nNoise textures and grain overlays\nGeometric patterns or subtle grids\nLayered transparencies\nDramatic shadows or complete flatness\nCustom cursors for interactive elements"
      },
      {
        "title": "Match Complexity to Vision",
        "body": "Maximalist vision → elaborate code with extensive animations\nMinimalist vision → restraint, precision, perfect spacing\nElegance = executing the vision well, not adding more"
      },
      {
        "title": "Vary Between Generations",
        "body": "Never converge on patterns:\n\nAlternate light/dark themes\nUse different font families each time\nExplore different aesthetic directions\nEach design should feel unique"
      },
      {
        "title": "NEVER Do",
        "body": "NEVER use generic font families (Inter, Roboto, Arial, system fonts)\nNEVER use purple gradients on white backgrounds — the \"AI aesthetic\"\nNEVER use predictable, cookie-cutter layouts\nNEVER skip the design thinking phase — understand before building\nNEVER hedge with safe, middle-ground aesthetics — commit to a direction\nNEVER forget that distinctive design requires distinctive code\nNEVER converge on the same patterns across generations — vary intentionally\nNEVER add complexity without purpose — minimalism and maximalism both require intention"
      }
    ],
    "body": "Frontend Design\n\nCreate memorable frontend interfaces that stand out from generic AI-generated aesthetics through bold creative choices.\n\nSee also: ui-design for fundamentals (typography, color, spacing), web-design for CSS patterns.\n\nInstallation\nOpenClaw / Moltbot / Clawbot\nnpx clawhub@latest install frontend-design\n\nWHAT This Skill Does\n\nGuides creation of visually distinctive web interfaces by:\n\nEstablishing a bold aesthetic direction before coding\nMaking intentional typography, color, and spatial choices\nImplementing motion and micro-interactions that delight\nAvoiding the predictable patterns that mark AI-generated UIs\nWHEN To Use\nBuilding a new component, page, or web application\nCreating landing pages, marketing sites, or product UIs\nRedesigning interfaces to be more memorable\nAny frontend work where visual impact matters\nKEYWORDS\n\nfrontend design, web ui, ui design, landing page, creative ui, web aesthetics, typography, visual design, motion design, distinctive interface\n\nDesign Thinking Process\n\nBefore writing code, commit to an aesthetic direction:\n\n1. Understand Context\nPurpose: What problem does this interface solve?\nAudience: Who uses it and what do they expect?\nConstraints: Framework, performance, accessibility requirements\n2. Choose a Bold Direction\n\nPick an extreme aesthetic — mediocrity is forgettable:\n\nDirection\tCharacteristics\nBrutally Minimal\tStark, essential, nothing extra\nMaximalist Chaos\tDense, layered, overwhelming intentionally\nRetro-Futuristic\tBlends vintage aesthetics with modern tech\nOrganic/Natural\tSoft, flowing, nature-inspired\nLuxury/Refined\tPremium materials, subtle elegance\nPlayful/Toy-like\tFun, approachable, bright\nEditorial/Magazine\tType-forward, grid-based\nBrutalist/Raw\tExposed structure, anti-design\nArt Deco/Geometric\tBold shapes, symmetry, ornament\nIndustrial/Utilitarian\tFunction-forward, robust\n3. Identify the Memorable Element\n\nWhat single thing will someone remember about this interface? Commit to it.\n\nAesthetic Guidelines\nTypography\n\nNEVER use generic fonts:\n\nArial, Helvetica, system-ui\nInter, Roboto (unless highly intentional)\n\nDO choose distinctive fonts:\n\nPair a characterful display font with a refined body font\nExplore: Space Grotesk, Clash Display, Cabinet Grotesk, Satoshi, General Sans, Instrument Serif, Fraunces, Newsreader\n/* Example pairing */\n--font-display: 'Clash Display', sans-serif;\n--font-body: 'Satoshi', sans-serif;\n\nColor & Theme\nCommit to a cohesive palette — don't hedge with safe choices\nDominant + accent outperforms evenly-distributed colors\nUse CSS variables for consistency\nAvoid purple gradients on white (the \"AI default\")\n:root {\n  --color-bg: #0a0a0a;\n  --color-surface: #141414;\n  --color-text: #fafafa;\n  --color-accent: #ff4d00;\n  --color-muted: #666666;\n}\n\nSpatial Composition\n\nBreak expectations:\n\nAsymmetry over perfect balance\nOverlap elements intentionally\nDiagonal flow or unconventional layouts\nGenerous negative space OR controlled density — not middle ground\nGrid-breaking elements that draw attention\nMotion & Interaction\n\nFocus on high-impact moments:\n\nPage load: Staggered reveals with animation-delay\nScroll-triggered animations that surprise\nHover states with personality\nPrefer CSS animations for HTML; Motion library for React\n/* Staggered entrance */\n.card { animation: fadeUp 0.6s ease-out backwards; }\n.card:nth-child(1) { animation-delay: 0.1s; }\n.card:nth-child(2) { animation-delay: 0.2s; }\n.card:nth-child(3) { animation-delay: 0.3s; }\n\n@keyframes fadeUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\nBackgrounds & Atmosphere\n\nCreate depth and atmosphere:\n\nGradient meshes and multi-stop gradients\nNoise textures and grain overlays\nGeometric patterns or subtle grids\nLayered transparencies\nDramatic shadows or complete flatness\nCustom cursors for interactive elements\nImplementation Principles\nMatch Complexity to Vision\nMaximalist vision → elaborate code with extensive animations\nMinimalist vision → restraint, precision, perfect spacing\nElegance = executing the vision well, not adding more\nVary Between Generations\n\nNever converge on patterns:\n\nAlternate light/dark themes\nUse different font families each time\nExplore different aesthetic directions\nEach design should feel unique\nNEVER Do\nNEVER use generic font families (Inter, Roboto, Arial, system fonts)\nNEVER use purple gradients on white backgrounds — the \"AI aesthetic\"\nNEVER use predictable, cookie-cutter layouts\nNEVER skip the design thinking phase — understand before building\nNEVER hedge with safe, middle-ground aesthetics — commit to a direction\nNEVER forget that distinctive design requires distinctive code\nNEVER converge on the same patterns across generations — vary intentionally\nNEVER add complexity without purpose — minimalism and maximalism both require intention"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/wpank/frontend-design-guidelines",
    "publisherUrl": "https://clawhub.ai/wpank/frontend-design-guidelines",
    "owner": "wpank",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "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"
  }
}