菜单
Generate HTML/CSS mockups for UI design. Produces browser-previewable mockup files with placeholder data. Use when the user says ui-mockup, mockup, design UI, wireframe, or needs visual reference for a feature.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | ui-mockup |
| description | Generate HTML/CSS mockups for UI design. Produces browser-previewable mockup files with placeholder data. Use when the user says ui-mockup, mockup, design UI, wireframe, or needs visual reference for a feature. |
Generate static HTML mockups as visual reference for Builder implementation.
.scratch/<feature>/mockups/
├── index.html # Entry page linking to all mockups
├── <page-name>.html # One HTML per page/state
└── design-notes.md # Design decisions and interactions
<style> or CDN frameworks (Tailwind CDN preferred)[placeholder]Show key states as separate files or CSS classes:
design-notes.md:hover, :active, :focus allowed for visual states<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Page Name] — Mockup</title>
<style>
:root {
--color-primary: #1a73e8;
--color-error: #d93025;
--color-success: #188038;
--spacing-unit: 8px;
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-family); padding: calc(var(--spacing-unit) * 3); }
/* page-specific styles */
</style>
</head>
<body>
<!-- mockup content -->
</body>
</html>
Entry page with links to all mockup files:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Mockups — [Feature Name]</title>
<style>
body { font-family: sans-serif; padding: 32px; max-width: 600px; }
h1 { margin-bottom: 16px; }
ul { list-style: none; }
li { margin: 8px 0; }
a { color: #1a73e8; text-decoration: none; }
a:hover { text-decoration: underline; }
</style>
</head>
<body>
<h1>[Feature Name] Mockups</h1>
<ul>
<li><a href="page-name.html">Page Name</a> — description</li>
</ul>
</body>
</html>
Write design-notes.md with:
.scratch/<feature>/NOTES.md and tech-spec.md for contextindex.html firstdesign-notes.mdIf the target project has a design system:
Delivery overlay — orchestrates lean ladder, tdd, prune, review with sub-phase gates; commits only on user approval.
Flow Conductor for the aiops bundle. One entry — infers task type, shows plain-language steps, tracks journey in flow.state.yaml, dispatches skill + agent per phase.
Structured design process for the architect agent. Guides from grill conclusions to complete NOTES.md + tech-spec.md plus needed domain documentation updates through constraint gathering, module identification, interface design, alternative exploration, and risk analysis. Use when the architect needs to produce design decisions and technical specifications.
Build and query a persistent code graph for the target project. Uses graphify (Tree-sitter + Louvain clustering) for deterministic structural extraction, then the model adds semantic annotations. Use when the user says build graph, code graph, dependency graph, impact analysis, or when other skills need structured code understanding before proceeding.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick. Use when the user says architecture review, codebase health, deepening, refactor suggestions, or complains about architectural friction.
Review in three modes — code (diff vs standards/spec), design (NOTES + tech-spec before planning), drift (implementation vs tech-spec before ship). Pick mode from Flow Conductor phase or user intent; do not mix artifact types.