| name | canvas-design |
| description | UI/UX design skill for layout planning, theme creation, animation design, and HTML prototype generation. |
canvas-design
Design user interfaces through structured layout → theme → animation → prototype workflow.
When to use
- The user wants to design a UI, landing page, dashboard, or component.
- Visual layout planning is needed before coding.
- Theme or animation decisions are required.
Instructions
- Layout phase: Present an ASCII wireframe showing component placement, spacing, and hierarchy. Confirm with user before proceeding.
- Theme phase: Define colors (background, foreground, accent, semantic), fonts (heading, body, mono), spacing scale, border-radius, and shadow levels.
- Animation phase: List micro-interactions with timing, easing, and trigger conditions using compact notation:
element: duration easing [property-transitions].
- Prototype phase: Generate a single self-contained HTML file with embedded CSS and JS. Use CDN resources (Tailwind, Flowbite, Lucide icons, Google Fonts).
- Design responsive-first — mobile breakpoints must work.
- Avoid default blue/indigo unless explicitly requested.
- Use Google Fonts from approved list: Inter, Roboto, Poppins, Montserrat, DM Sans, JetBrains Mono, Fira Code, Space Mono, Space Grotesk, Outfit, Plus Jakarta Sans.
- Confirm each phase with the user before advancing to the next.
