ambrosia

The problem

Standard AI-generated code often relies on recognizable Bootstrap templates, resulting in "slop" that looks like an unfinished default project. Developers struggle to get LLMs to make real design decisions, leading to symmetrical grids, default blue buttons, and generic jumbotron heroes.

What it does

• Enforces an "Anti-Default" discipline to remove 40+ common Bootstrap AI-tells like three-column feature cards and alternating light/white sections.
• Sets specific design "dials" for variance, motion, and visual density based on a context-aware design read of the brief.
• Configures professional typography and color systems using Golden Ratio proportions and psychological signaling rather than default values.
• Generates SASS-first styling that overrides Bootstrap 5.3 variables before compilation, ensuring brand consistency.
• Implements WCAG 2.1 AA accessibility standards including proper ARIA labeling and focus management.

Frameworks & tools

Bootstrap 5.3, SASS/SCSS, BonsaiPress CMS, HTMX, Alpine.js, and Vanilla JS.

Why this beats prompting it yourself

A standard prompt usually yields the most common patterns in the training data, which are the very defaults you want to avoid. This skill applies a rigid engineering framework to design, forcing the agent to act as a design engineer who understands visual scanning patterns and SASS architecture rather than just an HTML generator.

Use cases

• Building high-conversion B2B landing pages that don't look like generic SaaS templates.
• Developing data-dense comparison portals with custom visual density and grid overrides.
• Modernizing legacy Bootstrap sites with a professional, editorial feel using serif/sans pairings.
• Ensuring legal or financial industry sites meet strict trust signals and accessibility requirements.

Known limitations

Does not support React, Tailwind, or CDN-based workflows. Requires a local SASS compilation environment and the BonsaiPress directory structure.