Build with Better Design

Build or redesign a web or mobile interface on a Better Design design system. Use when the user asks for an app, site, page, dashboard or component and wants it built on Better Design, or asks to choose, create or install a design system.

1 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add better-designs/better-design-plugin --skill build-with-better-design

Manual install

git clone --depth 1 https://github.com/better-designs/better-design-plugin.git /tmp/better-design-plugin
mkdir -p ~/.claude/skills
cp -r /tmp/better-design-plugin/skills/build-with-better-design ~/.claude/skills/build-with-better-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Build with Better Design

The Better Design MCP server provides design systems, design principles and review checks. This skill is the order to use them in when building an interface.

## 1. Keep the design system the project already has

If `components/ui/` already holds a Better Design system, or `components/icons/.library.json` names an icon library, build with those. Change them only when the user asks.

## 2. Choose a design system with the user

1. Call `find-design-system` with a short description of the product and its audience.
2. Show the user the top matches, each with its name and preview link, and let the user pick one.
3. For a custom brand, call `create-design-system` with a description of the look. Pass the chosen match as `baseDesignSystemId`, or pass `brandCss` from `extract-from-url` or `extract-design-system` when the user has an existing site or stylesheet.
4. Poll `get-design-system-status` until the system is ready, then share its preview link.

## 3. Install it

Call `get-design-system-kit` with the target that fits the project:

| Project | Target |
| --- | --- |
| React or Next.js with a terminal | `react`, then run the returned install command |
| An inline canvas or artifact with no build step | `html` |
| React Native or Expo | `react-native` |
| An iOS app in SwiftUI | `swiftui` |
| A Shopify theme | `shopify` |

Build with the installed components instead of writing new ones.

## 4. Check the principles for the job

Read the full skill on GitHub

Details

Skill name: build-with-better-design
Repository: better-designs/better-design-plugin
Path: skills/build-with-better-design/SKILL.md
License: MIT
Repo updated: 22 October 2026
Listed in: karanb192/awesome-claude-skills

FAQ

What does the Build with Better Design skill do?

How do I install the Build with Better Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add better-designs/better-design-plugin --skill build-with-better-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Build with Better Design popular?

It lives in better-designs/better-design-plugin, which has 1 GitHub stars and 0 forks, and is included in 1 curated skill list.

Related skills

Keyword Icons

ruthless-coder-ai/keyword-icons

Generate clean monochrome PNG icons from a keyword — three distinct concepts per keyword, 1:1 aspect ratio, transparent background, recolorable, ready to drop into PowerPoint, Keynote, or docs. Use this whenever the user asks for an icon, pictogram, or "a simple graphic that represents X" (hospital, growth, contract, security, teamwork…), in any language, even if they never say the word "icon". Also use it when the user wants to recolor, resize, or tweak an icon made earlier.

Frontend & DesignIn 1 list

Anti Slop Design

wwewtech/anti-slop-design

Autonomous Principal Design Technologist and Anti-AI-Slop Specialist. Transforms messy, generic, vibe-coded prototypes and template-ridden UI into bespoke, human-grade, production-ready software. Use whenever building, styling, refactoring, or auditing web apps, SaaS dashboards, landing pages, mobile interfaces, Tailwind CSS, component systems, or when asked to "fix my UI", "make it look professional", "clean up AI slop", "improve UX", or "review frontend design".

Frontend & DesignIn 1 list

Impresario

Shushant17711/impresario

Use when building, creating, designing, redesigning, animating or polishing any website, landing page, portfolio, product page, hero, microsite, component or app screen in any frontend stack — even when the user gives only a subject ("make a website for X") with no style direction. Autonomously invents a memorable, subject-specific concept and ships heavily animated, flowing, award-level (Awwwards style) work without asking the user for style choices. Also use when a result looks generic, templated, AI-made, flat, static or lifeless.

Frontend & DesignIn 1 list

Tastegate

stas4000/tastegate

Build or fix a frontend (landing page, marketing site, dashboard, app screen, component) so it looks designed, not AI-generated, and prove it in a real browser before calling it done. Picks a design direction first (taste), builds on a craft floor (impeccable-style rules), then runs scripts/gate.py, which renders the page at phone and desktop width and fails on overlapping text, sideways scroll, low contrast, tiny tap targets, AI purple gradients, gradient text, emoji icons, eyebrow labels, default fonts, three-equal-card grids and placeholder copy. Use for any UI build, redesign, polish or "m

Frontend & DesignIn 1 list

Multi Stack MCP

VovikP/multi-stack-mcp

Generate native UI sections (hero, pricing, features, CTA, footer) for Next.js, Flutter, WordPress, or Vue from a unified pattern catalog with shared design tokens. Use when the user asks to "add a hero", "insert pricing section", "build landing page section", "create Flutter widget for marketing block", or wants the same brand styling applied across multiple stacks.

Frontend & DesignIn 1 list

Scrollytelling Brand Site

abdelrhman2007/scrollytelling-brand-site

Build an award-level, scroll-told company website with a story told through scroll, a WebGL "layer by layer" 3D print scene, pinned sections, per-service 3D models, a projects gallery, an About page, an optional .NET + SQL Server CMS with contact inbox and private QR contact cards, tuned to near-zero idle CPU/GPU and fully responsive. Use when the user asks for an amazing, premium, Awwwards-style, scrollytelling or 3D website for a company or brand, wants "a site like the Demo House of Prototyping site", or gives a company profile or deck to turn into an immersive site.

Frontend & DesignIn 1 list

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.