frontend-design

What This Skill Does

The frontend-design skill is a professional-grade UI generation engine for OpenClaw. It shifts AI-generated output from generic, monotonous patterns toward deliberate, high-fidelity visual interfaces. Whether you are building a SaaS dashboard, a high-impact landing page, or a complex React component, this skill applies rigorous design principles to ensure your code is not just functional, but visually arresting. It forces a 'Design Thinking' phase where the agent adopts a specific aesthetic persona (e.g., Brutalist, Editorial, or Retro-Futuristic) before writing a single line of code, ensuring the final artifact possesses a unique, memorable character.

Installation

To integrate this skill into your environment, run the following command in your terminal: clawhub install openclaw/skills/skills/bloodandeath/keats-frontend-design Ensure your development environment is configured to support standard frontend dependency management.

Use Cases

This skill is ideal for rapid prototyping and production-ready interface development. Key scenarios include:

• Developing high-converting landing pages that stand out in crowded markets.
• Constructing bespoke web components (React/Vue/Svelte) that adhere to a specific design language.
• Revitalizing legacy UIs with modern, cohesive, and intentional styling.
• Creating visual artifacts like digital posters or data-driven cards that require a refined, magazine-style layout.
• Bridging the gap between conceptual wireframes and polished, interactive browser-based code.

Example Prompts

1. "Build a landing page for a new AI-native coffee brand. Use a brutalist, typography-heavy aesthetic with bold black-and-white contrast and giant serif headlines. Include a CTA button that feels tactile and mechanical."
2. "Create a dashboard component for tracking crypto assets using a 'luxury/refined' tone. Use dark mode, thin borders, glassmorphism, and a palette of deep slate and gold accents."
3. "Design a responsive card component for a portfolio site that looks like a vintage polaroid print. Include a tilted image container, drop shadow, and handwritten-style typography for the labels."

Tips & Limitations

• Be Specific with Aesthetic: The more specific you are about your design intent (e.g., 'Scandinavian minimalism' vs 'Cyberpunk neon'), the better the agent can target the design tokens and structure.
• Not for Backend: Remember that this skill is purely concerned with the 'presentation layer.' It does not handle database connections, server-side authentication, or API logic. Use standard coding tools for backend logic.
• Focus on Intent: If the task is simple, the agent will skip the formal design thinking step to save time. If you want a deep dive into the design philosophy for a small task, explicitly ask the agent to 'analyze the aesthetic direction' before coding.