Stylo
Spine/CoffeeScript example GUI designer
Install / Use
/learn @maccman/StyloREADME
Stylo
Stylo is a web app designer written in CoffeeScript and Spine. It allows you to manipulate various HTML elements, add styles and edit text.
You can find a demo here (webkit only).
Code examples
The code should provide good examples of how to achieve the following:
- Element snapping, resizing and drag/drop
- Copy/paste, undo/redo & keyboard shortcuts
- Context menus and z-index ordering
- Color picker using canvas
- JSON object instance serialization
More
For more information, please see the blog post.
Related Skills
diffs
337.7kUse the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
1.8kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
animation-guide
A design system built with Base UI
