Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Content Creation
Frontend Design
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Focuses on creative direction and memorable design choices.
skill openclawclawhub Free
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Focuses on creative direction and memorable design choices.
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- README.md, SKILL.md, LICENSE.txt
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- 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.
New install
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
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.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- wpank
- Source page
- View original listing
- Canonical URL
- Open canonical page
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
Category context
Writing, remixing, publishing, visual generation, and marketing content production.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
2 Docs1 Files
- SKILL.md
- README.md
- LICENSE.txt