Storybook: Reorganize design system introduction for first touch-point usefulness

[aduth]

What?

Updates the Storybook Design System > introduction page:

• Makes it about the WordPress Design System, not design systems as an abstract concept
• Changes headings from Q&A style to typical documentation flow: High-level overview ➡️ setup / how to use ➡️ guiding principles
• Mention and recommend the MCP server as a resource when working with AI (the MCP server is not currently mentioned anywhere in Storybook)
• Deemphasize "Principles of the Design System": Shift the focus to what someone would care about in using the design system.

Why?

Reorient the documentation toward helping someone who's interested in using the design system. Since this page could be many people's first touch point with the design system, it's more important to put those people on the right track in using the design system successfully.

Testing Instructions

Review updated content for relevance and accuracy.

Use of AI Tools

No AI was used. Content under "Principles of the Design System" is reusing preexisting content, which was AI-generated at the time. For what it's worth, I'd like to rewrite this whole section at some point, but it's not the focus here.

[Copilot]

Pull request overview

This PR reorganizes the Storybook “Design System > Introduction” page to better serve as an initial, practical entry point for the WordPress Design System (vs. an abstract discussion of design systems).

Changes:

• Rewrites the opening and section structure to focus on using the WordPress Design System (usage, theming, and key resources).
• Adds a recommendation to use the WordPress Design System MCP Server when working with AI agents.
• Moves the prior “differences vs @wordpress/components” content into a concluding section.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: aduth <[email protected]>
Co-authored-by: mirka <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Flaky tests detected in 26c4ce8.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27840833499
📝 Reported issues:

• [Flaky Test] Should save the changes #78689 in /test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js

[mirka]

Looks good to me 👍