Front-load your brand guide to AI before you write a line of frontend code

Short summary

The author shares a bash script (generate.sh) that uses Claude Code to auto-generate a brand guide—guideline markdown, oklch-based CSS tokens, and a preview HTML—before any frontend code is written. Front-loading design intent prevents the generic Tailwind look that AI defaults to. The script takes a slug and brief, makes three independent Claude calls, and outputs files you hand to Claude Code for implementation.

• •A bash script generates brand guidelines, CSS tokens, and preview HTML via Claude Code
• •Front-loading design intent eliminates generic AI-generated UI defaults
• •Three independent Claude calls produce a complete brand kit from a one-line brief

Generated with AI, which can make mistakes.