Tutorial
Design Systems: Use OpenClaw to create, maintain, and document design systems with consistent components, design tokens, and developer-friendly APIs.
Design Token Generation
# Generate design tokens from brand colors
openclaw chat "Convert these brand colors to design tokens:
- Primary: #6366F1
- Secondary: #8B5CF6
- Success: #10B981
- Warning: #F59E0B
- Error: #EF4444
Create CSS variables with semantic names and scale shades."Component Generation
# Generate React component with variants
openclaw chat "Create a React Button component with:
- Variants: primary, secondary, ghost, danger
- Sizes: sm, md, lg
- Disabled state styling
- TypeScript types
- Tailwind CSS classes
- Storybook stories"Form Components
# Input component
openclaw chat "Create a FormInput component with:
- Label and error message display
- Focus and validation states
- Helper text support
- Accessible ARIA attributes
- Integration with react-hook-form"Responsive Component Patterns
# Responsive card component
openclaw chat "Create a responsive Card component:
- Mobile: single column, stacked layout
- Tablet: 2-column grid
- Desktop: 3-column grid
- Use Tailwind breakpoints
- Include image, title, description, CTA"Theme System
# Generate theme tokens
openclaw chat "Create a theme system with:
- Light and dark mode tokens
- CSS custom properties
- TypeScript interfaces
- Theme context provider
- Theme toggle component"Design Documentation
# Generate component documentation
openclaw chat "Write documentation for this component:
- Description and purpose
- Props table with types
- Usage examples
- Do's and don'ts
- Accessibility notes
[paste component code]"Figma to Code Conversion
# Describe design for code generation
openclaw chat "Convert this Figma design to React + Tailwind:
Design: A navigation bar with:
- Logo on left (64x32px)
- Navigation links centered
- CTA button on right
- Mobile hamburger menu
- Sticky positioning
[paste detailed specs]"Accessibility Enforcement
# Accessibility audit prompts
openclaw chat "Review this component for WCAG 2.1 AA compliance:
- Color contrast ratios
- Keyboard navigation
- Screen reader labels
- Focus indicators
- ARIA attributes
[paste component code]"Storybook Stories Generation
# Generate Storybook stories
openclaw chat "Create Storybook stories for Button component:
- Default state story
- All variants (primary, secondary, ghost)
- All sizes (sm, md, lg)
- Disabled state
- Loading state
- With icon"Migrating to Design Systems
# Migration planning
openclaw chat "Create a migration plan for:
- Audit existing components for duplication
- Map legacy components to design system
- Prioritize migration by usage frequency
- Create deprecation timeline
- Document breaking changes"Design System Best Practices
- Start with tokens: Define colors, spacing, typography first
- Component composition: Build complex UIs from simple primitives
- Documentation first: Document before implementing
- Version everything: Use semantic versioning for releases
- Accessibility built-in: Never ship inaccessible components
- Test visually: Use tools like Chromatic for visual regression
Design System Maintenance
# Generate changelog
openclaw chat "Generate a changelog entry for:
- New Button component
- Deprecated old PrimaryButton
- Updated token values
- Breaking changes in Card API
Format: conventional commits"