frontend-design
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Why use this skill?
Master modern UI development with OpenClaw. Access professional design patterns, oklch color palettes, and structured layout workflows for dashboards and landing pages.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/mpociot/superdesignWhat This Skill Does
The frontend-design skill acts as an expert UI/UX consultant integrated directly into your OpenClaw workflow. It provides a structured, scalable approach to modern interface creation, ensuring consistency, aesthetic appeal, and technical rigor. By enforcing a rigorous design workflow—ranging from ASCII wireframing to semantic theme implementation—this skill elevates raw requirements into professional, high-fidelity frontend codebases. It is specifically optimized to move away from dated aesthetic patterns (like standard Bootstrap defaults) in favor of modern, performant standards like oklch() color spaces and context-aware design systems.
Installation
To integrate this skill into your environment, use the OpenClaw command-line interface. Execute the following command to pull the necessary design dependencies and libraries into your workspace:
clawhub install openclaw/skills/skills/mpociot/superdesign
Ensure you have the appropriate permissions to install new skills, as this will link the component library directly to your project's development workflow.
Use Cases
- Landing Page Creation: Rapidly wireframe and code high-converting hero sections, feature grids, and navigation bars.
- Dashboard Development: Implement complex data-heavy interfaces using consistent spacing, shadow scales, and semantic variables.
- Design System Modernization: Refactor existing projects to use modern color systems like oklch() or implement specific aesthetic styles such as Neo-Brutalism or Glassmorphism.
- Rapid Prototyping: Use ASCII wireframing to quickly iterate on layout ideas before writing a single line of component code.
Example Prompts
- "I'm building a SaaS dashboard for an analytics startup. Can you help me wireframe the layout and set up a dark-mode theme using oklch colors in the Vercel style?"
- "Create a Neo-Brutalist landing page for my portfolio. I need a hero section with a bold title and a call-to-action button, ensuring the CSS uses a 4px black shadow."
- "Refactor my CSS to use a consistent spacing scale based on 0.25rem increments and apply a glassmorphic effect to my sidebar component."
Tips & Limitations
- Visual Hierarchy: Always start with the ASCII wireframe section of the guide; skipping layout planning often leads to disorganized component code.
- Color Management: Prefer oklch() definitions for all semantic colors to ensure better perceptual consistency across different screen brightness levels.
- Fonts: Keep the font stack clean. Limit yourself to one display font for headings and one robust sans-serif (e.g., Inter) for body text to maintain high readability.
- Limitations: While this skill provides excellent boilerplate and design logic, it does not replace a human designer's intuition for user testing or accessibility auditing; always verify contrast ratios after implementation.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-mpociot-superdesign": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: code-execution