skills.rest
shengmingzhishu
shengmingzhishuCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/shengmingzhishu/LeeCommonVideoCut --skill model-design-shengmingzhishu
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
abdu6666abdu6666
17

script-generation

Generates 60-second video scripts from URLs, keywords, themes, or ideas.

Community
Intermediate
KhoiwallKhoiwall

mockup-to-code

Convert UI mockups into React, Vue, or plain HTML code.

Community
Advanced
musher-devmusher-dev

writing-visual-identity

Define color tokens, typography systems, and spatial rules for marketing pages.

Official
Advanced
spqwspqw

observable-framework-jsx

Integrate React and JSX into Observable Framework projects.

Community
Intermediate