AI-Powered Design & Development

One design contract.
Every AI agent

Give Claude Code, Codex, Copilot, Cursor, Antigravity, Kiro, and OpenCode the same UX4G source of truth, from the first prompt to the final accessibility check.

Two files. One
portable skill.

SKILL.md handles discovery and workflow. Design.md supplies the complete UX4G contract. Keep them together in every agent.

  1. 1

    Download

    Get the current contract.

  2. 2

    Package

    Add SKILL.md and reference.

  3. 3

    Install

    Choose your agent path.

ux4g-design/

ux4g-design/

├── SKILL.md

└── Design.md

---
name: ux4g-design
description: Apply the UX4G Design System
contract when designing, implementing, reviewing,
or fixing government digital interfaces.
---

# UX4G design workflow

1. Read Design.md completely.
2. Use authoritative packages and documentation.
3. Reuse UX4G components and semantic tokens.
4. Verify themes, breakpoints, and accessibility.
5. Report unresolved exceptions.

Choose your workspace.

The contract stays the same. Only the discovery path and invocation change.

Claude Code

Project-local Agent Skill

Install here

.claude/skills/ux4g-design/

Invoke with

/ux4g-design

How it works

  1. 1

    Place the complete skill directory under .claude/skills.

  2. 2

    Invoke /ux4g-design or describe a matching UX4G task.

  3. 3

    Confirm the skill appears in the command list and request a compliance report.

Starter prompt

Use the ux4g-design skill to audit this page and implement the fixes. Read Design.md completely before editing.

Team shortcut: .agents/skills/ux4g-design/ can be shared by Codex, GitHub Copilot, and OpenCode.

Go from one page to a
complete product.

The two skill files establish UX4G rules. Add a specialist prompt and BRD only when the task needs a complete design or application workflow.

Design prompt

Figma Make Prompt v3

Generate complete UX4G design screens with theme planning, typography hierarchy, responsive variants, and a quality checklist.

Download prompt
Code prompt

CodeGen Prompt v1

Add project structure, UX4G components, i18n, mock data, responsive behaviour, accessibility, and a complete self-audit.

Download prompt
Start here

UX4G BRD Template

Structure product goals, users, journeys, requirements, page inventory, content, languages, integrations, and accessibility before generation.

Download template

Choose the smallest useful bundle

One page or component

SKILL.md + Design.md + task

Complete coded product

Skill files + CodeGen + BRD

Complete Figma design

Skill files + Figma prompt + BRD