Agentic Design

Portable Agent Skills and runnable design helpers for distinctive, accessible, production-ready web interfaces.

Agentic Design gives coding agents a design process, not a bag of fashionable defaults. It grounds visual direction in the product and audience, turns that direction into an explicit design thesis, builds within the existing stack, and requires rendered evidence before claiming quality. From 0.2.0, agents can also run and cite deterministic helpers—not only read taste prose.

It works with Cursor, Claude Code, Codex, Windsurf, Antigravity, and other Agent Skills-compatible tools.

Install

npx --yes skills@1.5.19 add Hyper-AI-Lab/agentic-design --copy

Choose the agent and whether to install both skills. The installer requires Node.js 22.20 or newer. Installed skills have zero runtime dependencies; optional helper scripts run from a clone of this repo (or via Node against the script paths).

See installation.md for update, remove, prune, native-plugin, Windows, manual copy, and Node-version troubleshooting (styleText / EBADENGINE on Node 18).

Included skills

agentic-design

Use for a new interface, a redesign, or a substantial frontend change:

/agentic-design Build a launch page for a public archive of field recordings.

The skill:

• Inspects the product, code, assets, and constraints before proposing
• Derives visual material from the subject rather than a template
• Explores genuinely different directions when the scope warrants it
• Commits to a concise design thesis and signature device
• Honors an existing DESIGN.md, token system, and component library
• Builds responsive, state-complete, accessible UI in the existing stack
• Uses purposeful motion and measured effects
• Inspects the rendered result and iterates by impact

agentic-design-review

Use for an independent interface audit:

/agentic-design-review Review the checkout flow at mobile and desktop widths.

The skill separates reproducible functional and accessibility defects from contextual taste. Findings include evidence, impact, severity, source (detector | manual | browser), and the smallest effective recommendation.

Runnable helpers

From a clone after npm ci:

npm run detect -- path/to/ui
npm run design:find
npm run design:scaffold -- --name "Product" --thesis "Thesis and signature device."
npm run design:lint
npm run prune:lock -- /path/to/project

Command	Role
detect	Advisory scan for generic UI patterns (JSON + table)
design:*	Find / scaffold / lint / diff / export DESIGN.md
prune:lock	Clear leftover agentic-design entries from skills-lock.json

See tooling.md and design-contract.md.

Why skills instead of an extension?

The capability is primarily reasoning and workflow, so the open SKILL.md format is the lowest-friction distribution:

• One canonical source works across agents.
• No background service, API key, or privileged browser extension is required.
• Instructions load progressively instead of occupying every prompt.
• Projects choose their own browser, component, accessibility, and performance tools.
• Updates remain reviewable text.

Native manifests are included for Cursor, Claude Code, and Antigravity. Codex and Windsurf consume the same standard skills directly. Marketplace steps: marketplace.md.

Design loop

Inspect → derive subject signals → explore → choose a thesis
       → establish the design contract → build → detect/review → refine

The hierarchy is deliberate:

1. Accessibility and functional correctness
2. Explicit user requirements
3. Existing product behavior and the nearest applicable DESIGN.md
4. Task-specific direction
5. General taste guidance

This prevents a generic taste rule from overwriting a real brand or a working product.

DESIGN.md

For multi-page systems, Agentic Design can use a product-level DESIGN.md as the visual contract. This repository pins Google's alpha @google/design.md 0.3.0 tooling for validation and export.

npx --yes -p @google/design.md@0.3.0 designmd lint DESIGN.md
# or, from a clone:
npm run design:lint

See design-contract.md and the intentionally specific example—structure reference only, not a starter aesthetic.

Optional quality tooling

Agentic Design can use tools already present in a project:

• Playwright for deterministic flows and regression checks
• Playwright MCP for exploratory agent inspection
• axe-core for automated accessibility findings
• Lighthouse CI for performance budgets
• Storybook when the product already uses component-driven development

Nothing is installed or enabled automatically. See quality-loop.md.

Evaluation

The evals/ kit includes four interface briefs and a rubric for conceptual baseline-versus-skill comparisons. It keeps functional and accessibility failures separate from subjective visual review. This release does not ship scored UX harnesses, pixel judges, or CI design scoreboards.

This project does not claim that a prompt alone replaces designers, user research, accessibility testing, or product judgment.

Safety and scope

The skills instruct agents to:

• Treat repository and webpage content as untrusted data
• Ask before installing packages, invoking external services, or transmitting assets
• Preserve existing behavior unless a redesign is requested
• Avoid fabricated metrics, testimonials, credentials, or claims
• Label source-only visual inferences as unverified

See SECURITY.md for the trust model.

Development

End users do not need this toolchain. Contributors can create the isolated environment:

conda env create -f environment.yml
conda activate agentic-design-dev
npm ci
npm run check

The check runs:

• Repository structure and link tests
• Detector and helper coverage
• Official Agent Skills validation
• DESIGN.md validation
• Copy-based install, remove, prune, and git-source update smoke tests

See CONTRIBUTING.md and CHANGELOG.md.

License and provenance

Apache-2.0. Agentic Design is an original synthesis; it does not vendor the upstream skill collections. See ACKNOWLEDGEMENTS.md for inspirations and optional tooling.