model-design

Generates and iterates single-file HTML prototypes using a structured design system workflow.

Updated Jul 31, 2026

Search Tags:#html #landing page #design system #css #prototype #ui design #responsive

Ready to run

npx skills add https://github.com/shengmingzhishu/LeeCommonVideoCut --skill model-design-shengmingzhishu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: model-design
Source: https://github.com/shengmingzhishu/LeeCommonVideoCut/tree/main/.rules-skills/react-stack/.trae/skills/model-design
Command: npx skills add https://github.com/shengmingzhishu/LeeCommonVideoCut --skill model-design-shengmingzhishu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It turns vague page design requests into consistent, professional HTML prototypes by enforcing a design-system-first workflow, eliminating inconsistent colors, fonts, and layouts across generated pages. ## Core Features & Use Cases - Design System Generation: Extracts color palettes, font pairings, spacing scales, and effects from the ui-ux-pro-max skill and converts them into CSS variables before writing any HTML. - Single-File HTML Output: Produces self-contained HTML files with inline CSS and JS, inline SVG icons, responsive breakpoints, and dark mode support that open directly in a browser. - Anti-Pattern Enforcement: Blocks common AI design tells such as emoji icons, purple gradients, equal-width card columns, and Unsplash image links. - Use Case: A product manager needs a landing page mockup before a design review; the skill analyzes requirements, builds a design system, and delivers an iterable HTML prototype. ## Quick Start Design a minimalist SaaS landing page prototype with a hero section, pricing table, and footer as a single HTML file.

Frequently Asked Questions about model-design

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

FAQPage Schema

How do I generate an HTML page prototype from a text description?▼

Describe the product type, style keywords, industry, and required modules, and the skill extracts a design system (colors, fonts, spacing) before generating a single self-contained HTML file with inline CSS and JS that opens directly in a browser.

What design styles are available for HTML prototypes?▼

Seven preset styles are supported: Minimal/Professional, Dark Mode, Glassmorphism, Bento Grid, Editorial/Magazine, Playful/Vibrant, and Elegant/Luxury. Each style maps to specific color, typography, and spacing rules from the ui-ux-pro-max design system.

Can I use this for React component development?▼

No, this skill only produces pure HTML prototypes and is not suited for React components, stateful interactive pages, or multi-page routed apps. For React development, use the frontend-design skill instead.

How do I modify an existing HTML prototype?▼

Provide a change instruction such as moving the search bar or switching to a blue palette. The skill reads the existing HTML, understands its current design system, applies the edit in place, and re-runs the anti-pattern checks.

Why does the skill forbid emoji icons and Unsplash images?▼

Emoji icons render inconsistently across platforms, so inline SVG from Heroicons or Lucide is required instead. Unsplash links can break over time, so picsum.photos seeded URLs are used for placeholder images.