design-style
Use this skill when the user asks to build, create, design, develop, or improve ANY frontend interface, web page, UI component, or visual element. This includes: - Building landing pages, websites, web apps, dashboards, portfolios, or any web interface - Creating UI components (buttons, forms, cards, navbars, modals, etc.) - Designing pages with React, Vue, Next.js, Svelte, or any frontend framework - Adding styling or improving visual design of existing components - Implementing specific design aesthetics (modern, dark, minimalist, brutalist, etc.) - User mentions "frontend", "UI", "UX", "design", "interface", "web design", or "styling" - User asks for "beautiful", "modern", "professional", "clean", or any aesthetic adjective - User requests help with CSS, Tailwind, styled-components, or any styling approach This skill automatically retrieves the appropriate design system prompt (Neo-brutalism, Modern Dark, Bauhaus, Cyberpunk, Material, etc.) to help create visually distinctive, production-grade frontend code instead of generic UI. IMPORTANT: Trigger this skill proactively for ANY frontend/UI work, not just when design style is explicitly mentioned.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/benangel65/design-styleWhat This Skill Does
The design-style skill acts as a curated design consultant for the OpenClaw AI agent. Rather than outputting generic, unstyled, or inconsistent HTML/CSS, this skill leverages a pre-configured library of design system prompts stored within the prompts/ directory. When triggered, the AI agent dynamically selects the most appropriate visual language—such as Neo-brutalism, Modern Dark, or Swiss—to influence the generated frontend code. It ensures that components like buttons, layouts, and entire landing pages adhere to professional design standards, elevating the output from functional code to polished, production-ready interfaces.
Installation
To integrate this design engine into your environment, run the following command in your terminal:
clawhub install openclaw/skills/skills/benangel65/design-style
Use Cases
- Web Application Prototyping: Quickly build out dashboards, SaaS interfaces, or portfolios that don't look like boilerplate wireframes.
- Design System Implementation: Enforce consistent aesthetics across a component library by applying styles like 'Fluent2' or 'Material' automatically.
- Thematic UI Generation: Instantly adopt specific artistic directions like 'Cyberpunk', 'Vaporwave', or 'ArtDeco' for creative projects.
- Frontend Refactoring: Use the skill to suggest styling improvements or apply a cohesive design language to messy or inconsistent existing codebases.
Example Prompts
- "Build me a modern landing page for a coffee shop using the Botanical design style."
- "Create a dashboard for my analytics app, apply the ModernDark theme, and use React with Tailwind CSS."
- "Refactor these existing UI components to follow a clean, professional Enterprise design language."
Tips & Limitations
- Proactive Triggering: You do not need to explicitly name the skill. Simply describing the look, feel, or function of your interface will prompt the agent to utilize this skill.
- Context is Key: The more information you provide about the target framework (e.g., Next.js vs. Svelte) and the desired vibe (e.g., high-contrast vs. minimalist), the more precise the design system retrieval will be.
- Limit: This skill focuses on the aesthetic and styling layer. It does not replace the need for providing clear architectural requirements or functional logic for your application. If a style looks incorrect, feel free to explicitly request a different theme from the provided list.
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-benangel65-design-style": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-read, code-execution
Related Skills
bilibili-downloader
Download videos, audio, subtitles, and covers from Bilibili using bilibili-api. Use when working with Bilibili content for downloading videos in various qualities, extracting audio, getting subtitles and danmaku, downloading covers, and managing download preferences.
akshare-finance
AKShare财经数据接口库封装，提供股票、期货、期权、基金、外汇、债券、指数、加密货币等金融产品的基本面数据、实时和历史行情数据、衍生数据。