design

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

10|1|Updated Jun 29, 2026
One-click install
npx skills add https://github.com/mishahanin/heading-os --skill design-mishahanin
Or copy as Structured Prompt for Agent
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.