Designbrief

A library of UI design direction files that provide style guardrails for building tasteful, consistent interfaces. Use when building any UI — select a style or let the AI recommend one based on the project context.

10 stars 2 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add Heiberg-Industries/designbrief --skill designbrief
Manual install
git clone --depth 1 https://github.com/Heiberg-Industries/designbrief.git /tmp/designbrief
mkdir -p ~/.claude/skills
cp -r /tmp/designbrief/. ~/.claude/skills/designbrief

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

From the SKILL.md

# designbrief

A library of rich design direction files — one per UI style — that provide guardrails for building tasteful, consistent interfaces without prescribing exact values.

## How It Works

Each style is a standalone markdown file in `styles/` that defines the **design DNA** of a visual direction: typography families, color theory, spacing philosophy, border/shadow characteristics, layout principles, component behavior, and implementation guidance.

These are **guardrails, not templates**. They define *what kind of* font, color, spacing — not the exact values. The developer (or AI) makes specific choices within the style's constraints.

## When This Skill Activates

Use this skill when the user:
- Asks to build any UI, page, component, or app
- Mentions a specific design style by name
- Asks for style recommendations or comparisons
- Wants to change the visual direction of an existing project

## Workflow

### 1. Determine the Style

**If the user specifies a style** (e.g., "use Bauhaus", "make it glassmorphic"):
- Read the corresponding file from `styles/{style-name}.md`
- Apply its guardrails to all UI decisions

**If the user does NOT specify a style**:
- Read `styles/_index.md` for the full catalog with mood/industry tags
- Ask the user what mood, audience, and industry they're targeting
- Recommend 2-3 styles with brief reasoning
- Let them choose, then load the full style file

### 2. Apply the Style
Read the full skill on GitHub

Details

Skill name
designbrief
Repository
Heiberg-Industries/designbrief
License
MIT
Repo updated
20 February 2026

FAQ

What does the Designbrief skill do?

A library of UI design direction files that provide style guardrails for building tasteful, consistent interfaces. Use when building any UI — select a style or let the AI recommend one based on the project context.

How do I install the Designbrief skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Heiberg-Industries/designbrief --skill designbrief. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Designbrief popular?

It lives in Heiberg-Industries/designbrief, which has 10 GitHub stars and 2 forks.

Related skills

Frontend Design Pro

12

Krishna-Modi12/frontend-design-pro

Production-grade frontend UI/UX skill registry. Auto-routes to the correct skill based on user intent. Use for anything involving what users see and click in a browser — building or fixing React/Next.js components, pages and layouts; visual defects; animation; dashboards; forms; accessibility audits; frontend performance; 3D with Three.js/R3F; design systems and tokens; and tests for any of it. Skip for backend logic, APIs, databases and infrastructure.

Frontend & Design

UI Styles

11

chrzamz/ui-styles-skill

Participate before building or changing product UI: websites, apps, demos, dashboards, forms, visual redesigns, component-library selection, themes and interaction states. Act as a practical designer: understand the product, recommend and preview a direction, preserve a project visual standard, and implement it using the existing stack. 支持风格推荐、界面制作、组件库选型、主题 token、自定义风格。Skip backend-only work and nonvisual fixes.

Frontend & Design

No Slop UI

12

LeoStehlik/no-slop-ui

Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.

Frontend & Design

Figma Annotations Strategy

10

saralobo/skill-figma-annotations

Generate strategic Figma annotations via MCP based on PRs, tickets, or user descriptions. Use when the user wants to document a screen, flow, or component for Figma, or mentions "figma annotations", "annotation strategy".

Frontend & Design

Replica

10

Surya17155/Replica

Use when the user uploads a screenshot of a hero section or landing page (or a URL/description of one) and wants a copy-paste-ready developer prompt to recreate it exactly in a tool like Lovable, Bolt, Replit, or Cursor. Produces prompts with exact hex colors, Tailwind classes, animation timing tuples, and component structure — not vague descriptions.

Frontend & Design

Slizdeck

13

pedroanze/slizdeck

Genera decks de slides HTML animados a partir de un design system propio — enfocado en pitch decks de startup (minimalista, poco texto, mucha imagen/gráfica), pero también sirve para charlas, demos y recaps de evento. Arquitectura deck-stage 1920×1080 con navegación por teclado, pensado para presentar en vivo. Trae cinco style packs listos (terminal oscuro, blanco puro, color dominante, denso en datos, editorial), cada uno con paleta, tipografía y reglas de composición validadas contra contraste WCAG y clichés visuales de IA. El design system se define de forma guiada —elegir un pack, inyectar

Frontend & Design

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