skills.rest
Pinvou
PinvouOFFICIAL
Explore all skills by this author →
GitHub

visual-design

Generates self-contained HTML visual materials like landing pages, banners, and posters using a fixed design system.

2.0k|291|Updated Jul 24, 2026
Search Tags:#html#landing page#poster#visual design#banner#self-contained#inline css
One-click install
npx skills add https://github.com/Pinvou/pinvou-agent --skill visual-design-pinvou
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design
Source: https://github.com/Pinvou/pinvou-agent/tree/main/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design
Command: npx skills add https://github.com/Pinvou/pinvou-agent --skill visual-design-pinvou

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It turns plain-language requests for visual materials—web pages, landing pages, banners, posters, resumes, portfolios—into polished, self-contained HTML files without relying on templates, external CDNs, or design tools. ## Core Features & Use Cases - Design-system-driven HTML generation: Writes complete single-file HTML with inline CSS following strict rules on typography, color palettes, spacing, and composition, so output quality stays consistent. - Fixed-size and responsive modes: Produces fixed-pixel banners and posters (e.g., 1000x320) without fragile scaling tricks, and responsive full pages using relative units and clamp(). - Self-contained output with artifact card: All styles and images are inlined (user images embedded as base64), then the result is presented via the mcp_pinvou3_present_artifact tool. - Use Case: Ask for a product launch landing page or an event banner, and receive a ready-to-open HTML file that renders identically offline, embedded, or in any browser. ## Quick Start Ask the agent to turn your content into a web page, landing page, banner, poster, resume, or portfolio, specifying any brand colors and dimensions you need.

Frequently Asked Questions about visual-design

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

FAQPage Schema
How do I create a landing page or banner from a text prompt?▼

Describe the material you want—web page, landing page, banner, poster, resume, or portfolio—along with brand colors and dimensions. The skill writes a complete self-contained HTML file with inline CSS and presents it as an artifact card.

Does the generated HTML use external CSS frameworks or CDN links?▼

No. All styles are written as inline CSS inside a single HTML file. External CDNs, Tailwind CDN, Google Fonts, and Chart.js are explicitly forbidden, so the file renders identically offline or embedded anywhere.

Can I include my own images in the generated design?▼

Yes. Attach a local image such as a logo or product photo, and it will be embedded as a base64 data URI inside the HTML. Images are optional; the design is generated first and revised once you provide them.

Should I use this for dashboards or reports with data charts?▼

No. Reports or dashboards containing data visualizations are handled by the visualizer skill instead. This skill covers static visual materials like banners, posters, landing pages, and chart-free report pages.

Why does my fixed-size banner look too large in a narrow preview?▼

Fixed-size materials like banners use exact pixel dimensions with no scaling logic, by design. In a narrow preview the banner may overflow or scroll horizontally, which is expected and acceptable behavior.

Related Skills

Explore More Design & Creative Skills→
openaiopenai
5.3k

ideate

Generate three image-based UI design directions from a product design brief using Image Gen.

Official
Advanced
webspoiltwebspoilt
10

cashclaw-landing-page

Generate persuasive landing page copy and responsive HTML from a client brief.

Community
Advanced
Aken-TeamsAken-Teams

Interactive Web Page Generator

Generate a self-contained HTML dashboard with inline charts and CDN libraries.

Official
Advanced
lips85lips85

pptx

Automate PowerPoint (.pptx) creation, editing, and analysis with Python scripts and libraries like PptxGenJS.

Community
Advanced