astryx-max

name

astryx-max

description

Build production-grade sites with the Astryx design system (@astryxdesign/*) that don't look AI-generated. Use this whenever the user wants to build, scaffold, design, or improve a real website, landing page, dashboard, or app UI with Astryx — or says "astryx max", "make this astryx site look designed / not like AI slop", "push astryx further", or is unhappy with a generic Astryx build. This skill grounds the model on the full Astryx CLI capability manifest so it uses real components and flags instead of guessing, then runs a screenshot → critique → fix loop in a headless browser to catch the alignment, hierarchy, and palette problems that make agent-built sites look generated. Prefer this over building an Astryx site freehand — the manifest grounding and visual loop are the whole point.

Astryx Max

Astryx out of the box builds correct but generic sites: it leans on bare templates, reaches for the default blue/black palette, and can't see that a card wrapped to a new line or a product row isn't centered — because a text-only agent never looks at the rendered page. The result reads as "AI-built."

This skill fixes both problems. First it grounds the model on everything the Astryx CLI can actually do, so it composes from real components instead of guessing. Then it looks at the running site and iterates — the same thing a designer does when they open the browser and go "hm, that's off." Grounding + eyes is the whole idea.

When you're done, the site should

• use real Astryx components pulled via the CLI (not hand-rolled markup),
• pass a visual review (aligned grids, deliberate depth/spacing, clear hierarchy), and
• avoid the AI-slop tells in references/slop-patterns.md.

The workflow

Work through these in order. Steps 4–6 are a loop — that's where the quality comes from, so don't skip straight to "done" after the first build.

1. Ground on the manifest (do this first, always)

The single most important step. Run: