design

Generate social graphics, UI mockups, and AI illustrations via HTML and Replicate models.

10|1|Updated Jun 29, 2026

Search Tags:#design #branding #graphics #infographic #mockup #ai-art

Ready to run

npx skills add https://github.com/mishahanin/heading-os --skill design-mishahanin

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design
Source: https://github.com/mishahanin/heading-os/tree/main/.claude/skills/design
Command: npx skills add https://github.com/mishahanin/heading-os --skill design-mishahanin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python3, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This skill solves the fragmentation of design workflows by providing a unified, brand-compliant pipeline for creating social graphics, UI mockups, and AI-generated imagery without leaving the workspace.

Core Features & Use Cases

Automated Rendering: Uses HTML Studio for deterministic, brand-aligned layouts like social graphics and infographics.
AI Creative Pipeline: Integrates Replicate AI models for high-quality illustrations, photorealistic imagery, and vector logo generation.
Brand Consistency: Enforces the 31C design system, ensuring all outputs adhere to specific color palettes, typography, and dark-mode requirements.

Quick Start

Use the design skill to create a professional infographic about our latest market growth numbers.

Frequently Asked Questions about design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate brand-compliant social graphics and infographics automatically?▼

You can generate brand-compliant social graphics by using automated HTML rendering pipelines that enforce strict color palettes, typography, and dark-mode styling for consistent visual asset creation.

Can I use AI to create photorealistic mockups and illustrations for branding?▼

Yes, you can create AI-driven illustrations and photorealistic mockups by routing visual generation tasks to specialized Replicate AI models, which produce high-quality imagery while enforcing brand consistency and sensitivity checks.

Does this design pipeline enforce dark-mode styling and brand guidelines for visual assets?▼

Yes, the pipeline enforces strict brand guidelines and dark-mode styling across all visual assets, ensuring social graphics, UI mockups, and AI-driven illustrations adhere to specific color palettes and typography requirements.

Do I need Python to run automated rendering and AI illustration pipelines?▼

Yes, Python 3 is required to run the multi-pipeline architecture that handles deterministic HTML rendering and integrates specialized Replicate AI models for visual asset generation.

What is the best way to create UI mockups without leaving my workspace?▼

Use a unified design pipeline that routes UI mockup generation to deterministic HTML rendering or specialized AI models, enforcing brand consistency and dark-mode styling without requiring separate design software.

Why does automated graphic generation use both HTML rendering and AI models?▼

Automated generation uses a multi-pipeline architecture because deterministic HTML rendering ensures exact brand-aligned layouts for infographics, while Replicate AI models handle complex illustrations and photorealistic imagery.