Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
A design guideline skill that prevents generic AI-generated aesthetics in frontend interfaces. Covers typography, color, motion, layout, and game UI with specific anti-patterns to avoid and concrete alternatives to apply. Targets web components, landing pages, dashboards, and game UIs.
Rather than general design advice, it names specific forbidden patterns and forces a deliberate aesthetic choice from a concrete list of styles each time.
When to use it
- Building a landing page that doesn't look like every other SaaS site
- Styling a game UI to match its world and tone
- Choosing font pairings that avoid overused defaults like Inter
- Designing a dashboard with intentional asymmetry and visual hierarchy
- Creating a Telegram Mini App UI with immersive game aesthetics
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Build a landing page for a retro sci-fi game
- 1Identifies context: gaming audience, retro-futurist tone
- 2Selects a distinctive display font from Google Fonts, pairs with a contrasting body font
- 3Defines a CSS variable palette with a dominant dark color and a neon accent
- 4Applies asymmetric grid layout with diagonal flow and overlapping elements
- 5Adds staggered reveal animation on page load using CSS only
A single-file HTML landing page with retro-futurist aesthetic, custom font pairing, neon accent palette, asymmetric layout, and CSS entrance animations