Senior Designer

Act as an evidence-based senior product designer for any UI/app design or build task. Use this skill whenever the user wants to design or build an app, screen, page, component, landing page, dashboard, onboarding flow, or any user interface — web or native iOS (SwiftUI) — even if they only say "build me X" without mentioning design. Also use when the user complains that a UI looks generic, AI-generated, or ugly, or asks for design review, redesign, color/typography/layout decisions. Every rule inside is sourced from 158 vetted design publications (Apple HIG, WCAG, NN/g research, Bringhurst, No

10 stars 1 forksFrontend & Design

Install

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

npx skills add sshahzaiib/senior-designer-skill --skill senior-designer

Manual install

git clone --depth 1 https://github.com/sshahzaiib/senior-designer-skill.git /tmp/senior-designer-skill
mkdir -p ~/.claude/skills
cp -r /tmp/senior-designer-skill/. ~/.claude/skills/senior-designer

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

From the SKILL.md

# Senior Product Designer

You are now operating as a senior product designer with 12 years shipping consumer and B2B products. You write production code, but you are a designer first: you NEVER write UI code before the design thinking is done and approved. Every rule below comes from published design literature — books, standards, and primary research, not opinion (full citations in `references/evidence-base.md`). The finished product must pass the scored checklist in `references/checklist.md` with zero failures.

## Why this process exists

LLMs emit the statistical median of their training data. Unconstrained, that median IS the "AI slop" aesthetic — indigo gradients, Inter, identical card grids (documented by Anthropic's own frontend-aesthetics cookbook and two arXiv homogeneity studies). The phases below force the research, deliberation, and verification that a human senior designer does and a median-sampling model skips.

## PHASE 0 — Platform gate (always first)

Ask exactly one question and WAIT for the answer:
"Are we designing for (a) native iOS — SwiftUI, (b) Web, or (c) both?"
- SwiftUI → apply every ▸ SWIFTUI override below and score the S-checklist too.
- Both → design the system once, implement per-platform; never ship one platform's conventions on the other (NN/g; Rausch).

## Prototype rule (research-backed)

Read the full skill on GitHub

Details

Skill name: senior-designer
Repository: sshahzaiib/senior-designer-skill
License: MIT
Repo updated: 17 June 2026

FAQ

What does the Senior Designer skill do?

How do I install the Senior Designer skill?

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

Is Senior Designer popular?

It lives in sshahzaiib/senior-designer-skill, which has 10 GitHub stars and 1 forks.

Related skills

A2ui Adk

coolxeo/a2ui-adk

Build agents that generate rich, interactive UIs using Google's A2UI (Agent-to-User Interface) format with Google ADK (Agent Development Kit). Use when building ADK agents that need to render dynamic UI components, forms, cards, lists, or interactive elements via the A2UI declarative JSON format. Includes a Tailwind CSS + shadcn/ui design system flavor for creating beautiful, modern A2UI catalogs and components. Covers A2UI schema management, catalog configuration, A2A transport integration, response parsing/validation, custom catalog creation, and the orchestrator pattern for multi-agent UI r

Frontend & Design

Premium Web Design

Lucxar/premium-web-design-skill

Transform any website into a premium, Apple-quality web experience. Use when building new websites, redesigning existing ones, reviewing web design quality, implementing landing pages, or when the user mentions "premium", "luxury", "high-end", "Apple-like", or "professional" website design. Also activate when creating hero sections, improving visual hierarchy, adding animations, or optimizing web aesthetics.

Frontend & Design

Funnel Cloner

Perspectiveco/funnel-cloner

Clone any landing page or marketing funnel from a URL into the user's Perspective account, rebuilt as closely as possible. Use this whenever the user drops a URL and wants to rebuild, recreate, clone, copy, replicate, or "funnel hack" it as a Perspective funnel — including turning a competitor's funnel into their own, recreating a landing page in Perspective, or "make this in Perspective." Trigger on phrasings like "rebuild this URL in Perspective", "clone this funnel", "copy this landing page into Perspective", "recreate this page as a funnel", "funnel hack this and build it", or even just pa

Frontend & Design

No Slop Design

agshinrajabov/no-slop-design

Senior product-design workflow for web and mobile UI that avoids generic "AI slop" and produces token-based, accessible, platform-correct design with a deliberate visual anchor. Use when asked to design, redesign, review, or "make it look better" for any screen, app, landing page, component, or design system; when building UI from scratch; when a design system or brand must be adopted or created; when generating design tokens, moodboards, or design specs; or when output must not look AI-generated. Runs discovery (market, audience, existing design system) → mini research → moodboard → tokens →

Frontend & Design

Otel Collector Config

s3onghyun/otelcol-doctor

Use when authoring, debugging, or reviewing an OpenTelemetry Collector (otelcol) configuration — defining receivers/processors/exporters/connectors, wiring service pipelines, choosing between the core and contrib distributions, or exporting to OTLP/Prometheus/Loki/Tempo/Mimir. Also use when a Collector starts but no data arrives, a component is rejected at startup, or metrics lack expected labels. Triggers on "otelcol", "otel collector config", "collector pipeline", "receivers/processors/exporters", "memory_limiter", "otlp exporter", "prometheusremotewrite", "spanmetrics", "tail_sampling".

Frontend & DesignIn 1 list

Motion Graphics

acelera-agency/html-animation

Build frame-exact motion graphics — animated logos, kinetic typography, brand videos, animated titles and social clips — as a single HTML file driven by a paused Web Animations timeline, then export them to MP4 in 1:1, 4:5 and 9:16. Use this whenever someone wants to animate a wordmark or logo, make a video from text, build a title sequence or lower third, produce a clip for LinkedIn / Instagram / Reels / TikTok, "turn this design into a video", animate a landing-page hero, or export a web animation to a video file — and also when an existing animation of this kind needs fixing, retiming, rest

Frontend & Design

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