Designgate

Mandatory human-in-the-loop UI design checkpoint. Use automatically — before writing any UI code — whenever the task involves building, creating, adding, or redesigning a user-facing screen, page, flow, component, interface, or frontend, unless every interaction maps to an already-decided pattern. Verifies a brand brief exists, reads prior UX decisions to avoid re-asking resolved questions, surfaces only genuinely unresolved interaction decisions (batched, max 5), generates a complete screen-generation prompt for the configured design MCP, and enforces a hard human approval gate before impleme

8 stars 2 forksFrontend & Design

Install

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

npx skills add sukenik-collab/claude-designgate --skill designgate

Manual install

git clone --depth 1 https://github.com/sukenik-collab/claude-designgate.git /tmp/claude-designgate
mkdir -p ~/.claude/skills
cp -r /tmp/claude-designgate/. ~/.claude/skills/designgate

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

From the SKILL.md

# DesignGate — Instructions

## Purpose

Ensure that AI-generated UI reflects human decisions on brand, interaction design,
and visual direction — not AI defaults. Enforce a mandatory human approval gate
before any UI implementation begins.

---

## Activation

### Automatic (no setup required)

DesignGate auto-activates from this skill's `description`: Claude invokes it when a task
matches the trigger conditions (building, creating, adding, or redesigning any user-facing
screen/page/flow/component/UI), before any UI is built. **No CLAUDE.md snippet is required**
— the skill description is the trigger.

The CLAUDE.md snippet (`templates/claude_md_snippet.md`) is now **optional reinforcement**:
add it only if you want a hard, always-on backstop pinned in context for the mandatory gate
(e.g. a team that cannot tolerate a missed auto-invoke). It is no longer the primary
mechanism, and the skill activates without it.

### Explicit invocation

`/designgate` — triggers the workflow manually for the current task.

### Contextual triggers (skill-based)

Activate when the user's message contains any of:
- "build the [screen / page / flow / frontend / UI]"
- "create the [screen / interface / component / UI]"
- "add [screens / UI / frontend / the design for]"
- "implement [the design / the UI / the screens for]"

Do NOT activate for:
- Backend-only tasks with no frontend component
- Minor iterations explicitly described as variations of an already-approved design

Read the full skill on GitHub

Details

Skill name: designgate
Repository: sukenik-collab/claude-designgate
License: MIT
Repo updated: 25 June 2026

FAQ

What does the Designgate skill do?

How do I install the Designgate skill?

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

Is Designgate popular?

It lives in sukenik-collab/claude-designgate, which has 8 GitHub stars and 2 forks.

Related skills

Mqc Female Lawyer Brandcast

MiaoQichuan/mqc-female-lawyer-brandcast

女律师 IP 形象内容工作台。一套固定的风格，播成多种内容形态——用内置的 53 张女律师漫画形象素材，把法律内容做成成套图文：朋友圈九宫格（八股结构）、小红书 3:4 多图、公众号（封面 + 正文插图组）、单张方图、竖版长图。凡是用户要写公众号推文、小红书图文、朋友圈九宫格、普法内容、案例解读、法律科普，或者提到"配图""插图""封面""九宫格""做成图""普法漫画""案情漫画""律师形象""IP 形象"，都要使用这个 Skill。注意：公众号要的是散落在正文段落之间的插图和两张封面，**不是一整张长图**，做公众号一律走 wechat 格式。用户直接给短句让你排版，或者丢一整篇长文、一段案情让你梳理提炼再配图，两种都用它。素材库已内置形象素材，不要调用任何文生图工具。

Frontend & Design

UX Audit

paulunemoon/ux-audit-skill

Evidence-based UX audit of a product that already exists — marketing website, web app, mobile app, or desktop app. LOAD WHEN the request is to evaluate, review, critique, or diagnose an existing interface: "audit the UX of this app", "review this flow", "review this screen", "what's wrong with this onboarding", "why do users drop off here", "audit our current workflow", "is this accessible", "critique this product", "heuristic review", "a11y audit" — and the same intents in French ("audite l'UX", "revois ce parcours / cet écran", "qu'est-ce qui cloche dans cet onboarding", "pourquoi les utilis

Frontend & Design

Personal Brand Ops

YonasValentin/personal-brand-ops

Build personal brands that convert customers, not just rack up views. Use this skill whenever the user wants to define, scale, or operationalize a personal brand or content operation — including brand positioning, content strategy, posting cadence, platform selection, storytelling, media team hiring, onboarding, 1:1 cadences, work-mode design, or trust-first monetization. Trigger on phrases like "build my brand," "scale my content," "should I post on X platform," "what should I post about," "hire a content team," "FTE vs agency," "30/60/90 onboarding," "media team org chart," "monetize my audi

Frontend & Design

Justskill Design

justskill-ai/justskill-design

Design and edit web pages as a validated HTML file with inline CSS, then fine-tune them on a local canvas. Use this skill whenever the user wants to design, mock up, wireframe, redesign or restyle a web page, app screen, or mobile screen — a landing page, dashboard, settings page, pricing page, empty state, onboarding flow, or any layout built from frames, text, images and icons — or wants to change the spacing, colour, typography or layout of an existing design, turn a design into deliverables, or bring in a `.pen` file. Also use it when the user asks for a visual editor for pages, a design f

Frontend & Design

Apple Cn Checkout

Caoran1314/apple-cn-checkout

用 bsk_* 浏览器工具在苹果中国官网（apple.com.cn）完成 iPhone 选购与结账。含实测的稳定选择器、5 级门控的一轮批量配方、以及会造成静默失败的坑（networkidle 永不满足 / CSS 猜选择器会打偏 / 点击后立刻读取是旧 DOM）。当用户要求在 Apple 中国官网买手机、加购物袋、或走到微信支付时使用。

Frontend & Design

App UI Slopless

massipetro/app-ui-slopless

Visual design and UX for native app screens in SwiftUI (iOS and macOS), Jetpack Compose and Compose Multiplatform (KMP). Use whenever the user wants to design, build, restyle, redesign, theme or audit how an iOS, Android or Mac screen, window, flow, component or design system looks and feels — e.g. a screen that looks generic, boring, stock Material or "AI-made"; picking a type scale, colour palette or theme code; giving an app a style (warm premium, neo-brutalist, playful, editorial); or a UX critique of a mobile or Mac screen or screenshot (hierarchy, tap targets, thumb reach, sidebar and to

Frontend & Design

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