frontend-design-pro

What This Skill Does

Frontend Design Pro is an expert-level UI engineering assistant designed to elevate AI-generated code beyond generic, template-driven aesthetics. Inspired by the 'impeccable' design philosophy, this skill acts as an automated design lead that critiques, polishes, and audits your frontend components against a rigorous set of professional standards. It replaces outdated defaults (like generic Inter fonts or low-contrast greys) with modern, accessible, and high-performance design patterns. By applying the principles of OKLCH color spaces, modular spacing systems, and meaningful motion design, it transforms functional code into professional-grade user interfaces.

Installation

You can integrate this skill into your OpenClaw environment by running the following command in your terminal: clawhub install openclaw/skills/skills/antonia-sz/frontend-design-pro

Use Cases

Use this skill when you want to bridge the gap between 'working code' and 'well-designed product'. It is ideal for:

• Startups & Indie Hackers: Rapidly prototyping interfaces that look distinct and professional without hiring a dedicated UI designer.
• Design System Maintainers: Ensuring that your codebase adheres to specific whitespace, typography, and motion guidelines.
• Developers Seeking Critique: Using the /audit and /critique commands to identify accessibility gaps, UX failures, and visual inconsistencies that human reviewers might miss.
• Component Refinement: Automating the process of making UI components more robust with /harden and visually polished with /polish.

Example Prompts

1. "/audit the search results component. I'm worried it looks too cluttered and the accessibility contrast isn't meeting standards."
2. "Create a hero section for my SaaS landing page. Use the frontend-design-pro guidelines: choose a modern font, implement a modular scale for headings, and ensure the color palette is in OKLCH."
3. "/polish the user dashboard. Specifically, update the transitions to be smoother and adjust the spacing to follow an 8px grid system."

Tips & Limitations

• Focus on Details: The skill shines when you use specific commands. Instead of just asking to 'fix it', use /distill to simplify complex layouts or /harden for edge-case error handling.
• Collaboration: Treat the AI as a design partner. If you disagree with a suggestion, explain why, and the AI will iterate within your constraint.
• Limitations: The skill operates best when it has context. Always include the relevant code or a screenshot description when triggering an audit. Note that this skill primarily targets CSS/UI structure and may require manual integration if your tech stack is highly non-standard.