源自 GitHub电商独立站方案设计与前端搭建
本能力面向出海品牌及独立站卖家，提供从首页、商品列表、商品详情到购物车与结账页面的全流程独立站建站与优化方案。只需提供品牌定位、产品品类及功能需求，即可获得涵盖组件设计系统、转化率优化（CRO）、Core Web Vitals 性能标准、WCAG 2.2 无障碍合规以及符合 PCI DSS 安全要求的支付集成规范，直接输出成型的前端设计架构与规范代码。
常见场景
它能帮你做什么？
01
新建独立站整体规划：从零规划电商品牌的首页布局、商品详情页与极简结账链路。
02
现有店铺转化率诊断：对照 CRO 与 Core Web Vitals 指标优化加购与支付体验。
03
支付安全与无障碍合规改造：基于 Stripe 集成标准与 WCAG 2.2 实现合规且安全的前端代码。
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“为一家高端手工皮鞋品牌设计完整的电商独立站前端架构，包含 PDP 详情页与购物车抽屉交互规范。”
“请根据 WCAG 2.2 AA 标准与 Core Web Vitals 要求，编写符合 SEO 结构化数据的商品列表卡片组件代码。”
“规划一个单页极简结账流程，要求整合 Stripe Elements 并符合 PCI DSS SAQ A 安全标准。”
适用人群
适合谁？
上手门槛
使用难度
进阶
需要了解任务流程，页面已整理好使用步骤。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
