distinctive-design-systems
Patterns for creating design systems with personality and distinctive aesthetics. Covers aesthetic documentation, color token architecture, typography systems, layered surfaces, and motion. Use when building design systems that go beyond generic templates. Triggers on design system, design tokens, aesthetic, color palette, typography, CSS variables, tailwind config.
Why use this skill?
Learn to build design systems with personality. This skill helps you document aesthetics, define color tokens, and implement consistent visual languages for your projects.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wpank/distinctive-design-systemsWhat This Skill Does
The distinctive-design-systems skill empowers OpenClaw to act as a creative architect for UI/UX design. Rather than relying on generic boilerplate, this skill helps define, document, and implement cohesive design languages that carry emotional weight and visual distinction. It facilitates the transition from abstract aesthetic concepts to concrete technical implementations like Tailwind configurations and CSS variables. By focusing on the 'vibe' first, the agent ensures that color palettes, typography, and motion patterns align with the brand’s unique identity.
Installation
To integrate this skill, use the following command in your terminal: clawhub install openclaw/skills/skills/wpank/distinctive-design-systems. Ensure you have the necessary permissions for your environment to update your project’s configuration files.
Use Cases
- Brand Refresh: Transforming an existing, stale interface into a modern, emotionally resonant product.
- Design Tokenization: Converting manual CSS work into a robust, scalable system using CSS variables linked to a Tailwind config.
- Aesthetic Prototyping: Brainstorming visual directions for a new product, such as 'Retro-Futuristic' or 'Warm Neutral Cyberpunk,' to guide engineering teams.
- System Documentation: Automatically generating design system specifications that keep design and development teams in sync.
Example Prompts
- 'We are building a fintech app that needs to feel premium and secure but not cold. Help me define a design system aesthetic that uses deep navy and gold, and generate the corresponding Tailwind color tokens.'
- 'I have a React project using Tailwind. Can you help me set up a layered surface system using CSS variables for backdrop blurs and glass-morphism effects based on my brand guidelines?'
- 'Review my current CSS file and suggest a set of typography tokens that improve hierarchy and readability while maintaining a playful, retro-arcade vibe.'
Tips & Limitations
- Focus on Foundations: Always define the emotion and vibe before jumping into code. A beautiful palette without a clear aesthetic intent is just a set of colors.
- Iterate on Tokens: Use the Three-Layer system (CSS Variables → Tailwind → TypeScript) to ensure type safety and ease of maintenance across your application.
- Limitations: This skill is a generative and architectural guide. It does not handle automated asset generation (like images or icons) but focuses on the structural logic, naming conventions, and CSS implementation of your design ecosystem.
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-wpank-distinctive-design-systems": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read
Related Skills
mermaid-diagrams
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
api-design-principles
Skill by wpank
auto-context
Automatically read relevant context before major actions. Loads TODO.md, roadmap.md, handoffs, task plans, and other project context files so the AI operates with full situational awareness. Use when starting a task, implementing a feature, refactoring, debugging, planning, or resuming a session.
clear-writing
Write clear, concise prose for humans — documentation, READMEs, API docs, commit messages, error messages, UI text, reports, and explanations. Combines Strunk's rules for clearer prose with technical documentation patterns, structure templates, and review checklists.
track-performance
Track the performance of Uniswap LP positions over time — check which positions need attention, are out of range, or have uncollected fees. Use when the user asks how their positions are doing.