Skip to content

Design System: Provide agent skills for design system usage workflows #77209

@aduth

Description

@aduth

Sub-issue of: #77205

What problem does this address?

Today, working with AI agents to achieve a task that uses the design system, agents often struggle to know how to accomplish those tasks.

Workflows such as:

  • Adapting a design to implementation (from Figma, etc.)
  • Proposing a feature or contributing to the design system, including context-gathering of past discussions and decisions
  • Code review of a design system contribution
  • Implementing a component with best practices

What is your proposed solution?

We should provide a set of agent skills for accomplishing design system-adjacent tasks. These should be usable both within Gutenberg as well as external projects.

Agent Skills are a standardized format for giving AI agents the informed capability to accomplish tasks like those described above.

Caution: We should acknowledge that the workflows described above are those which a human should want to understand and follow as well, and we should seek to reduce duplication and avoid preferential treatment to one audience over another.

This is separate-but-complementary from an MCP server (#77206), which would describe the resources available within the design system. The scope of agent skills should cover how to accomplish design system tasks.

Prior art:

There already is a "WordPress Design System Skill", and I would recommend that this improve and replace it:

  • A single, monolithic "mega-skill" for the design system is likely not as effective as task/workflow-specific skills, as this is fundamentally how skills work in activating
  • A skill should ideally be useful without a paired dependency on an MCP server, though it's likely that it would complement and use MCP tools if available

Open Questions:

  • It's unclear if the implementation should live here in Gutenberg alongside the implementation of Gutenberg, or in WordPress/agent-skills along with other WordPress agent skills. This may also influence the distribution vehicle, since WordPress/agent-skills provides its own custom setup process using a custom "skillpack" build script.

Implementation notes:

As described in "Open Questions", the specific implementation may vary depending on where it lives.

At the end of the day, skills are just Markdown files with a bit of metadata.

But we should be conscious that a design system is an evolving thing, and there's a challenge both in how skills are incorporated into projects that use the design system, as well as how those skills are updated over time. We also likely won't want to maintain or prefer one AI environment over another, and skills discovery is often proprietary per vendor (e.g. .claude/skills vs. .cursor/skills). A tool like Vercel's skills CLI may be useful to document the setup and update workflows in a tool-agnostic manner.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions