Canvas Design

The canvas-design skill enables AI agents to generate and manipulate visual design layouts directly within a code-based canvas environment. It streamlines the frontend development workflow by allowing agents to create structured UI components without manual coding.

When to use it

• Rapidly prototype user interface layouts for new web applications.
• Generate responsive grid structures or flexbox arrangements from text descriptions.
• Iterate on visual designs quickly by having the agent adjust spacing, alignment, and component placement.
• Create initial mockups for dashboard interfaces or landing pages before detailed implementation.

Key capabilities

• Direct manipulation of a design canvas via natural language instructions.
• Generation of frontend code structures representing visual layouts.
• Real-time adjustment of UI elements within the agent's workspace.

Example prompts

• "Create a responsive navigation bar with a logo on the left and three menu items on the right."
• "Design a card layout for a blog post listing that displays an image, title, excerpt, and author name."
• "Build a simple dashboard grid with four equal-sized widgets arranged in a 2x2 layout."

Tips & gotchas

Ensure your AI agent has access to the specific canvas environment required by this skill before attempting complex layouts. For best results, describe visual elements clearly using standard frontend terminology like flexbox, grid, or positioning.