190+ design styles. AI photo generation. Self-reviewing quality system. Pixel-perfect 4K export.
Give it a brief in plain English. Get back agency-quality designs — in YOUR brand.
Built through 300+ real design experiments. Every style tested, scored, and validated.
Copy this into your CLAUDE.md and start designing:
## Design System
For any design task, read and follow the skill at `claude-design-engine/SKILL.md`.# Clone the engine
git clone https://github.com/rahamanbinujit/claude-design-engine.git
# Install export tools
cd claude-design-engine/scripts && npm installThen just say: "Design a LinkedIn post about [your topic]"
That's it. First time it asks about your brand. After that, every design uses YOUR brand automatically.
Every design below was made by this engine. Different brands. Different niches. Different formats. Same system.
 |
 |
| Coffee Brand — Serif + Real Photography Split layout with gradient overlay |
Travel Retreat — Full-bleed Aerial Photo Bold type over drone photography |
 |
| YouTube Thumbnail (1280x720) — Real photo cutout + bold text + app icons |
 |
 |
 |
 |
| Photo + AI Image Dark Editorial |
Organic Notebook Handwritten + Sticky Notes |
Carousel Hook Strikethrough Technique |
Giant Stat Data-Driven Post |
 |
|
| India Food Map — Full Infographic Real map, pins, state-by-state data |
Carousel Covers — Dark Editorial Bold type, minimal, scroll-stopping |
 |
 |
| Comparison Slide — Split Layout | System Diagram — Connected Architecture |
Photo designs. Thumbnails. Posters. Infographics. Presentations. Carousels. Real photography, diverse layouts, different brands — all from the same engine.
| Capability | Description |
|---|---|
| Social Media Posters | LinkedIn, Instagram, Twitter/X — square (1080x1080) or portrait (1080x1350) |
| Carousels | Multi-slide PDF or PNG carousels with consistent branding across slides |
| YouTube Thumbnails | High-contrast, scroll-stopping 1280x720 thumbnails |
| Websites & Landing Pages | Full responsive websites, landing pages, portfolios, link-in-bio pages |
| PDF Documents | Reports, presentations, multi-page documents with professional layout |
| AI Photo Generation | Generate professional photos using Gemini AI, embed them into designs |
| AI Photo Editing | Remove backgrounds, change lighting, style transfer on any image |
| Brand Consistency | Every design automatically uses YOUR fonts, YOUR colors, YOUR identity |
| 190+ Layout Styles | From neo-brutalist to botanical illustration — each with complete CSS |
| Self-Review System | AI scores every design (1-5) and fixes issues before showing you |
| 4x Resolution Export | 4320x4320px output that survives any platform's compression |
| 7 Design Skills | Typography, layout, color, hierarchy, CSS, photo integration — all teachable |
It works like a Creative Director — not a template filler. It researches your niche, picks the right style, builds the layout, reviews its own work, and only shows you the final result when it's good enough.
You: "Design a LinkedIn post about AI replacing marketing teams"
Claude: 1. Loads your brand (fonts, colors, identity)
2. Researches real reference designs in that niche
3. Picks 'bold-split' style from the 190+ library
4. Generates a comparison photo using AI (Gemini)
5. Builds the layout in HTML/CSS with your brand
6. Self-reviews: scores 4.5/5 ✓
7. Exports at 4x resolution (4320x4320px PNG)
8. Opens the image for you
Total: One message in, professional design out.
Brief → Research → Style Selection → AI Photos → HTML/CSS Build → Self-Review → Export
Every step is automated. Every step follows rules refined through 300+ experiments.
| Agent | Install Command |
|---|---|
| Claude Code | claude skill install github:rahamanujit/claude-design-engine |
| Cursor | Clone → auto-detected in .cursor/skills/ |
| Codex CLI | Clone → auto-detected in .codex/ |
| Gemini CLI | Clone → auto-detected in .gemini/ |
| SkillKit | skillkit install rahamanujit/claude-design-engine |
Add Gemini-powered photo generation for designs with real images:
{
"mcpServers": {
"nano-banana": {
"command": "npx",
"args": ["-y", "nano-banana@latest"]
}
}
}Free API key from Google AI Studio. Key stays local — never committed to git.
Every style is a complete design template with:
- ASCII layout diagram showing exact element placement
- Full CSS implementation (copy-paste ready)
- Typography specs (font sizes, weights, spacing)
- Color application rules
- When to use / when not to use
| Style | Best For | Vibe |
|---|---|---|
| Bold Split | Comparison posts, before/after | Dark editorial with dual photo panels |
| Type Hero | Thought leadership, quotes | Typography-dominant, vast whitespace |
| Bento Grid | Stats, multi-point content | Apple-style modular grid |
| Minimaximalist | Single powerful stat | One element at 420px, everything else tiny |
| Neo-Brutalist | Tech/systems content | White cards, hard red shadows, terminal feel |
| Newspaper Masthead | Breaking news, announcements | Retro editorial broadsheet |
| Torn Paper Edge | Authentic, personal content | Organic, handmade collage |
| Neon Noir | Futuristic/tech content | Glowing accents on deep black |
| Botanical Illustration | Growth/patience narratives | Herbarium specimen aesthetic |
| Architectural Blueprint | Systems thinking content | Technical floor plan poster |
| Art Deco | Premium announcements | 1920s geometric elegance |
| Tarot Card | Mystical/identity posts | Illustrated card with symbolism |
| Cassette Mixtape | Nostalgia, personal journey | 80s/90s tape J-card insert |
| Data Journalism | Data-driven insights | Infographic editorial layout |
| Forensic Evidence Board | Investigation/deep-dive posts | Red string conspiracy board |
...and 175+ more. Browse the full library: styles/INDEX.md
The hybrid workflow that makes this system unique:
AI generates the photos → Code controls the layout → Best of both worlds
Powered by Google Gemini via nano-banana MCP server.
| Capability | Example Prompt |
|---|---|
| Professional headshots | "Studio headshot, 85mm f/1.4, warm softbox lighting" |
| Product photography | "Laptop on dark surface, dramatic rim lighting, red accent" |
| Lifestyle scenes | "Marketer in modern office, golden hour, candid style" |
| Abstract backgrounds | "Dark gradient with subtle noise, navy to black" |
| Background removal | Edit any photo to remove/change backgrounds |
| Style transfer | Apply reference image styles to your photos |
| Iterative editing | "Make it warmer" → "Add more contrast" → "Perfect" |
The AI generates photos. You control everything else: typography, layout, spacing, brand colors, composition. No more fighting with AI to get text right.
Every design is scored before you see it.
Score 5 ████████████████████ Exceptional — would stop someone scrolling
Score 4 ████████████████ Professional — clean, well-executed
Score 3 ████████████ Acceptable — needs fixes before showing
Score 2 ████████ Below standard — must fix
Score 1 ████ Broken — start over
Minimum score to show you: 4. The system fixes issues automatically before presenting.
- Text readability (can you read it on a phone?)
- Visual hierarchy (is there ONE clear focal point?)
- Alignment (is everything on the grid?)
- Color usage (accent on ONE element only?)
- Spacing (consistent padding, breathing room?)
- Brand consistency (matches your config?)
- Overall composition (would you be proud of this?)
The engine doesn't just produce designs — it teaches design thinking. Every skill is a standalone guide with techniques, code examples, and practice exercises.
| Skill | What You'll Learn |
|---|---|
| Typography Mastery | Weight contrast, the 4:1 hierarchy rule, letter-spacing inversion, accent words, font pairing |
| Layout & Composition | The 3-zone system, 8px grid, focal points, whitespace as design, flexbox for everything |
| Color Application | One-accent rule, opacity-based hierarchy, warm neutrals, glow techniques, palette construction |
| Visual Hierarchy | Size dominance, the squint test, 4 levels of importance, reading flow, format-as-punchline |
| CSS for Designers | Essential CSS patterns: flexbox, grid, cards, pills, gradients, clip-paths, Google Fonts |
| Photo Integration | Hybrid workflow, photo panels, cutouts, custom shapes, AI prompt formulas for cinematic photos |
| Website Design | Landing pages, responsive grids, nav patterns, section flow, fluid typography, CTA hierarchy |
These skills are automatically applied during design. But you can read them to understand the "why" behind every decision, or to develop your own design eye.
| Approach | Problem |
|---|---|
| AI image generation (DALL-E, Midjourney) | Can't control text, layout, or brand consistency |
| Canva/Figma templates | Requires manual work, limited by templates |
| Direct PDF libraries (jsPDF, pdfkit) | Poor typography, alignment nightmares |
| Markdown to PDF | No design control, generic look |
| HTML + CSS + Puppeteer | Full CSS control. Pixel-perfect. Programmable. Your brand. |
HTML/CSS gives you:
- Exact control over every pixel
- Google Fonts with proper rendering
- Flexbox/Grid for perfect alignment
- 4x resolution export via Puppeteer
- Reproducible, version-controllable designs
claude-design-engine/
│
├── CLAUDE.md ← The brain. Powers the entire system.
├── brand.config.json ← YOUR brand (auto-generated on first run)
├── LICENSE ← Copyright Rahaman Bin Ujit
│
├── onboarding/ ← First-time brand setup
│ └── setup.md ← 7 questions → your brand config
│
├── workflows/ ← Step-by-step design processes
│ ├── poster-design.md ← Single image design
│ ├── carousel-design.md ← Multi-slide carousels
│ ├── thumbnail-design.md ← YouTube thumbnails
│ ├── pdf-generation.md ← Documents & reports
│ ├── ai-image-generation.md ← Gemini photo generation & editing
│ ├── website-design.md ← Websites & landing pages
│ ├── reference-research.md ← Research-first methodology
│ └── self-review.md ← Quality scoring system
│
├── styles/ ← 190+ battle-tested layouts
│ ├── INDEX.md ← Browse all styles
│ ├── bold-split.md
│ ├── bento-grid.md
│ ├── neo-brutalist.md
│ ├── ... (190+ files, each with complete CSS)
│ └── Every style includes:
│ ├── ASCII layout diagram
│ ├── Full CSS implementation
│ ├── Typography & color specs
│ └── Usage guidelines
│
├── knowledge/ ← Design theory & insights
│ ├── social-media-design.md ← Platform-specific data
│ ├── typography-rules.md ← Font pairing, hierarchy, spacing
│ ├── color-theory.md ← Color psychology & palettes
│ └── design-principles.md ← Art director mindset
│
├── skills/ ← Teachable design techniques
│ ├── INDEX.md ← Browse all skills
│ ├── typography-mastery.md ← Font pairing, weight contrast, hierarchy
│ ├── layout-composition.md ← 3-zone system, grids, whitespace
│ ├── color-application.md ← One-accent rule, opacity hierarchy, glow
│ ├── visual-hierarchy.md ← Focal points, squint test, reading flow
│ ├── css-for-designers.md ← Essential CSS patterns for design
│ ├── photo-integration.md ← Hybrid AI photo + code workflow
│ └── website-design.md ← Landing pages, responsive design
│
├── rules/ ← Quality gates
│ ├── export-rules.md ← Resolution & format standards
│ └── design-thinking.md ← Creative direction rules
│
├── scripts/ ← Ready-to-run export tools
│ ├── export-png.js ← HTML → high-res PNG
│ ├── export-pdf.js ← HTML → pixel-perfect PDF
│ ├── export-carousel.js ← HTML → multi-slide carousel PNGs
│ └── package.json ← npm install && go
│
├── templates/ ← Starter HTML files
│ ├── poster-1080.html ← Square post (1080x1080)
│ ├── poster-1350.html ← Portrait post (1080x1350)
│ ├── thumbnail-720.html ← YouTube thumbnail (1280x720)
│ ├── carousel-slide.html ← Multi-slide carousel
│ └── landing-page.html ← Full responsive landing page
│
└── examples/
└── example-brand-config.json ← Sample brand configuration
| Requirement | Purpose | Required? |
|---|---|---|
| Claude Code | Runs the design system | Yes |
| Node.js 18+ | Runs Puppeteer export scripts | Yes |
| npm | Installs puppeteer dependency | Yes |
| nano-banana MCP | AI image generation (Gemini) | Optional |
| Gemini API key | Powers photo generation | Optional (free tier available) |
That's it. No Figma, no Photoshop, no design skills required.
This isn't theory. This is what works.
- 300+ design experiments across LinkedIn, Instagram, and YouTube
- 190+ styles tested, scored, iterated, and validated
- Every workflow refined through actual production use
- Real engagement data informed which styles perform best
- Self-review system developed from actual quality failures and fixes
The system improves itself: every design session generates learnings that feed back into better rules, better styles, and better output.
Rahaman Bin Ujit — Senior Marketing Executive. I build AI systems that 10x your marketing team's output.
This design engine is one of them. Built through 300+ real experiments, not theory.
- LinkedIn: linkedin.com/in/rahamanbinujit
- YouTube: youtube.com/@RahamanBinUjit
- Twitter/X: x.com/rahamanbinujit
Copyright 2026 Rahaman Bin Ujit. All rights reserved.
You can: Use it in personal and commercial projects with attribution. You cannot: Redistribute it as a competing design system or template library.
See LICENSE for full terms.
- Star this repo if it helped you design something
- Issues: GitHub Issues
- Contribute: CONTRIBUTING.md
- LinkedIn: Rahaman Bin Ujit
- YouTube: @RahamanBinUjit
- Twitter/X: @rahamanbinujit
Claude Design Engine — Design anything. From your terminal.
Made with obsessive attention to detail by Rahaman Bin Ujit.