design-engine

name	design-engine
description	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 improve the look of any HTML/CSS.
author	Rahaman Bin Ujit
version	1.0.0
license	Custom (see LICENSE)
tags	["design","social-media","poster","carousel","thumbnail","pdf","website","landing-page","typography","branding","ai-image-generation","html-css","puppeteer"]
compatible_agents	["claude-code","cursor","codex","gemini-cli","windsurf","copilot"]

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

Step 6: Build in HTML/CSS

• Use the style's CSS as foundation
• Apply brand config values
• Follow workflows/poster-design.md, workflows/carousel-design.md, or workflows/website-design.md

Step 7: Self-Review (MANDATORY)

• Read workflows/self-review.md
• Score must be 4+ before showing
• Check: readability, hierarchy, alignment, color, spacing, brand consistency

Step 8: Export

• node scripts/export-png.js for images
• node scripts/export-pdf.js for documents
• node scripts/export-carousel.js for multi-slide
• Always 4x resolution, always wait 2500ms for fonts

Step 9: Open and Show

• Always open the exported file immediately

Core Principles

1. Think like an art director, not a coder
2. Whitespace is design — when in doubt, add more space
3. One accent color per design, on ONE element
4. Research before creating — never design from imagination
5. Self-review is non-negotiable — score 4+ or fix it
6. The grid is sacred — 8px base units
7. Typography hierarchy — 4:1 headline-to-body ratio minimum
8. Mobile-first — everything is viewed on phones

Directory Reference

Path	Purpose
workflows/	Step-by-step processes for each design type
styles/INDEX.md	Browse 190+ layout styles
skills/	Teachable design techniques
knowledge/	Design theory and platform insights
rules/	Quality gates and export standards
scripts/	Puppeteer export tools
templates/	Starter HTML files
onboarding/setup.md	Brand setup questions

Quick Export Reference

node scripts/export-png.js design.html output.png 1080 1080     # Square poster
node scripts/export-png.js design.html output.png 1080 1350     # Portrait
node scripts/export-png.js design.html output.png 1280 720      # YouTube thumbnail
node scripts/export-pdf.js document.html output.pdf              # PDF
node scripts/export-carousel.js carousel.html slides/ 1080 1080 # Carousel