用途：本技能用于使用 Shopify 的 Polaris 设计系统（React 实现 v13.x）设计与实现 Shopify Admin 界面，适用于构建 Shopify 应用、Admin 扩展，或任何面向商家（Merchant）的界面，目标是保证界面原生、可访问且专业。
版本说明：资料指出（2025-2026）Polaris React（@shopify/polaris）处于维护模式，Shopify 已推出用于新开发的 Polaris Web Components；但 Polaris React 对现有应用仍完全可用并受支持，本指南覆盖的是 React 实现。
核心原则：
- 以商家为中心：为效率和清晰度而设计，商家使用这些工具经营业务。
- 原生观感：应用应感觉像 Shopify Admin 的自然延伸，除非绝对必要，不引入外来设计模式（如 Material Design 阴影、明显 bootstrap 风格按钮）。
- 可访问性：Polaris 在构建时已考虑可访问性，应使用语义化组件（如 Button、Link、TextField）而非自定义 div 实现。
- 可预期性：遵循标准 Shopify 模式。保存按钮放在 App Bridge Save Bar，页面操作放在右上角，主要内容居中。
依赖（v13.x）：@shopify/polaris ^13.9.0、@shopify/polaris-icons ^9.x、@shopify/app-bridge-react ^4.x。
App Bridge 集成（v13.x 关键点）：许多 UI 组件现由 App Bridge 处理而非 Polaris React。Modal 改用 @shopify/app-bridge-react Modal API，Navigation 改用 App Bridge Navigation Menu API，Toast 改用 App Bridge Toast API，ContextualSaveBar 改用 App Bridge useSaveBar() hook，TopBar 改用 App Bridge Title Bar API，Loading 改用 App Bridge Loading API。示例包括使用 Modal 和 TitleBar 组件、shopify.toast.show、以及 useSaveBar 在表单有变更时显示或隐藏保存栏。
基础组件：所有 Polaris 应用必须包裹在 <AppProvider i18n={enTranslations}> 中。Page 是路由的顶层容器，应始终设置 title 和 primaryAction（如适用）；v13.x 中 Page.Header 的 backAction 属性已弃用，复杂导航模式应改用 App Bridge 导航。Layout 和 Layout.Section 用于组织内容；Layout.AnnotatedSection 用于设置页（左标题说明，右卡片）；Layout.Section 支持默认 Full、oneHalf（1/2）和 oneThird（1/3）宽度列。Card 是内容片段的主容器，卡内布局使用 BlockStack（垂直）或 InlineStack（水平）；不要使用已弃用的 LegacyCard。
布局原语（现代模式）：包括 Box（底层布局原语，可访问完整令牌）、BlockStack（带 gap 的垂直堆叠）、InlineStack（带对齐的水平布局）、InlineGrid（响应式网格布局）、Bleed（负边距实现边缘到边缘内容）。
数据展示：IndexTable 用于带批量操作和筛选的对象列表（产品、订单），配合 useIndexResourceState；DataTable 用于简单非交互式数据网格（如分析数据）；ResourceList 用于无表格结构的简单列表（每项使用 ResourceItem）。
表单设计：使用 Form、FormLayout、TextField、Select、Checkbox、ChoiceList、RadioButton、RangeSlider、ColorPicker、DropZone、Tag、Autocomplete 等组件。
筛选与搜索（IndexFilters）：使用 IndexFilters、useSetIndexFiltersMode、IndexFiltersMode，配合 ChoiceList、RangeSlider、TextField 等，支持查询、筛选器、已应用筛选器、标签页等。
设计令牌与 CSS（v13.x）：避免自定义 CSS，95% 的样式应由 Polaris 属性（gap、padding、align、justify）处理；如必须使用自定义 CSS，请使用 Polaris CSS 自定义属性（令牌）。间距令牌以 4px 为基准，包括 --p-space-050（2px）至 --p-space-1200（48px）。颜色令牌涵盖背景（如 --p-color-bg、--p-color-bg-surface、--p-color-bg-fill-brand、--p-color-bg-fill-success、--p-color-bg-fill-critical）、文本（如 --p-color-text、--p-color-text-secondary、--p-color-text-critical）和边框（如 --p-color-border、--p-color-border-focus）。边框圆角令牌包括 --p-border-radius-100（4px）、200（8px）、300（12px）、full（9999px）。阴影令牌包括 --p-shadow-100 至 --p-shadow-400。排版应使用 Text 组件及 variant，如 headingXl、headingLg、headingMd、headingSm、headingXs、bodyLg、bodyMd、bodySm，并使用 tone 表达语义（subdued、success、critical、caution）。
已弃用组件（v13.x，不要使用）：LegacyCard 改用 Card + BlockStack；LegacyStack 改用 BlockStack / InlineStack；LegacyFilters 改用 IndexFilters；LegacyTabs 改用 Tabs；Modal 改用 App Bridge Modal API；Navigation 改用 App Bridge Navigation Menu；Toast 改用 App Bridge Toast API；ContextualSaveBar 改用 App Bridge useSaveBar()；TopBar 改用 App Bridge Title Bar；Loading 改用 App Bridge Loading API；Frame 由 App Bridge 处理；Sheet 改用 App Bridge Modal 或自定义；DisplayText 改用 Text 的 variant="heading*"；Heading 改用 Text 的 variant="heading*"；Subheading 改用 Text 的 variant="headingSm"；Caption 改用 Text 的 variant="bodySm"；TextStyle 改用 Text 的 tone 属性；TextContainer 改用 BlockStack 加 gap；SettingToggle 改用 Card + InlineStack + Button 自定义；PageActions 改用 Page 的 primaryAction/secondaryActions 属性；VisuallyHidden 改用 Text 的 visuallyHidden 属性。
限制：资料未提供该技能的收费、价格、平台支持范围或实际效果等信息；除上述版本说明外，未提供其他兼容性细节。