メニュー
Generate multi-fidelity HTML mock from ALPS profile. Creates semantic HTML pages, three CSS fidelity levels, mock API responses, and i18n labels — all from a single ALPS profile.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Release npm packages and create git tags. Handles @alps-asd/app-state-diagram, @alps-asd/mcp, and Homebrew formula updates.
Create, validate, and improve ALPS profiles. Generate from natural language descriptions, validate existing profiles, and get improvement suggestions.
Generate OpenAPI specification from ALPS profile. Converts ALPS semantic descriptors to RESTful API definitions with automatic validation.
| name | alps2mock |
| description | Generate multi-fidelity HTML mock from ALPS profile. Creates semantic HTML pages, three CSS fidelity levels, mock API responses, and i18n labels — all from a single ALPS profile. |
Generate a complete HTML mock site from an ALPS profile. Every CSS class in the generated HTML is an ALPS descriptor ID — zero presentation classes. This enables CSS-only fidelity switching between bare HTML, wireframe, and production quality.
From a single ALPS profile, generate the following directory structure:
{output-dir}/
├── profile/
│ └── alps.xml # Copy of source ALPS profile
├── html/
│ ├── index.html # Home state
│ ├── catalog.html # One HTML per ALPS state
│ └── ...
├── css/
│ ├── level1.css # Bare readability
│ ├── level2.css # Wireframe (information skeleton)
│ └── level3.css # Production quality
├── api/
│ ├── home.json # HAL/HAL-FORMS mock response per state
│ └── ...
├── i18n/
│ └── labels.json # ALPS descriptor ID → human label mapping
└── mock-switch # Shell script to switch CSS fidelity
Every class attribute in the generated HTML MUST be an ALPS descriptor ID. No presentation classes (bg-white, rounded-lg, flex, text-sm, etc.) are allowed in HTML.
Three layers of ALPS become CSS classes:
| Layer | Example classes | Source |
|---|---|---|
| Ontology | .title, .author, .price | Semantic descriptors |
| Taxonomy | .Book, .Catalog, .ShoppingCart | State descriptors |
| Choreography | .goToBookDetails, .doAddToCart | Transition descriptors |
<link rel="profile" href="../profile/alps.xml"> in every <head><link rel="stylesheet" href="../css/level2.css"> as default stylesheet<article> for entities, <form> for unsafe/idempotent transitions, <a> for safe transitions, <nav> for navigation groups. Forms use method="get" for static hosting browsability — the transition semantics (safe/unsafe/idempotent) are carried by the ALPS class name, not the HTTP method.title attribute maps to HTML title attribute on links and buttonsdoc value is NOT rendered in HTML — it's for developers, not end usersGiven this ALPS taxonomy:
<descriptor id="Book" title="Book">
<descriptor href="#id"/>
<descriptor href="#title"/>
<descriptor href="#author"/>
<descriptor href="#isbn"/>
<descriptor href="#price"/>
<descriptor href="#doAddToCart"/>
<descriptor href="#goToCatalog"/>
</descriptor>
Generate (partial example — only showing the Book state; other states like ShoppingCart and their descriptors like goToCart, category, quantity are defined elsewhere in the full profile):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book - ALPS Book Store</title>
<link rel="profile" href="../profile/alps.xml">
<link rel="stylesheet" href="../css/level2.css">
</head>
<body>
<header>
<div>
<a href="index.html">ALPS Book Store</a>
<nav>
<a href="catalog.html" class="goToCatalog" title="Go to Catalog">Catalog</a>
<a href="shoppingcart.html" class="goToCart" title="Go to Cart">Cart</a>
</nav>
</div>
</header>
<main>
<article class="Book">
<span class="id" hidden>BK-001</span>
<h1 class="title">The Art of Programming</h1>
<p class="author">Jane Smith</p>
<dl>
<div><dt>ISBN</dt><dd class="isbn">978-4-1234-5678-9</dd></div>
<div><dt>Category</dt><dd class="category">Programming</dd></div>
</dl>
<p class="price">¥2,480</p>
<form method="get" action="shoppingcart.html" class="doAddToCart">
<input type="hidden" name="id" value="BK-001" class="id">
<label for="quantity">Qty</label>
<input type="number" id="quantity" name="quantity" min="1" value="1" class="quantity">
<button type="submit" title="Add to Cart">Add to Cart</button>
</form>
</article>
</main>
<footer>
<div>Mock generated from ALPS profile: ALPS Book Store</div>
</footer>
</body>
</html>
Key points:
class="Book", class="title", class="doAddToCart" — all ALPS descriptor IDs<form> for doAddToCart (unsafe transition) with nested descriptors as form fields<a> for goToCatalog (safe transition)Minimal styling for raw HTML readability. No layout, no branding. Think GitHub Pages rendering.
body {
max-width: 64rem;
margin: 0 auto;
padding: 2rem;
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.6;
}
a { color: #0366d6; }
The wireframe level is the most important. It makes the ALPS vocabulary visible:
[class] {
position: relative;
}
/* ALPS ID tooltip on hover */
[class]:hover::after {
content: "." attr(class);
position: absolute;
top: -1.25rem;
left: 0;
font-size: 0.5625rem;
font-family: 'SF Mono', Menlo, Consolas, monospace !important;
color: #fff;
background: #555;
padding: 0.125rem 0.375rem;
border-radius: 2px;
white-space: nowrap;
pointer-events: none;
}
/* Block structure: dashed borders */
section, article, aside {
border: 1px dashed #ddd;
padding: 1rem;
}
/* X-box image placeholder */
img {
background: #eee;
background-image:
linear-gradient(to top right, transparent calc(50% - 1px), #ccc, transparent calc(50% + 1px)),
linear-gradient(to top left, transparent calc(50% - 1px), #ccc, transparent calc(50% + 1px));
min-height: 120px;
object-position: -9999px;
}
Key features:
.Book, .title, .goToBookDetails)section, article, aside — these are the semantic blocks of the page. The dashes make the information structure visible: which elements are grouped together, how they nest, where one block ends and the next begins. This is the skeleton that disappears in production but must be right before design begins..Catalog > div, section > div) not presentation classes (.book-grid)Full design system with design tokens, custom typography, color palette, transitions, and responsive layout. CSS targets ALPS semantic classes:
.Book .title {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
}
.doAddToCart {
display: flex;
align-items: center;
gap: 1.5rem;
}
Key requirements:
:root (colors, fonts, spacing)@media (max-width: 768px)).btn-primary, .card, .grid etc.Generate one JSON file per ALPS state. Use HAL _links for navigation affordances and HAL-FORMS _templates for action affordances:
{
"id": "BK-001",
"title": "The Art of Programming",
"author": "Jane Smith",
"isbn": "978-4-1234-5678-9",
"price": 2480,
"category": "Programming",
"_links": {
"self": {"href": "/api/book/BK-001"},
"goToCatalog": {"href": "/api/catalog", "title": "Go to Catalog"}
},
"_templates": {
"doAddToCart": {
"method": "POST",
"target": "/api/shoppingcart",
"title": "Add to Cart",
"contentType": "application/json",
"properties": [
{"name": "id", "value": "BK-001", "type": "hidden", "required": true},
{"name": "quantity", "value": 1, "type": "number", "prompt": "Qty", "required": true, "min": 1}
]
}
}
}
Rules:
_links keys match ALPS safe transition descriptor IDs (go*) and describe where the client can navigate._templates keys match ALPS unsafe and idempotent transition descriptor IDs (do*) and describe how the client can act."method" in _links — HTTP method assignment belongs to HAL-FORMS templates and the OpenAPI level, not HAL links (RFC 8288)._templates entry, set method from ALPS transition type: unsafe → POST, idempotent → PUT or DELETE as appropriate.properties entries. Include realistic sample value, prompt, type, and validation hints such as required or min when known.Generate labels.json mapping ALPS descriptor IDs to human-readable labels:
{
"id": "ID",
"title": "Title",
"author": "Author",
"price": "Price",
"Book": "Book",
"Catalog": "Book Catalog",
"goToCatalog": "Go to Catalog",
"doAddToCart": "Add to Cart"
}
Source: Use ALPS title attribute. If no title, use the descriptor id as-is.
Generate a shell script that switches CSS fidelity across all HTML files:
#!/bin/bash
# mock-switch — Switch mock fidelity level
# Usage: ./mock-switch <1|2|3> [mock-dir]
level=$1
dir=${2:-.}
if [[ ! "$level" =~ ^[123]$ ]]; then
echo "Usage: ./mock-switch <1|2|3> [mock-dir]"
exit 1
fi
count=0
for f in "$dir"/html/*.html; do
[ -f "$f" ] || continue
tmp=$(mktemp)
sed "s|level[0-9]\.css|level${level}.css|g" "$f" > "$tmp" && mv "$tmp" "$f"
count=$((count + 1))
done
echo "Switched ${count} files to level${level}.css"