skills.rest
vanducng
vanducngCOMMUNITY
Explore all skills by this author →
Website𝕏@vanducngGitHub

opendesign

Generate static HTML/CSS artifacts from a design-system catalog.

5|Updated May 2, 2026
Search Tags:#design#branding#html#layout#prototype#design-systems#marketing-design
One-click install
npx skills add https://github.com/vanducng/skills --skill opendesign
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: opendesign
Source: https://github.com/vanducng/skills/tree/main/skills/opendesign
Command: npx skills add https://github.com/vanducng/skills --skill opendesign

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design teams and developers often need polished, ready-to-use HTML/CSS design artifacts generated from design-system catalogs without manually assembling templates, tokens, and layouts.

Core Features & Use Cases

  • Generate static HTML/CSS/SVG artifacts from a chosen seed template and design system.
  • Produce brand-aligned pages (landing pages, dashboards, emails, docs) with token-driven styling.
  • Auto-open the artifact for review after generation and customization.

Quick Start

Provide a design prompt and optional style to generate and open a ready-to-edit HTML artifact.

Frequently Asked Questions about opendesign

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

FAQPage Schema
How do I generate HTML from a design system?▼

To generate HTML from a design system, provide a design prompt and optional style to produce a self-contained HTML file. The system applies design tokens, typography, and components from its catalog to create brand-consistent outputs ready for preview.

What is the best way to create brand-aligned marketing pages?▼

The best way to create brand-aligned marketing pages is using token-driven styling from a design-system catalog. This approach automatically applies your selected design system to tokens and components, ensuring brand consistency across landing pages, dashboards, or docs.

Can I use this to generate static HTML artifacts for emails?▼

Yes, you can generate static HTML artifacts for emails, marketing pages, and docs. The system produces self-contained HTML/CSS/SVG files using a chosen seed template and design system, making it suitable for various brand-aligned outputs.

Do I need to manually assemble templates and tokens to output HTML?▼

No, you do not need to manually assemble templates, tokens, and layouts. The system reads tokens from the DESIGN.md file, syncs catalogs, and applies the selected design system automatically to output a ready-to-edit HTML file.

How does token-driven styling work for design prototypes?▼

Token-driven styling works by reading design tokens from the DESIGN.md file and applying them across typography and components. This ensures your design prototypes maintain strict brand consistency while generating polished static HTML/CSS artifacts.

Related Skills

Explore More Design & Creative Skills→
LutimiLutimi

ckm:design-system

Organize design tokens into primitive, semantic, and component layers.

Community
Advanced
Mathews-TomMathews-Tom
310

concept-to-image

Convert concept descriptions into self-contained HTML/CSS/SVG visuals and export as PNG or SVG files.

Community
Advanced
Codecaine-AICodecaine-AI
1

asset-recreation

Recreate 2D raster assets into editable SVG vector geometry.

Official
Intermediate
dmedina-devdmedina-dev
1

ckm:slides

Automates strategic slide deck creation with Chart.js templates and token-driven styling.

Community
Advanced