Design Engine

End-to-end AI design system with 190+ battle-tested styles, AI image generation, and pixel-perfect export. Designs social media posters, carousels, YouTube thumbnails, PDFs, and full websites — entirely from natural language. Includes brand onboarding, self-review quality system, Puppeteer export scripts, and 6 teachable design skills. Built through 300+ real design experiments. Use this skill when the user asks to: design a poster, create social media content, build a carousel, make a YouTube thumbnail, generate a PDF/report, design a website or landing page, create any visual content, or imp

14 stars 5 forksFrontend & Design

Install

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

npx skills add rahamanbinujit/claude-design-engine --skill design-engine

Manual install

git clone --depth 1 https://github.com/rahamanbinujit/claude-design-engine.git /tmp/claude-design-engine
mkdir -p ~/.claude/skills
cp -r /tmp/claude-design-engine/. ~/.claude/skills/design-engine

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

From the SKILL.md

# Design Engine

> Created by **Rahaman Bin Ujit** — Built through 300+ design experiments.

An end-to-end AI-powered design system. 190+ styles. AI photo generation. Brand consistency. Self-review quality gates. Pixel-perfect export.

## When to Activate

Use this skill when the user wants to:
- Design a social media post (LinkedIn, Instagram, Twitter/X)
- Create a carousel (multi-slide PDF or PNGs)
- Design a YouTube thumbnail
- Generate a PDF report or document
- Design a website, landing page, or web UI
- Create any visual content with professional quality
- Improve the design/aesthetics of existing HTML/CSS

## First-Time Setup

If `brand.config.json` does NOT exist, run onboarding:
1. Read `onboarding/setup.md`
2. Ask the user every question listed
3. Save answers to `brand.config.json`

**Never design without a brand config.**

## Design Pipeline

```
Brief → Brand Config → Research → Style Selection → AI Photos → HTML/CSS → Self-Review → Export
```

### Step 1: Understand the Brief
- Platform? Format? Content? Mood?

### Step 2: Load Brand
- Read `brand.config.json` for fonts, colors, identity

### Step 3: Choose a Style
- Browse `styles/INDEX.md` (190+ options with complete CSS)

### Step 4: Research References
- Read `workflows/reference-research.md`
- 40% of design time = studying what works in the niche

### Step 5: Generate Photos (if needed)
- Read `workflows/ai-image-generation.md`
- Use Gemini via nano-banana MCP for photo generation/editing

Read the full skill on GitHub

Details

Skill name: design-engine
Repository: rahamanbinujit/claude-design-engine
Repo updated: 23 March 2026

FAQ

What does the Design Engine skill do?

How do I install the Design Engine skill?

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

Is Design Engine popular?

It lives in rahamanbinujit/claude-design-engine, which has 14 GitHub stars and 5 forks.

Related skills

Build for Good UX

alper-dev/build-for-good-ux-skill

Audit, build, or refactor frontend UI components, pages, forms, and interactive flows to implement complete UX states (loading, success, error, empty), resilient async degradation, accessible button interactions, error recovery, Fitts's Law mobile touch targets, and choice simplification. Use when creating or reviewing user-facing interfaces, form validations, multi-section dashboards, checkout flows, or gesture-sensitive mobile screens.

Frontend & Design

Work Canvas

JingbiaoMei/work-canvas-skill

Turn an agent's own work — progress, debugging, analysis, comparisons, decisions — into one self-contained, reviewable HTML page (a "work canvas" / 网页看板) the user opens in a browser. Use when the user asks to create an interactive, reviewable, "alignment", progress, status, comparison, or summary HTML / dashboard / report / 看板 to see where a long task stands, review and comment, compare options, or decide next steps — especially for long-running, multi-subsystem, or trial-and-error tasks where terminal logs are the wrong medium. Also use to close out a `/goal` command session with a progress/s

Frontend & Design

CSS Animation

neonwatty/css-animation-skill

Generates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding. Researches the target app via Chrome, interviews the user, generates a structured brief and animation HTML file, then enters an iterative freeze-inspect-feedback review loop until the user approves. Use when the user says "css animation", "animate this feature", "create a css walkthrough", "animation walkthrough", or wants to create a CSS-based visual demo of an app feature.

Frontend & Design

Design Trends

growthaudit/claude-design-skills

Apply 2026 web design trends as complete styling systems to any artifact — landing pages, dashboards, presentations, components, or creative builds. Use this skill whenever the user mentions a design trend by name (e.g. "neo-brutalism", "neumorphism", "retrofuturism", "maximalism", "collage", "gamified", "dark mode", "vibrant", "bold typography", "3D immersive", "experimental navigation", "sustainable design", "motion design") or asks for something "trendy", "2026 style", "anti-design", "dopamine design", "Y2K", "retro-futuristic", "scrapbook style", "raw aesthetic", or similar. Also trigger w

Frontend & Design

Itqan

saleh-alhaddad/itqan-engineering

The full software-engineering lifecycle as one suite — DISCOVER, DEFINE, PLAN, BUILD, VERIFY, REVIEW, SHIP — with approval gates before code, test-first builds, evidence before "done", and resumable multi-session work. Routes to 12 sub-skills covering any stack, plus feature discovery, security audit, UI/UX craft, and learning roadmaps.

Frontend & DesignIn 1 list

Interaction Design

rastian/interaction-design-skills

Apply interaction design (IxD) principles and frameworks to product and service design work. Use this skill when designing or evaluating interaction flows, micro-interactions, feedback mechanisms, affordances, mental models, component states, response time, animation and transitions, error recovery, input validation, task flows, or navigation patterns. Core audiences: product designers, UX designers, UI designers, service designers, and interaction designers working on digital products and services. Trigger on: interaction flow, micro-interaction, affordance, feedback design, state design (hov

Frontend & Design

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