web-design

What This Skill Does

The web-design skill provides OpenClaw agents with advanced CSS implementation patterns and best practices for modern interface development. While the ui-design skill focuses on the theory of aesthetics, web-design focuses strictly on the code-centric execution of layouts, typography hierarchies, and color system management. It translates design intentions into clean, production-grade CSS, utilizing modern standards like CSS Grid for complex 2D structures, Flexbox for alignment flow, and fluid typography scales to ensure responsive integrity across all device breakpoints.

Installation

To integrate this skill into your OpenClaw or Clawbot environment, execute the following command in your project terminal:

npx clawhub@latest install web-design

Use Cases

This skill is designed for developers and designers who need to bridge the gap between creative wireframes and functional, responsive code. Common use cases include generating CSS for complex dashboard layouts, implementing sophisticated typography scales that adhere to major third ratios, defining semantic color variables for design systems, and architecting non-traditional, asymmetrical grid structures without relying on outdated absolute positioning.

Example Prompts

1. "Apply a 1.25 major third typography scale to this dashboard CSS, ensuring that body text stays at 1rem and heading line-heights are set to 1.1."
2. "Refactor this card layout from absolute positioning to a responsive CSS Grid using auto-fit and minmax(300px, 1fr) for the column definition."
3. "Help me build a sidebar-content layout using grid-template-areas that remains proportional while maintaining a fixed 250px sidebar width."

Tips & Limitations

To maximize the utility of this skill, ensure you are using it in conjunction with a modern CSS framework or standard CSS variables. The skill emphasizes CSS Grid and Flexbox for almost all layout scenarios; if you require support for legacy browser compatibility (IE11), you will need to apply post-processing tools like Autoprefixer. Always prioritize semantic HTML structure before applying these design patterns to ensure your interfaces are accessible. Remember that design is subjective—the skill provides robust structural patterns, but the final visual outcome depends on your defined color palettes and design system choices.