源自 GitHub设计研发全流程编排器
该能力用于打通从设计意图到前端代码落地的全流程研发闭环。用户需提供明确的审美诉求、Figma 设计稿或既有项目代码作为输入。系统会自动提取并持久化设计规范与设计令牌（Design Tokens），协调调度原型验证、插图素材、页面重构与无障碍检查等下游代理，最终交付兼顾高保真视觉与严谨规范的生产级前端代码及配套资产。适合需要一体化产出原型与可用代码的研发团队。
常见场景
它能帮你做什么？
01
营销落地页全流程交付：根据品牌风格输入，自动提取设计规范，并行完成原型、配图与组件编写，直接输出符合无障碍标准的可用代码。
02
Figma设计稿转高保真代码：提取Figma中的设计令牌与布局结构，消除硬编码数值，驱动下游代理生成严谨规范的生产级前端组件与Storybook故事。
03
代码库设计系统提炼与复用：扫描现有代码库沉淀设计规范JSON，当需要新增业务界面时，基于已固化的设计规范快速生成一致风格的高保真原型。
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“pipeline: 读取Figma链接中的Landing Page设计，提取规范并生成符合Tailwind规范的生产级前端代码与组件故事。”
“请基于当前项目代码提取设计规范并存入缓存，然后依照提取的Tokens为控制台新增一个用户权限管理页面。”
“assets: 结合我们品牌设计规范，并行生成一套演示幻灯片、矢量功能图标以及一份单页产品概览。”
适用人群
适合谁？
上手门槛
使用难度
专业
适合熟悉相关工具和专业流程的用户。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes Agent可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
