Create distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications to avoid generic AI aesthetics and make memorable UIs.
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics.
Commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute with precision.
See typography reference for scales and pairing.
DO: Use a modular type scale with fluid sizing (clamp) DO: Vary font weights and sizes for clear hierarchy DON'T: Use overused fonts—Inter, Roboto, Arial, Open Sans DON'T: Use monospace as lazy shorthand for "technical"
See color reference for OKLCH and palettes.
DO: Use modern CSS color functions (oklch, color-mix, light-dark) DO: Tint neutrals toward your brand hue DON'T: Use gray text on colored backgrounds DON'T: Use pure black (#000) or pure white (#fff) DON'T: Use the AI palette: cyan-on-dark, purple-to-blue gradients, neon accents
See spatial reference for grids and rhythm.
DO: Create visual rhythm through varied spacing DO: Use fluid spacing with clamp() DO: Use asymmetry and break the grid intentionally DON'T: Wrap everything in cards DON'T: Nest cards inside cards DON'T: Center everything
DO: Use intentional, purposeful decorative elements DON'T: Use glassmorphism everywhere DON'T: Use rounded rectangles with generic drop shadows DON'T: Use modals unless truly necessary
See motion reference for timing and easing.
DO: Use motion to convey state changes DO: Use exponential easing (ease-out-quart/quint/expo) DON'T: Animate layout properties DON'T: Use bounce or elastic easing—they feel dated
Critical check: If someone said "AI made this," would they believe it immediately? If yes, that's the problem.
Review the DON'T guidelines—they are fingerprints of AI-generated work from 2024-2025.
Match complexity to aesthetic vision. Maximalist designs need elaborate code. Minimalist designs need restraint and precision.
Interpret creatively. Make unexpected choices. No design should be the same.
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer