メニュー
Create and manage HTML pages from design templates — web, app, and poster mediums
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/YaoApp/designer --skill page-managementコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
| 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)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