메뉴
Create and manage HTML pages from design templates — web, app, and poster mediums
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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)