skills.rest
mofa-org
mofa-orgOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mofa-web

Generate website visuals from prompts using styles/web.toml configurations.

11|12|Updated Feb 28, 2026
Search Tags:#design prompts#ai-generated#photorealistic#website visuals#hero banner#section background#web asset generation
One-click install
npx skills add https://github.com/mofa-org/mofa-skills --skill mofa-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mofa-web
Source: https://github.com/mofa-org/mofa-skills/tree/main/_unpublished/mofa-web
Command: npx skills add https://github.com/mofa-org/mofa-skills --skill mofa-web

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams quickly generate website visuals (hero banners, section backgrounds, and feature illustrations) without manual graphic design, speeding up web production.

Core Features & Use Cases

  • Generate clean, web-optimized visuals: hero banners, section backgrounds, and feature illustrations.
  • Enforce design guidelines: assets are text-free and ready for overlay content.
  • Use Case: rapidly populate landing pages or marketing sites with cohesive visuals that match brand prompts.

Quick Start

Generate a wide-format hero banner background image for a modern website using the prompts in styles/web.toml.

Frequently Asked Questions about mofa-web

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

FAQPage Schema
How do I generate web-optimized hero banners and section backgrounds for a landing page?▼

You can generate website visuals like hero banners and section backgrounds by providing concise design prompts and styling configurations. The skill enforces text-free backgrounds and web-optimized output.

What aspect ratios are supported for AI-generated website visuals?▼

Supported aspect ratios for AI-generated website visuals are 16:9, 4:3, and 1:1. These formats accommodate standard web layouts for hero banners, section backgrounds, and feature illustrations.

Can I use AI-generated feature illustrations directly under text overlays?▼

Yes, generated feature illustrations are text-free and ready for overlay content. This ensures the AI-generated website visuals maintain clean design guidelines for marketing sites and blog assets.

How do I configure styling for AI-generated web assets?▼

Styling is configured by reading parameters from a styles/web.toml file. This file defines the concise prompts and design guidelines used to generate cohesive website visuals for your workflow.

What is the best way to rapidly populate a marketing site with cohesive visuals?▼

The best way to populate a marketing site is by using concise brand prompts to generate matching web assets. This speeds up web production by bypassing manual graphic design for hero banners and backgrounds.

Related Skills

Explore More Design & Creative Skills→
92Bilal2692Bilal26

visual-asset-workflow

Generate structured creative briefs for educational visual assets.

Community
Advanced
BenAIOSBenAIOS

website-launch-kit

Clone inspiration sites into landing pages and generate images with Gemini Imagen API.

Official
Advanced
mahirocokomahirocoko

imagegen-frontend-web

Generate art-directed frontend image references for hero sections and landing pages.

Community
Advanced
felipesantiago-coderfelipesantiago-coder

image-generation

Generate images from text prompts via SDK or CLI with multiple output sizes.

Community
Intermediate