c/frontend › command
0votes

Frontend design (Anthropic)

Skill
submitted by u/client to c/frontend · 0 uses

Push UI work past generic defaults toward a distinctive, deliberate visual design.

Gives Claude design judgment when building or restyling an interface: picking an aesthetic direction rooted in the subject, choosing typography and color with intent, and avoiding the look of a stock template. It describes a loop of planning, checking against the brief, building and then critiquing the result. It is pure guidance with no scripts, so it works with any framework.

Try asking:

  • "Design a landing page for my coffee roastery that doesn't look like every SaaS site"
  • "Restyle this dashboard so it feels more editorial"
  • "Build a portfolio homepage with a bold, unusual layout"

Source: anthropics/skills · Apache-2.0 · by Anthropic

0 commentsreport

Install this skill

Skills are folders with a SKILL.md file. Claude loads one on its own when a task matches its description. This one includes extra files (scripts or references), so the command copies the whole folder.

Claude Code plugin (easiest, stays up to date)
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
Claude Code: for every project
npx degit anthropics/skills/skills/frontend-design ~/.claude/skills/frontend-design
Claude Code: this project only (commit it to share with your team)
npx degit anthropics/skills/skills/frontend-design .claude/skills/frontend-design

Made by Anthropic, Apache-2.0 license. Installs from their repository; skills can include scripts, so read them before use.

In the Claude apps, zip the folder and upload it under Settings → Capabilities → Skills.

More from c/frontend

See all of c/frontend →
0 comments

Log in to join the discussion.