canvas-design

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

1. Layout phase: Present an ASCII wireframe showing component placement, spacing, and hierarchy. Confirm with user before proceeding.
2. Theme phase: Define colors (background, foreground, accent, semantic), fonts (heading, body, mono), spacing scale, border-radius, and shadow levels.
3. Animation phase: List micro-interactions with timing, easing, and trigger conditions using compact notation: element: duration easing [property-transitions].
4. Prototype phase: Generate a single self-contained HTML file with embedded CSS and JS. Use CDN resources (Tailwind, Flowbite, Lucide icons, Google Fonts).
5. Design responsive-first — mobile breakpoints must work.
6. Avoid default blue/indigo unless explicitly requested.
7. Use Google Fonts from approved list: Inter, Roboto, Poppins, Montserrat, DM Sans, JetBrains Mono, Fira Code, Space Mono, Space Grotesk, Outfit, Plus Jakarta Sans.
8. Confirm each phase with the user before advancing to the next.