Menu
Create and manage HTML pages from design templates — web, app, and poster mediums
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Preview server — download, start, stop, and control the design preview with live reload at port 3000
Color palette management — generate standard YAML palettes from built-in library, external search, URL extraction, or traditional Chinese colors
Manage design-spec.css — match resource library, handle medium differentiation (web/app/poster), auto-learn from completed projects
Font management — list, install, remove, and recommend fonts from 11 seed typefaces + Google Fonts
Manage global design conventions — .conventions.yml for fonts, viewport, CSS rules, HTML rules, images, and typography defaults
Create and manage design project structure — project.yml, directory layout, and medium separation (web/app/poster)
| name | page-management |
| trigger | When creating, modifying, or listing HTML pages in a design project |
| description | Create and manage HTML pages from design templates — web, app, and poster mediums |
Create HTML pages from templates pulled from the GitHub asset registry.
Pages go under $WORKDIR/design-works/{project-name}/pages/.
Download the template index to discover available templates:
cat $WORKDIR/design-works/.cache/assets/INDEX.md
| Template | File | Use Case |
|---|---|---|
| blank | templates/web/blank.html | Empty page with container + header |
| hero | templates/web/hero.html | Hero banner + content sections |
| grid | templates/web/grid.html | Grid container + card placeholders |
| form | templates/web/form.html | Centered form card |
| list | templates/web/list.html | Header + table/filter area |
| detail | templates/web/detail.html | Breadcrumb + info sections |
| Template | File | Use Case |
|---|---|---|
| blank | templates/app/blank.html | Mobile blank page (375px, 44px touch-target) |
| grid | templates/app/grid.html | Mobile card grid |
| form | templates/app/form.html | Mobile form page |
| list | templates/app/list.html | Mobile list page |
| detail | templates/app/detail.html | Mobile detail page |
| Template | File | Use Case |
|---|---|---|
| blank | templates/poster/blank.html | Poster blank (800px, vw units) |
| hero | templates/poster/hero.html | Poster hero section |
| grid | templates/poster/grid.html | Poster grid layout |
MEDIUM="web"
TEMPLATE="hero"
CACHE="$WORKDIR/design-works/.cache/assets/templates/$MEDIUM/$TEMPLATE.html"
if [ ! -f "$CACHE" ]; then
echo "Downloading $MEDIUM/$TEMPLATE template..."
mkdir -p $(dirname "$CACHE")
curl -s https://raw.githubusercontent.com/YaoApp/design-assets/main/templates/$MEDIUM/$TEMPLATE.html \
-o "$CACHE"
fi
PROJECT="my-saas-dashboard"
cp $CACHE $WORKDIR/design-works/$PROJECT/pages/index.html
After copying, customize the page:
<link rel="stylesheet" href="../design-spec.css"> in <head><title> to match the page purposevar(--color-primary), var(--font-body), etc.ls -la $WORKDIR/design-works/{project-name}/pages/
rm $WORKDIR/design-works/{project-name}/pages/{name}.html
--page-width: 1440px (from design-spec.css)--header-height: 56pxpx units for spacing and sizing--page-width: 375px--header-height: 44px--touch-target: 44px<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">--page-width: 800pxvw units for scalingprint-color-adjust: exact in CSSdesign-spec.css for design tokens/api/fonts.css for fonts (served by preview-server)