Resources

Modern tools and workflows for designing with Kin.

Design with Claude Code

Claude Code is an AI-powered development environment that understands design systems. Designers can describe UI intentions in natural language, and Claude translates them into production-quality components using Kin tokens.

Getting Started

  1. Install Claude Code - Available at claude.com/claude-code
  2. Open this project - Point Claude to your Kin design system directory
  3. Describe your UI - "Create a merchant dashboard card showing today's orders"
  4. Review and refine - Claude builds components using correct Kin tokens

What Claude Code Can Do

Component Creation

  • Generate new UI components using Kin foundation tokens
  • Apply correct brand colors, typography, and spacing automatically
  • Handle responsive behavior and dark mode out of the box

Design System Maintenance

  • Update components across the system (e.g., "Update all buttons to use new radius tokens")
  • Find inconsistencies (e.g., "Which components aren't using the 4px grid?")
  • Generate documentation from existing code

Rapid Prototyping

  • Build entire page layouts from descriptions
  • Create interactive prototypes with motion and state
  • Test across all 18 brand/language/theme combinations

Example Workflows

Creating a New Feature

Designer: "Create a courier delivery card showing restaurant name, address, pickup countdown, navigate button, and call button. Use Courier language tokens for glanceable scale."

Claude creates the component with correct tokens, then refines based on feedback about prominence and haptic indicators.

Cross-Brand Comparison

Designer: "Show this card in all 3 brands side-by-side so I can compare visual weight."

Claude generates a 3-column comparison view showing DoorDash, Wolt, and Deliveroo variations.

Accessibility Review

Designer: "Check if all interactive elements meet WCAG AA touch target sizes for Courier language."

Claude audits components and reports findings with specific measurements and recommendations.

Skills for Designers

Claude Code has specific skills optimized for design work:

/rams - Run Dieter Rams-inspired design review

  • Evaluates components against "10 Principles of Good Design"
  • Identifies unnecessary complexity or ornament
  • Suggests simplifications while maintaining functionality

/wyld - Bootstrap design system components

  • Generates component libraries from design specifications
  • Maintains consistency across generated components

/frontend-design - Create distinctive, craft-focused interfaces

  • Avoids generic AI aesthetics
  • Produces production-grade code with design quality

Best Practices

Be Specific About Context

Always specify brand and language:

✅ "Create a Consumer order confirmation for DoorDash"

❌ "Create an order confirmation"

Reference Existing Patterns

Point to similar components:

✅ "Create a card similar to MerchantOrderCard but for Courier"

❌ "Create a card"

Iterate Visually

Ask Claude to show variations:

✅ "Show me 3 layout options for this content"

❌ [Accept first output without exploration]

Validate Across Combinations

Test in multiple contexts:

✅ "Show this in DoorDash dark mode and Wolt light mode"

❌ [Only test in one configuration]

Figma Integration (Future)

Status: Planned

Future integration will allow:

  • Import Kin tokens directly into Figma libraries
  • Sync changes bidirectionally between code and design
  • Generate Figma components from React code
  • Export Figma designs as Kin-compliant components

Design Token Browser (Future)

Status: Planned

Interactive browser for exploring all 18 combinations:

  • Side-by-side brand comparisons
  • Real-time token adjustments
  • Export token sets for specific contexts
  • Visual diff showing token impacts

Questions?

For design system questions, reach out to:

  • Design Systems Team: [Team contact or Slack channel]
  • Claude Code Support: github.com/anthropics/claude-code

For implementation questions, work with your engineering team.

Was this page helpful?