skills.rest
silaratur
silaraturCOMMUNITY
Explore all skills by this author →
GitHub

template-designer

Generate and render HTML/CSS design templates with WCAG contrast compliance.

Updated Mar 31, 2026
Search Tags:#automation#design#branding#templates#html#css
One-click install
npx skills add https://github.com/silaratur/VMO_GAB --skill template-designer-silaratur
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: template-designer
Source: https://github.com/silaratur/VMO_GAB/tree/main/skills/template-designer
Command: npx skills add https://github.com/silaratur/VMO_GAB --skill template-designer-silaratur

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This skill solves the challenge of maintaining consistent, high-quality visual branding across AI-generated content by automating the creation, rendering, and refinement of design templates.

Core Features & Use Cases

  • Visual Template Generation: Automatically generates adapted HTML/CSS templates based on brand guidelines and squad context.
  • Automated Rendering: Converts HTML templates into high-resolution PNG previews for immediate user review.
  • Identity Enforcement: Extracts and saves structured visual identity rules to ensure all future agent outputs remain on-brand.

Quick Start

Use the template designer to generate three visual template variations for my new marketing squad based on the current brand guidelines.

Frequently Asked Questions about template-designer

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

FAQPage Schema
How do I maintain consistent visual branding across AI-generated content?▼

To maintain consistent visual branding, this Skill automates the creation of HTML/CSS templates and extracts structured style rules to ensure all future agent outputs remain on-brand.

What is the best way to generate visual design templates for AI agents?▼

The best way to generate visual design templates is adapting HTML/CSS based on brand guidelines and automatically rendering high-resolution PNG previews for immediate review.

Can I enforce WCAG contrast compliance for my automated design templates?▼

Yes, you can enforce WCAG contrast compliance. The template generation process automatically satisfies requirements for fixed-dimension rendering and accessibility contrast standards.

How do I extract and save structured visual identity rules for my squad?▼

You extract structured visual identity rules during the template generation workflow, saving these constraints to ensure future image-producing agents strictly adhere to your branding.

Does this template generation tool support high-resolution PNG previews?▼

Yes, the template generation tool supports PNG previews. It features automated rendering that converts your HTML templates into high-resolution PNG images for immediate user review.

Related Skills

Explore More Design & Creative Skills→
bruno0henriquebruno0henrique

template-designer

Generate and refine HTML/CSS visual templates for AI design agents.

Community
Advanced
NicolasPadovamNicolasPadovam

template-designer

Generate and refine HTML templates for AI image-producing agents.

Community
Advanced
mikkermikker
102

beautiful-mermaid

Render Mermaid diagrams into SVG and PNG with theming options.

Community
Intermediate
webdevtodayjasonwebdevtodayjason

popular-web-designs

Apply popular design system templates to HTML/CSS webpages.

Community
Intermediate