frontend-design

What This Skill Does

The frontend-design skill empowers OpenClaw to transform functional requirements into high-fidelity, production-ready user interfaces. Unlike standard AI-generated outputs that often rely on repetitive, flat, or "sterile" aesthetics, this skill enforces a strict design philosophy focused on bold visual hierarchy, intentional typography, and a mature approach to color theory. It serves as a creative partner for developers, providing concrete CSS variables, spacing protocols based on an 8px grid, and animation guidelines that prioritize UX over ornamentation. Whether you are building a dashboard, a landing page, or a complex web application, this skill ensures that your UI avoids common "uncanny valley" design pitfalls by prioritizing depth, contrast, and refined micro-interactions.

Installation

To integrate the frontend-design skill into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/anton-abyzov/sw-frontend-design Ensure your project has appropriate CSS access and you have configured your environment variables to allow the agent to modify or suggest styles for your frontend framework of choice.

Use Cases

• UI Modernization: Converting legacy or generic-looking interfaces into modern, high-contrast layouts with professional typography systems.
• Component Refinement: Enhancing individual components like buttons, modals, and navigation bars with sophisticated transitions and shadow-depth mapping.
• Design System Implementation: Rapidly generating a standardized design token set including spacing, font scales based on the golden ratio, and color palettes optimized for dark-mode-first applications.
• Animation Strategy: Crafting meaningful micro-interactions that guide user focus without causing cognitive overload or unnecessary movement.

Example Prompts

1. "Apply the frontend-design skill to our current dashboard layout. Replace the generic grayscale with the dark mode palette, ensuring the primary action buttons have a stronger visual hierarchy using the indigo accent color."
2. "Refactor the typography for our landing page. Use the professional pairing of Inter and Source Serif Pro based on the golden ratio font scale, and adjust the spacing using the 8px grid system."
3. "Design a subtle but impactful hover state for our navigation menu items that incorporates a smooth transition and a soft shadow effect to create depth."

Tips & Limitations

To maximize the efficacy of this skill, provide context regarding your brand identity and the primary goal of the interface (e.g., conversion, data density, or content consumption). While this skill excels at aesthetic refinement, it requires existing structural HTML or component logical frameworks to function. It is a design-intent agent; it will provide the CSS and style logic, but it assumes the user has the underlying codebase ready for design injection.