ACSS Pro is a NIBWP Pro Skill — a validated, workflow-level capability that goes far beyond a single tool call. Generate a working Automatic.css configuration from a screenshot, raw HTML+CSS, or a live URL — validated against real ACSS rules before anything is saved. Where a built-in ability performs one typed operation, a Pro Skill orchestrates a whole expert workflow and checks its own work against domain rules before anything is written to your site. The result is not a rough first draft you have to fix, but production-grade output you can trust.
Generate a working Automatic.css configuration from a screenshot, raw HTML+CSS, or a live URL — validated against real ACSS rules before anything is saved. A premium, validated skill you invoke by prompt — it plans, validates, and (on your approval) builds.
What it does
Point ACSS Pro at an image, raw HTML+CSS, or a live URL and it returns a validated ACSS config — palette, type ramp and space ramp — that passes contrast, scale and luminance checks. Nothing is written to your site until you approve it.
- Generate palette + type ramp + space ramp from a screenshot
- Generate from raw HTML+CSS or a live target URL
- WCAG AA contrast validation on heading/body pairs
- Modular scale ratio sanity (1.067–1.618 only)
What makes it different
ACSS Pro doesn't just guess values — it enforces the same rules a senior design engineer would, then blocks anything that fails. You get a system that is coherent, accessible and on-brand by construction.
validate-config
✓ contrast AA (7 pairs)
✓ scale ratio 1.250
✗ neutral gap 62% < 80%
→ auto-correctedHow it compares to generic AI output:
| Hand-tuning ACSS | ACSS Pro |
|---|---|
| Hours eyeballing palettes & ramps | A validated config in minutes |
| Contrast bugs slip into production | AA contrast enforced automatically |
| Inconsistent spacing scales | Sane modular scales every time |
| Drift between design and tokens | Drift audited and corrected |
| Easy to break the whole system | Approval gate before anything saves |
How it works
Point it at a design
A screenshot, raw HTML+CSS, or a live URL.
Extract & map
Colors, type and spacing map to ACSS palette, type ramp & space ramp.
Validate
Contrast, modular scale and luminance gaps are enforced.
Approve & persist
Review the diff, then write it to ACSS — only on your OK.
A real run
What it looks like when the skill runs:
nibwp/acss-pro-from-design
input: screenshot.png
✓ palette · type ramp · space ramp
✓ WCAG AA contrast passedCapabilities
The abilities it uses
Under the hood, ACSS Pro is powered by these abilities:
| Ability | Type | What it does |
|---|---|---|
nibwp/acss-pro-from-design | write | Generate a full ACSS config from a screenshot, HTML+CSS or URL. |
nibwp/acss-pro-detect | read | Detect the current ACSS setup and framework version. |
nibwp/acss-pro-audit-site | read | Audit rendered CSS for drift from your ACSS tokens. |
nibwp/acss-pro-validate-config | read | Validate a config against contrast, scale & luminance rules. |
nibwp/acss-pro-update-variables | destructive | Persist approved palette, type & space variables to ACSS. |
Getting it
ACSS Pro is a Pro Skill — available on a Pro plan or in the Bundle. Once licensed, install it from NIBWP › Pro Skills and invoke it by describing what you want. See how to install & use Pro Skills.
FAQ
Do I need ACSS installed?
Will it overwrite my config?
What inputs work best?
Is it in the Bundle?
Ship on-system ACSS in minutes.
ACSS Pro is included in the Bundle, or available as a standalone Pro Skill.
See pricing