metaphor/marketplace

plugin · v1.0.0

frontend-design

Frontend design skill for UI/UX implementation

  • Curated
  • frontend
  • design
  • ui
try it

you ›install the frontend-design plugin

metaphor ›Signature and checksum check out. Installed frontend-design 1.0.0.

you ›/frontend-design

The skill inside

About

Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics.

What It Does

Claude automatically uses this skill for frontend work. Creates production-ready code with:

  • Bold aesthetic choices
  • Distinctive typography and color palettes
  • High-impact animations and visual details
  • Context-aware implementation

Usage

"Create a dashboard for a music streaming app"
"Build a landing page for an AI security startup"
"Design a settings panel with dark mode"

Claude will choose a clear aesthetic direction and implement production code with meticulous attention to detail.

Learn More

See the Frontend Aesthetics Cookbook for detailed guidance on prompting for high-quality frontend design.

Authors

Prithvi Rajasekaran ([email protected]) Alexander Bricken ([email protected])

Questions

What does the frontend-design plugin do?

Frontend design skill for UI/UX implementation

How do I install frontend-design in Metaphor?

Ask the agent: "install the frontend-design plugin". Metaphor downloads it from the signed catalog, checks the signature and checksum, and shows you what it can access before it turns on.

What can frontend-design access?

It only adds instructions for the agent and does not run anything on your computer.

Which skills come with frontend-design?

/frontend-design. After installing, type one in the composer or describe the task and Metaphor picks the right skill.

Who made frontend-design?

It is adapted from Anthropic's https://github.com/anthropics/claude-plugins-official under the Apache-2.0 license, reviewed and packaged for Metaphor. It is not endorsed by the original authors.

You might also like