Accessibility pass before launchin 5 steps

The steps and the skill for each

1. 1
   Wcag Accessibility

   Review the designs against WCAG 2.2 AA, as the European Accessibility Act requires.

2. 2
   Contrast Check

   Verify every colour pair against AA and AAA contrast ratios.

3. 3
   Axe Accessibility MCP

   Run axe on the built pages and get prioritized violations with suggested fixes.

4. 4
   Accessibility Per Component

   Fix the root cause in the component: keyboard, focus, ARIA, target size.

5. 5
   Playwright MCP Server

   Walk the key flows through the accessibility tree to confirm the fixes hold.

• Design a screen that looks right

  Six steps, from idea to polished UI

  1. 01Brief
  2. 02Structure in grey
  3. 03Type and colour
  4. +3 more steps

  Guided workflow 6 steps · free file

• From brand to polished UI

  Start from an existing brand and end with a reviewed, on-brand interface. Your agent extracts the brand, specs the UI, builds it and polishes the detail.

  1. 01Brand Extract
  2. 02Generate Ui From Brand
  3. 03Frontend Design
  4. +1 more step

  4 steps · Brand & identity kit

• From Figma to launch-ready asset

  Take a single Figma frame and ship the full asset kit a launch needs — copy, code, social, the lot.

  1. 01Figma Dev Mode MCP
  2. 02Frontend Design
  3. 03Canvas Design
  4. +2 more steps

  5 steps · Figma kit