web-design-pro

What This Skill Does

Web Design Pro is a specialized engineering toolkit designed for OpenClaw agents to architect high-performance, accessible, and visually stunning web interfaces. It bridges the gap between design intent and production-ready code. Beyond aesthetics, it enforces industrial-grade standards in design systems, performance engineering, and user-centric UX methodologies. This skill allows an agent to systematically manage design tokens, optimize for Core Web Vitals (LCP, INP, CLS), implement fluid responsiveness without media queries, and apply accessibility standards (WCAG 2.1) across all project phases.

Installation

To integrate this skill into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/kjaylee/web-design-pro Ensure you are operating within a directory with write access to your project's configuration files if you intend for the agent to auto-apply token updates.

Use Cases

• Design System Migration: Convert legacy hardcoded CSS values into semantic tokens for easier global theming.
• Performance Audits: Analyze a project's Core Web Vitals and automatically suggest or apply optimizations like WebP conversion, critical path CSS, and lazy loading strategies.
• Game Site Refactoring: Specifically tailor UI layouts for game portfolios using gameplay-first UX patterns, such as implementing hero video backgrounds and interactive elements that prioritize user engagement.
• Accessibility Remediation: Scan existing semantic HTML structures and suggest ARIA labels, color contrast adjustments, and focus states to ensure compliance with WCAG standards.

Example Prompts

1. "Analyze our current landing page performance and suggest three specific changes to improve the Largest Contentful Paint (LCP) score for mobile users."
2. "Update our theme CSS file to use a hierarchical design token structure, replacing all raw hex codes with semantic variables like '--action-primary' and '--surface-subtle'."
3. "Review the current hero section of the portfolio and redesign the layout based on the 'Jobs to be Done' framework to better highlight gameplay footage over static descriptions."

Tips & Limitations

• Tip: Always prioritize 'Fluid Typography' using the clamp() function to minimize reliance on cumbersome media queries, which results in cleaner, more maintainable stylesheets.
• Tip: When auditing for performance, prioritize INP (Interaction to Next Paint) as it is the most modern metric for assessing real-world user interactivity.
• Limitation: While the agent can suggest architectural changes, deep visual design requires the agent to have access to design source files (like Figma JSON exports). Manual review is recommended for stylistic decisions that impact brand identity.