designer

Convert text or files into platform-optimized HTML/CSS prototypes and images.

Updated Apr 5, 2026
One-click install
npx skills add https://github.com/joleques/northstar-ai --skill designer-joleques
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: designer
Source: https://github.com/joleques/northstar-ai/tree/main/.codex/skills/designer
Command: npx skills add https://github.com/joleques/northstar-ai --skill designer-joleques

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Transforms user-provided text or article files into polished visual assets, eliminating manual layout work and inconsistent output formats when producing social media images, infographics, carousels or presentation slides. It enforces a content-first workflow so visuals stay faithful to the original message and are automatically organized into a predictable output directory.

Core Features & Use Cases

  • Content-driven generation: Requires a text input or file path and extracts key points to craft concise visual copy and hierarchy.
  • Platform-aware outputs: Produces designs adapted to Instagram, LinkedIn, TikTok and slide formats with recommended dimensions and safety margins.
  • HTML/CSS prototyping then export: Builds an HTML/CSS prototype first, then converts it to final images (single posts, carousels, slides or animations).
  • Reference-guided styling: Accepts up to five visual references to derive palette, typography and mood while prioritizing platform and content coherence.
  • Organized storage: Saves all generated HTML and final images under a defined output directory (default image/ or project workflow path).

Quick Start

Use the designer skill to create a LinkedIn infographic from the article file artigos/meu-artigo/content/artigo.md and save the resulting HTML and image files to the default image/ directory.

Frequently Asked Questions about designer

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

FAQPage Schema
How do I turn text into social media images without manual layout work?

To turn text into social media images, you provide the text content or file path to generate HTML/CSS prototypes. These prototypes are then automatically converted and exported as final images saved to a specified output directory.

Can I generate platform-optimized infographics for Instagram and LinkedIn from an article file?

Yes, you can generate platform-optimized infographics for Instagram and LinkedIn from article files. The tool reads your content, extracts key points, and applies recommended dimensions and safety margins for each specific platform.

How does reference-guided styling work for visual design generation?

Reference-guided visual design generation accepts up to five visual references to derive color palette, typography, and mood. It prioritizes platform constraints and content coherence while applying these derived styles to the HTML/CSS prototype.

Does the HTML and CSS prototype export process support carousel and slide formats?

Yes, the HTML and CSS prototype export process supports carousel and slide formats. It builds prototypes first, then converts them into final images including single posts, carousels, slides, or short vertical video concepts.

What is the best way to ensure visual designs stay faithful to original article content?

The best way to ensure visual designs stay faithful to original article content is using a content-first workflow. The system reads the input text, extracts key points to craft concise visual copy, and organizes all outputs into a predictable directory.

Do I need to specify an output directory for generated social media images?

You do not strictly need to specify a custom output directory for generated social media images. By default, the system saves all resulting HTML and image files under the default image/ directory or the active project workflow path.