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:

Read onboarding/setup.md
Ask the user every question listed
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

Think like an art director, not a coder
Whitespace is design — when in doubt, add more space
One accent color per design, on ONE element
Research before creating — never design from imagination
Self-review is non-negotiable — score 4+ or fix it
The grid is sacred — 8px base units
Typography hierarchy — 4:1 headline-to-body ratio minimum
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

design-engine