Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Frontend Design (Distinctive UI)

Guides Claude to produce production-grade frontend code with a bold, intentional aesthetic instead of generic AI-looking UI.

Design & UIIntermediate★ 1,939⑂ 641AI score 7/10Last updated: Jul 26, 2026

What it does

  • Forces a committed aesthetic direction (brutalist, editorial, maximalist, refined minimal, art deco, etc.) before any code is written.
  • Provides concrete criteria across typography, color/theme, motion, spatial composition, and backgrounds/texture.
  • Explicitly bans clichés: Inter/Roboto/Arial, purple gradients on white, predictable component layouts, repeated go-to fonts.
  • Tells the model to match code complexity to the design vision — restraint for minimal, elaborate effects for maximal.

Who it's for

  • Frontend developers building landing pages, dashboards, or portfolios with Claude Code.
  • Solo devs, indie hackers, and startup teams without a dedicated designer.
  • Anyone tired of every AI-generated UI looking the same.

Example uses

  1. "Build a SaaS landing page" → picks an editorial tone, pairs a display font with a refined body font, asymmetric grid, staggered page-load reveals.
  2. "React pricing section" → CSS-variable color system plus Motion-library hover and scroll interactions.
  3. "Brutalist personal blog theme" → heavy borders, grain overlay, custom cursor, all coherent with the chosen direction.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/composio-community/awesome-claude-plugins/HEAD/frontend-design/skills/frontend-design/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the frontend-design/skills/frontend-design folder from the GitHub repo composio-community/awesome-claude-plugins into my ~/.claude/skills/composio-community-frontend-design/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/composio-community/awesome-claude-plugins.git /tmp/acp && mkdir -p ~/.claude/skills && cp -r /tmp/acp/frontend-design/skills/frontend-design ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open your terminal.
  2. Clone the repo to a temp folder: git clone https://github.com/composio-community/awesome-claude-plugins.git /tmp/acp
  3. Make sure the skills folder exists: mkdir -p ~/.claude/skills
  4. Copy the skill in: cp -r /tmp/acp/frontend-design/skills/frontend-design ~/.claude/skills/
  5. Verify that ~/.claude/skills/frontend-design/SKILL.md is present.
  6. Restart Claude Code and ask something like "build me a landing page" — the skill should trigger automatically.
  7. (Optional) For React projects, pre-install the animation library: npm i motion.
View source on GitHub ↗