SuperAPI AI 工具集

figma-storybook-workflow

前端与建站

查看项目

更新于 10-15 20:28

技能介绍

用途:把 Figma 设计实现为 Storybook 组件,强调像素级精确与质量优先于速度,适合需要高保真还原、多组件逐个落地的场景。

主要能力:强制逐组件工作流,一次只处理一个组件;每个组件先用 mcp0_get_screenshot 查看设计并描述所见,再用 mcp0_get_design_context --nodeId <component-node-id> --forceCode true 提取精确尺寸、颜色、字体、间距与图片;下载资源并校验文件大小;按提取值精确实现,禁止取整或凭记忆实现;要求交互元素真正可用(搜索过滤、下拉、分页、标签页、表单校验等),并处理空状态与受控/非受控 props;桌面确认后再补移动与平板断点;最后用 Storybook 与 Playwright 验证。

使用方式:先列出待实现组件并等待用户批准;确认范围是仅组件还是完整页面;逐组件提取、下载资源、实现、展示给用户、按反馈迭代,用户确认后再进入下一个;启动服务前用 lsof -ti:3001、lsof -ti:6010 检查端口,避免重复启动;用 npx tsc --noEmit 与 Storybook 的 index.json 验证。

限制:流程较慢、交互多、token 消耗高;依赖 Figma MCP、Playwright MCP 与 Storybook 环境;具体端口、路径与命令以资料为准,未提供的收费、平台与效果信息暂未提供。