Paul Bakou

Overview Generic design templates are saturating the web. Standard dark navy interfaces, neon gradients, and cookie-cutter layouts make modern sites look identical. This tutorial demonstrates how to use Impeccable, a developer tool created by Paul Bakou that integrates with AI agents to build intentional, unique design systems. By establishing strong foundation files, it guides agents like Claude Code to generate designs based on a concrete editorial vision rather than generic trends. Prerequisites Before running the commands, ensure your development environment has: - **Node.js** (Version 24 or higher is required) - An active local project (such as a PHP/Laravel or JavaScript application) - An AI coding helper tool like Claude Code configured Key Libraries & Tools - **Impeccable CLI**: A design-oriented developer tool that enforces visual consistency for AI agents. - **Claude Code**: A terminal-based agent that reads the project context to modify source files. Code Walkthrough First, initiate the installation within your local project directory: ```bash npx impeccable install ``` During setup, opt to install the tool locally for your project and enable the design hooks. Next, run the initialization command within your agent console to generate your core brand metadata: ```bash impeccable init ``` This command generates a `product.md` file. The CLI asks targeted questions regarding your audience, brand personality, and styles to actively exclude (such as childish aesthetics or neon gradients). Once the product rules are saved, compile the design system rules by running: ```bash impeccable document ``` This command analyzes your current stylesheets and outputs a comprehensive `design.md` file containing your layout hierarchy, specific color palettes, and typography guidelines. Syntax Notes The configuration files use standard Markdown with strict section parameters. For instance, the generated `design.md` defines a explicit "ban list" for CSS styles, preventing the AI agent from writing utility gradient classes that violate the design code. Practical Examples To apply your newly generated design rules to your actual web files, run the craft command inside your agent: ```bash impeccable craft "Create a new newsroom-style homepage layout" ``` This prompts the AI agent to rewrite your home views using your exact design specification. It will automatically strip out legacy gradients and reorganize components, such as pulling live databases for structured leaderboards. Tips & Gotchas - **Token Usage**: Running complete visual iterations, generating browser-based test screenshots, and fixing broken unit tests can consume upwards of 40,000 tokens ($10 in API costs) for a single comprehensive design run. Plan your changes in small, incremental steps. - **Node Version Requirement**: The package will fail to install on environments running Node versions lower than 24.