frontend-design

What This Skill Does

The frontend-design skill empowers OpenClaw agents to transcend the limitations of generic, AI-generated web interfaces. By prioritizing creative direction and intentional aesthetic choices, this skill ensures that generated web components, landing pages, and full applications possess a unique, memorable visual identity. Rather than defaulting to the standard 'SaaS blue' or 'clean but boring' minimalism, the skill guides the agent through a design-thinking process that requires committing to a specific, bold aesthetic direction—such as Brutalist, Retro-Futuristic, or Editorial—before any code is written. It actively mandates the use of distinctive typography, cohesive color palettes, and curated spatial relationships, effectively stripping away the predictable patterns often found in basic LLM code output.

Installation

To integrate this skill into your workflow, execute the following command in your terminal:

npx clawhub@latest install frontend-design

Use Cases

This skill is ideal for any scenario where visual impact is as important as functionality. Use it when:

• Building high-converting landing pages or marketing sites that need to differentiate themselves from competitors.
• Creating internal product dashboards that require a unique visual brand to keep users engaged.
• Redesigning existing interfaces that suffer from 'AI-slop' or generic design patterns.
• Experimenting with avant-garde web aesthetics for portfolios or creative projects.
• Developing web applications where performance and accessibility must coexist with a strong, intentional, and high-end visual style.

Example Prompts

1. "Using the frontend-design skill, create a landing page for a decentralized finance project. Choose a 'Brutalist' aesthetic, using high-contrast colors and a condensed, heavy display font."
2. "I need a portfolio section for a photographer. Apply an 'Editorial/Magazine' aesthetic with a strict grid system, using 'Instrument Serif' for the headers and ensuring the layout feels like a physical print publication."
3. "Design a signup component that feels 'Playful/Toy-like'. Use rounded corners, bold, vibrant secondary colors, and suggest where to add micro-interactions for a tactile, responsive feel."

Tips & Limitations

To get the most out of this skill, never skip the 'Understand Context' phase; the more information you provide the agent regarding your audience and goal, the better the aesthetic recommendations will be. Avoid asking the agent to 'make it look nice'—instead, provide a specific direction from the provided table. Remember that while this skill excels at design, you remain responsible for ensuring the final output meets accessibility standards (WCAG). If the design becomes too 'maximalist,' use the ui-design companion skill to ensure the spacing and typography remain functional.