AgentSkillsCN

Design System Importer

设计系统导入器

SKILL.md

Design System Importer Skill (Playwright-powered)

Purpose

Enable Copilot to explore another website’s visual system using Playwright MCP tools and translate its visual patterns into proposed updates to this repo’s design tokens (design-system/tokens/*.json), while avoiding direct copying of proprietary branding.

Capabilities

  • •Navigate to a target URL and explore key UI surfaces using Playwright MCP tools:
    • •Use tools such as mcp_microsoft_pla_browser_navigate, mcp_microsoft_pla_browser_click, mcp_microsoft_pla_browser_hover, mcp_microsoft_pla_browser_type, mcp_microsoft_pla_browser_wait_for, and mcp_microsoft_pla_browser_snapshot to:
      • •Load the site, open common pages (home, product, pricing, forms, dialogs),
      • •Capture page structure and visual states (default, hover, focus, disabled, primary/secondary).
  • •Infer a design system model from the inspected site:
    • •Identify recurring colors (backgrounds, text, borders, accents, success/warning/error, surface vs brand).
    • •Identify spacing scales (gaps, padding, section spacing).
    • •Identify typography patterns (font stacks, font sizes, weights, line heights, heading vs body).
    • •Identify radius and shape patterns (buttons, cards, modals, inputs).
  • •Map inferred patterns into this repo’s token schema:
    • •Propose revisions for:
      • •design-system/tokens/color.tokens.json
      • •design-system/tokens/spacing.tokens.json
      • •design-system/tokens/typography.tokens.json
      • •design-system/tokens/radius.tokens.json
    • •Keep the existing key structure where possible (e.g. primary, secondary, mutedBackground, xs–2xl, fontSize.sm–2xl, radius.sm–full) and adjust the underlying values.
    • •When necessary, propose additive tokens (new keys) instead of destructive renames, and clearly mark them.
  • •Explain proposed changes clearly:
    • •Summarize what was learned from the external site (e.g. “uses larger base font, higher contrast neutrals, slightly larger radii”).
    • •Provide before/after diffs for token files and rationale for each group of changes (e.g. “increase base spacing to improve rhythm on large screens”).
  • •Respect accessibility and good UX:
    • •Ensure proposed color combinations maintain or improve WCAG 2.2 AA contrast.
    • •Preserve or improve touch targets, focus visibility, and legibility.
  • •Use up-to-date documentation where needed:
    • •When referencing design-system or accessibility best practices, use Context7 tools (mcp_context7_resolve-library-id, mcp_context7_get-library-docs from io.github.upstash/context7) to ground recommendations in current guidance.

Constraints

  • •No direct cloning of brand identity:
    • •Do not reproduce logos, brand imagery, or distinctive trade dress.
    • •Treat the target site as inspiration for scales and relative relationships (e.g. “base font is larger, radii are rounder”), not as something to copy exactly.
  • •Token-first, not component-first:
    • •Only propose changes at the token level; do not rewrite components here except as examples.
    • •Defer actual component refactors to the React Frontend Design and Accessibility skills.
  • •Non-destructive by default:
    • •Prefer additive or incremental changes over sweeping rewrites of token structures.
    • •Clearly label breaking changes if they are truly necessary.
  • •Accessibility-aware:
    • •Do not propose token updates that would obviously reduce color contrast, legibility, or usable spacing.
  • •Human review required:
    • •All token updates are proposals; they must be reviewed and approved by a human before adoption.

Principles

  • •Learn relationships, not pixels: Focus on scales, hierarchies, and patterns (e.g. ratio between heading and body sizes, spacing steps) rather than exact numeric duplication.
  • •Design-system alignment: Keep the token structure coherent and consistent with the existing React skill pack.
  • •Transparency: Always explain why a proposed change is being made and how it was inferred from the external site.
  • •Ethical reuse: Use external sites only as references for good practice, not as sources to copy proprietary designs.

Example Usage

  • •“Use the Design System Importer skill to inspect https://example.com and propose updated color and spacing tokens for our React design system.”
  • •“Analyze the primary CTA buttons and form fields on <URL> with Playwright and suggest new radius and typography tokens that match that style while keeping our brand distinct.”