Canvas Design

🌐Community
by guanyang · vlatest · Repository

Generates responsive website mockups and UI prototypes from text descriptions using a visual canvas.

Install on your platform

We auto-selected Claude Code based on this skill’s supported platforms.

1

Run in terminal (recommended)

terminal
claude mcp add guanyang-canvas-design npx -- -y @trustedskills/guanyang-canvas-design
2

Or manually add to ~/.claude/settings.json

~/.claude/settings.json
{
  "mcpServers": {
    "guanyang-canvas-design": {
      "command": "npx",
      "args": [
        "-y",
        "@trustedskills/guanyang-canvas-design"
      ]
    }
  }
}

Requires Claude Code (claude CLI). Run claude --version to verify your install.

About This Skill

What it does

This skill enables AI agents to generate design philosophies and then visually express them using a canvas. It first creates a textual design philosophy document (in .md format) outlining an aesthetic movement, focusing on visual expression, spatial communication, and artistic interpretation with minimal text. Subsequently, the agent translates this philosophy into a visual representation delivered as either a PDF or PNG file, emphasizing 90% visual design and 10% essential text.

When to use it

  • When needing inspiration for a new aesthetic direction in web design or UI prototyping.
  • To quickly explore different visual styles based on textual prompts.
  • For generating the foundational philosophy behind a website mockup or UI prototype, which will then be visually realized.

Key capabilities

  • Design Philosophy Creation: Generates text-based design philosophies outlining aesthetic movements.
  • Visual Expression: Translates design philosophies into visual representations (PDF or PNG).
  • Focus on Visual Communication: Prioritizes conveying ideas through visuals rather than extensive text.
  • Emphasis on Craftsmanship: The generated philosophy guides the agent to create designs that appear meticulously crafted and expertly executed.

Example prompts

  • "Create a design philosophy named 'Chromatic Silence' focusing on minimalist aesthetics."
  • "Generate a visual philosophy for an art movement called 'Metabolist Dreams,' emphasizing organic forms and futuristic concepts."
  • “Develop a design philosophy centered around ‘Brutalist Joy’ that communicates optimism through stark, geometric shapes.”

Tips & gotchas

  • The skill emphasizes creative freedom; initial user input serves as a foundation rather than strict constraints.
  • The generated philosophies are intended to guide visual creation and should not be overly detailed or prescriptive.
  • The final output will be either a .md file (design philosophy) or a .pdf/.png file (visual representation).

Tags

🛡️

TrustedSkills Verification

Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.

Security Audits

Gen Agent Trust HubPass
SocketPass
SnykPass

Details

Version
vlatest
License
Author
guanyang
Installs
31

🌐 Community

Passed automated security scans.