Xlayers
✨ Generate code from your design
Install / Use
/learn @xlayers/XlayersREADME
What is xLayers?
xLayers is a community-driven effort to bridge the gap between designers, who implement the UI sketch and developers who implement the code from these design sketches. Put simply, xLayers is a code generation tool for your design sketches: use xLayers to instantly scaffold your components out of your design.
The xLayers project is driven by community contributions. Please send us your Pull Requests and feedback!
Want to help? 
Want to file a bug, contribute some code, or improve the documentation? Excellent! Read up on our guidelines for contributing and then check out one of our issues in the hotlist: community-help.
Contributors
This project exists thanks to all the people who contribute. [Contribute]. <a href="https://github.com/xlayers/xlayers/graphs/contributors"> <img src="https://opencollective.com/xlayers/contributors.svg?width=890&button=false" /> </a>
Backers
Thank you to all our backers! 🙏 [Become a backer] <a href="https://opencollective.com/xlayers#backers" target="_blank"><img src="https://opencollective.com/xlayers/backers.svg?width=890"></a>
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
<img src="https://pbs.twimg.com/profile_images/481333142238679040/ErykRvBG_200x200.png" width="50"> <a href="https://opencollective.com/xlayers/sponsor/2/website" target="_blank"><img src="https://opencollective.com/xlayers/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/xlayers/sponsor/3/website" target="_blank"><img src="https://opencollective.com/xlayers/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/xlayers/sponsor/4/website" target="_blank"><img src="https://opencollective.com/xlayers/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/xlayers/sponsor/5/website" target="_blank"><img src="https://opencollective.com/xlayers/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/xlayers/sponsor/6/website" target="_blank"><img src="https://opencollective.com/xlayers/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/xlayers/sponsor/7/website" target="_blank"><img src="https://opencollective.com/xlayers/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/xlayers/sponsor/8/website" target="_blank"><img src="https://opencollective.com/xlayers/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/xlayers/sponsor/9/website" target="_blank"><img src="https://opencollective.com/xlayers/sponsor/9/avatar.svg"></a>
Related Skills
claude-opus-4-5-migration
83.4kMigrate prompts and code from Claude Sonnet 4.0, Sonnet 4.5, or Opus 4.1 to Opus 4.5
frontend-design
83.4kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Agent Development
83.4kThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
Command Development
83.4kThis skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
