{ "schemaVersion": "1.0", "item": { "slug": "anthropic-frontend-design", "name": "Anthropic Frontend Design", "source": "tencent", "type": "skill", "category": "内容创作", "sourceUrl": "https://clawhub.ai/Qrucio/anthropic-frontend-design", "canonicalUrl": "https://clawhub.ai/Qrucio/anthropic-frontend-design", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/anthropic-frontend-design", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=anthropic-frontend-design", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "assets/data/charts.csv", "assets/data/colors.csv", "assets/data/icons.csv", "assets/data/landing.csv", "assets/data/products.csv", "assets/data/react-performance.csv" ], "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. 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. 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/anthropic-frontend-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/anthropic-frontend-design", "agentPageUrl": "https://openagent3.xyz/skills/anthropic-frontend-design/agent", "manifestUrl": "https://openagent3.xyz/skills/anthropic-frontend-design/agent.json", "briefUrl": "https://openagent3.xyz/skills/anthropic-frontend-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. 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. Summarize what changed and any follow-up checks I should run." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "Anthropic Frontend Design", "body": "This skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. It integrates structured design intelligence (accessibility, UX rules, stack guidelines) with a bold, intentional aesthetic philosophy." }, { "title": "Core Philosophy: Anti-AI Slop", "body": "Claude (and all AI agents) are capable of extraordinary creative work, yet often default to safe, generic patterns. This skill MANDATES breaking those patterns.\n\nAVOID: Inter, Roboto, Arial, system fonts, purple-on-white gradients, cookie-cutter SaaS layouts, emojis as icons.\nMANDATE: Unique typography, context-specific color schemes, intentional motion, unexpected spatial composition, and production-grade functional code." }, { "title": "Design Thinking Process", "body": "Before coding, understand the context and commit to a BOLD aesthetic direction:\n\nPurpose: What problem does this solve? Who is it for?\nTone: Pick an extreme direction—brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, etc.\nIntelligence (Reference): Use the internal design tool to gather data (see below).\nDifferentiation: What makes this UNFORGETTABLE?" }, { "title": "Design Intelligence Tool", "body": "Use the internal search tool to gather palettes, font pairings, and UX guidelines. CRITICAL: You MUST filter the results through the Anti-AI Slop lens. If the tool suggests \"Inter\" or \"Roboto\", you are REQUIRED to ignore it and pick a distinctive alternative.\n\n# Generate a complete design system\npython scripts/search.py \" \" --design-system\n\n# Search specific domains (style, typography, color, ux, chart, landing)\npython scripts/search.py \"\" --domain \n\n# Get stack-specific guidelines (html-tailwind, react, nextjs, shadcn, etc.)\npython scripts/search.py \"\" --stack " }, { "title": "1. Professional UI Rules", "body": "RuleDoDon'tIconsUse SVG (Heroicons, Lucide, Simple Icons)Use emojis like 🎨 🚀 ⚙️ as UI iconsTypographyBeautiful, unique Google/Custom fontsInter, Roboto, Arial, System fontsHoverStable transitions (color/opacity/shadow)Scale transforms that shift layoutCursorAdd cursor-pointer to all interactive itemsLeave default cursor on buttons/cardsContrastMinimum 4.5:1 for accessibilityLow-contrast \"vibes\" that are unreadable" }, { "title": "2. Motion & Animation", "body": "Prioritize CSS-only solutions where possible.\nFocus on high-impact moments (staggered reveals on page load).\nUse duration 150-300ms for micro-interactions." }, { "title": "3. Spatial Composition", "body": "Use asymmetry, overlap, or diagonal flow to break standard grids.\nBalance generous negative space OR intentional density." }, { "title": "Pre-Delivery Checklist", "body": "Before delivering code, verify every item:" }, { "title": "Visual Quality", "body": "No emojis used as icons (SVG only).\n Typography is characterful and NOT \"AI standard\".\n Color scheme is unique to the context (no generic gradients).\n Hover states provide clear, stable visual feedback." }, { "title": "UX & Accessibility", "body": "All interactive elements have cursor-pointer.\n Form inputs have labels; images have alt text.\n Text contrast meets 4.5:1 minimum (test Light/Dark modes).\n Responsive at all breakpoints (375px, 768px, 1024px, 1440px).\n No horizontal scroll on mobile." }, { "title": "Aesthetic Directions (Reference)", "body": "Brutally Minimal: Monochrome, extreme white space, sparse typography.\nMaximalist Chaos: Overlapping elements, dense information, pattern mixing.\nRetro-Futuristic: Chrome effects, neon accents, 80s-inspired.\nLuxury/Refined: Gold/Dark accents, serif fonts, generous spacing.\nPlayful/Toy-like: Rounded corners, bright pastels, bouncy animations.\nEditorial/Magazine: Grid-based, bold headlines, clean hierarchy.\nBrutalist/Raw: Monospace fonts, harsh contrasts, industrial.\nArt Deco: Sharp angles, metallic accents, ornate borders.\n\nCommit to ONE direction and execute it fully—no half measures." } ], "body": "Anthropic Frontend Design\n\nThis skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. It integrates structured design intelligence (accessibility, UX rules, stack guidelines) with a bold, intentional aesthetic philosophy.\n\nCore Philosophy: Anti-AI Slop\n\nClaude (and all AI agents) are capable of extraordinary creative work, yet often default to safe, generic patterns. This skill MANDATES breaking those patterns.\n\nAVOID: Inter, Roboto, Arial, system fonts, purple-on-white gradients, cookie-cutter SaaS layouts, emojis as icons.\nMANDATE: Unique typography, context-specific color schemes, intentional motion, unexpected spatial composition, and production-grade functional code.\nDesign Thinking Process\n\nBefore coding, understand the context and commit to a BOLD aesthetic direction:\n\nPurpose: What problem does this solve? Who is it for?\nTone: Pick an extreme direction—brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, etc.\nIntelligence (Reference): Use the internal design tool to gather data (see below).\nDifferentiation: What makes this UNFORGETTABLE?\nDesign Intelligence Tool\n\nUse the internal search tool to gather palettes, font pairings, and UX guidelines. CRITICAL: You MUST filter the results through the Anti-AI Slop lens. If the tool suggests \"Inter\" or \"Roboto\", you are REQUIRED to ignore it and pick a distinctive alternative.\n\n# Generate a complete design system\npython scripts/search.py \" \" --design-system\n\n# Search specific domains (style, typography, color, ux, chart, landing)\npython scripts/search.py \"\" --domain \n\n# Get stack-specific guidelines (html-tailwind, react, nextjs, shadcn, etc.)\npython scripts/search.py \"\" --stack \n\nImplementation Standards\n1. Professional UI Rules\nRule\tDo\tDon't\nIcons\tUse SVG (Heroicons, Lucide, Simple Icons)\tUse emojis like 🎨 🚀 ⚙️ as UI icons\nTypography\tBeautiful, unique Google/Custom fonts\tInter, Roboto, Arial, System fonts\nHover\tStable transitions (color/opacity/shadow)\tScale transforms that shift layout\nCursor\tAdd cursor-pointer to all interactive items\tLeave default cursor on buttons/cards\nContrast\tMinimum 4.5:1 for accessibility\tLow-contrast \"vibes\" that are unreadable\n2. Motion & Animation\nPrioritize CSS-only solutions where possible.\nFocus on high-impact moments (staggered reveals on page load).\nUse duration 150-300ms for micro-interactions.\n3. Spatial Composition\nUse asymmetry, overlap, or diagonal flow to break standard grids.\nBalance generous negative space OR intentional density.\nPre-Delivery Checklist\n\nBefore delivering code, verify every item:\n\nVisual Quality\n No emojis used as icons (SVG only).\n Typography is characterful and NOT \"AI standard\".\n Color scheme is unique to the context (no generic gradients).\n Hover states provide clear, stable visual feedback.\nUX & Accessibility\n All interactive elements have cursor-pointer.\n Form inputs have labels; images have alt text.\n Text contrast meets 4.5:1 minimum (test Light/Dark modes).\n Responsive at all breakpoints (375px, 768px, 1024px, 1440px).\n No horizontal scroll on mobile.\nAesthetic Directions (Reference)\nBrutally Minimal: Monochrome, extreme white space, sparse typography.\nMaximalist Chaos: Overlapping elements, dense information, pattern mixing.\nRetro-Futuristic: Chrome effects, neon accents, 80s-inspired.\nLuxury/Refined: Gold/Dark accents, serif fonts, generous spacing.\nPlayful/Toy-like: Rounded corners, bright pastels, bouncy animations.\nEditorial/Magazine: Grid-based, bold headlines, clean hierarchy.\nBrutalist/Raw: Monospace fonts, harsh contrasts, industrial.\nArt Deco: Sharp angles, metallic accents, ornate borders.\n\nCommit to ONE direction and execute it fully—no half measures." }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/Qrucio/anthropic-frontend-design", "publisherUrl": "https://clawhub.ai/Qrucio/anthropic-frontend-design", "owner": "Qrucio", "version": "1.1.0", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/anthropic-frontend-design", "downloadUrl": "https://openagent3.xyz/downloads/anthropic-frontend-design", "agentUrl": "https://openagent3.xyz/skills/anthropic-frontend-design/agent", "manifestUrl": "https://openagent3.xyz/skills/anthropic-frontend-design/agent.json", "briefUrl": "https://openagent3.xyz/skills/anthropic-frontend-design/agent.md" } }