A suite of four tools built to enforce design system standards, responsive layout, component consistency, and cross-language safety across Wati’s 250+ page frontend. Built in one day. Runs in Cursor and VS Code.

🎨 Chisel — Design Token Enforcement

What it does

Chisel scans every file you open and flags hardcoded CSS values that should be using design tokens. It reads your real designTokens.css and mixins.ts files and suggests the exact token to use.

How it works

• Auto-activates when you open any .tsx .ts .jsx .js file
• Sends file content + your real token files to Claude API
• Returns findings with exact token suggestions
• Highlights flagged lines with amber background + left border
• Ghost text inline: ↳ StyledButton background: #000 → var(--wati-color-black)
• Status bar shows Chisel: X findings
• One-click Apply All to fix entire file

What it flags

• 🎨 Hardcoded hex colors → exact color token
• 📏 Hardcoded px spacing in padding/margin/gap → spacing token
• 🔤 Hardcoded font-size/weight/line-height → typography token
• ⚠️ Values with no matching token → No token — add to design system

Unique capabilities

• Reads your real designTokens.css — not made up tokens