ghostclaw: Command for Claude Code

/design-init - Initialize Design Configuration

Create project-level design configuration files (.design.json and .design.md) that combine design system rules with Impeccable best practices.

Purpose

The /design-init command sets up a two-layer design configuration for your project:

Layer 1: Design System Rules (.design.json)

• Fonts, colors, spacing, typography
• Project-specific design constraints
• Used for fast anti-pattern detection and normalization

Layer 2: Design Philosophy (.design.md)

• Project context and brand personality
• Design principles and guidelines
• UX writing voice and tone
• Used for deep design reviews and polish

Usage

/design-init [directory]

Arguments:

• directory (optional): Project directory to initialize. Defaults to current directory.

Behavior

Interactive Setup

1. Check for existing config

   • If .design.json or .design.md exists, ask to overwrite or merge

2. Choose starting point

   Initialize from:
   1. Minimal starter (recommended for new projects)
   2. Emergence example (brutalist aesthetic)
   3. Velocity example (clean, modern)
   4. Custom (guided setup)
   

3. Create .design.json

   • Based on chosen template
   • User can customize fonts, colors, spacing

4. Create .design.md

   • Project context template
   • User fills in: project name, target audience, brand personality, design principles

5. Confirm

   ✓ Created .design.json
   ✓ Created .design.md
   
   Next steps:
   - Edit .design.md to add project context
   - Run /design-rules to view current config
   - Run /design-audit [file] to check compliance
   

Templates

Minimal Starter (.design.json)

{
  "name": "Project Name",
  "version": "1.0.0",
  "fonts": {
    "heading": "Inter",
    "body": "Inter",
    "mono": "JetBrains Mono"
  },
  "colors": {
    "primary": "#000000",
    "secondary": "#666666",
    "background": "#FFFFFF",
    "text": "#000000"
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px",
    "2xl": "48px"
  },
  "typography": {
    "h1": { "size": "48px", "lineHeight": "1.2", "weight": "700" },
    "h2": { "size": "36px", "lineHeight": "1.3", "weight": "700" },
    "h3": { "size": "24px", "lineHeight": "1.4", "weight": "600" },
    "body": { "size": "16px", "lineHeight": "1.6", "weight": "400" },
    "small": { "size": "14px", "lineHeight": "1.5", "weight": "400" }
  },
  "rules": [
    "Use design system fonts only",
    "Use design system colors only",
    "Use design system spacing scale only",
    "Maintain WCAG AA contrast ratios (4.5:1 for text)"
  ]
}