Convert screenshots or URLs into frontend code with Playwright verification.
npx skills add https://github.com/AirMile/claude-config --skill frontend-convert
Please help me install this Agent Skill. Skill: frontend-convert Source: https://github.com/AirMile/claude-config/tree/main/skills/frontend-convert Command: npx skills add https://github.com/AirMile/claude-config --skill frontend-convert
Convert visual input (screenshots, Figma exports, URLs, inspiration images) into working frontend pages or components. Two modes: 1:1 faithful copy or inspiration-based conversion using the project's theme tokens (from project.json). Self-verifies with Playwright comparison loop. Use with /frontend-convert.
Provide a visual input path, choose mode, and trigger code generation (the system will map tokens or copy styles and run verification).
High-intent search queries and answers about installing and using this skill.
To convert a design screenshot to code, provide the visual input path and trigger generation. The system detects the target framework, like Next.js or Vite, and generates production-ready frontend UI code.
Yes, you can use a URL to generate frontend UI code. The skill accepts URLs, screenshots, or images as visual input and outputs working frontend pages or components.
Theme-token-based mapping applies your project's styling tokens from project.json instead of copying styles exactly. It enables inspiration-based conversion while maintaining visual alignment with your existing design system.
Yes, Playwright visual comparison verifies generated frontend code. The skill runs a self-verification loop using Playwright to ensure the output page structure aligns accurately with the input visual.
Supported frameworks for design-to-code conversion include Next.js, Vite, Remix, and Astro. The skill automatically detects the target framework to output the correct production-ready code structure.
Use 1:1 faithful reproduction for pixel-accurate frontends matching the visual exactly. Use token-mapped conversion for inspiration-based design applying your project's theme tokens for consistent styling across pages.
raphaelmansTranslate Figma designs into UI code with token-driven styling and MCP server integration.
congthang12312Integrate accessible shadcn/ui components with Tailwind tokens into React apps.
nimadorostkarAutomate visual regression testing and responsive layout verification with Playwright.
gabelulConverts Stitch UI designs into Vite React TypeScript components with Tailwind theming.
