ui-template-library

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

ui-template-library Skill

Purpose: Capture and apply aesthetic "vibes" across plugins using structured prose descriptions rather than rigid specifications.

用途： 通过结构化的文字描述而非严格的规范，在各个插件之间捕捉并应用美学「风格」。

Operations

操作说明

You MUST determine which operation the user is requesting, then execute ONLY that operation.

Operation Routing (match user request to keywords):

save/capture/extract → save_aesthetic (Operation 1)
apply/use/generate → apply_aesthetic (Operation 2)
list/show/browse → list_aesthetics (Operation 3)
delete/remove → delete_aesthetic (Operation 4)
update/modify/refine → update_aesthetic (Operation 5)

save_aesthetic - Analyze mockup HTML and generate structured prose aesthetic.md
apply_aesthetic - Interpret aesthetic.md to generate new mockup with appropriate layout
list_aesthetics - Show all saved aesthetics with prose summaries
delete_aesthetic - Remove aesthetic from library
update_aesthetic - Refine aesthetic.md from improved mockup

你必须确定用户请求的操作，然后仅执行该操作。

操作路由（根据关键词匹配用户请求）：

save/capture/extract → save_aesthetic（操作1）
apply/use/generate → apply_aesthetic（操作2）
list/show/browse → list_aesthetics（操作3）
delete/remove → delete_aesthetic（操作4）
update/modify/refine → update_aesthetic（操作5）

save_aesthetic - 分析原型HTML并生成结构化文字描述的aesthetic.md文件
apply_aesthetic - 解析aesthetic.md文件，生成带有合适布局的新原型
list_aesthetics - 展示所有已保存的美学风格及其文字摘要
delete_aesthetic - 从库中移除指定美学风格
update_aesthetic - 根据优化后的原型完善aesthetic.md文件

CRITICAL: Checkpoint Verification Protocol

关键：检查点验证协议

Directory Structure

目录结构

text

.claude/aesthetics/
├── manifest.json                    # Registry of all aesthetics
└── [aesthetic-id]/
    ├── aesthetic.md                 # Structured prose description (THE SOURCE OF TRUTH)
    ├── preview.html                 # Visual reference (original mockup)
    └── metadata.json                # Name, description, source plugin, tags

Key change from previous system:

aesthetic.yaml → aesthetic.md: YAML specs replaced with structured prose descriptions
Format is consistent and parseable, but content is interpretable concepts, not rigid values

<operation name="save_aesthetic"> <purpose>Capture visual design from mockup as structured prose aesthetic.md</purpose>

<critical_sequence> <step id="-1" required="true"> Initialize .claude/aesthetics/ directory if missing (mkdir -p) </step> <step id="0" required="true" depends_on="-1"> Validate mockup file exists and is readable </step> <step id="1" required="true" depends_on="0"> Read mockup HTML file into memory (Read tool) </step> <step id="2" required="true" depends_on="1"> Extract visual patterns using pattern-extraction.md strategies </step> <step id="3" required="true" depends_on="2"> Generate prose descriptions using prose-generation.md guidelines </step> <step id="4" required="true" depends_on="3"> Write aesthetic.md following aesthetic-template.md structure exactly: same section headers in same order, fill all sections with prose (no placeholders) (load template from assets/aesthetic-template.md, if missing: report critical error) </step> <step id="5" required="true" depends_on="4"> Copy preview.html to aesthetic directory </step> <step id="6" required="true" depends_on="5"> Generate metadata.json with inferred tags </step> <step id="7" required="true" depends_on="6"> Update manifest.json using Read → modify → Write pattern (if missing: initialize from assets/manifest-init.json) </step> <step id="7.5" required="true" depends_on="7"> Commit aesthetic to git using conventional format </step> <step id="8" required="true" depends_on="7.5"> Present confirmation + decision menu </step> </critical_sequence>

<state_requirement> See "CRITICAL: Checkpoint Verification Protocol" section for complete verification requirements. </state_requirement> </operation>

text

.claude/aesthetics/
├── manifest.json                    # 所有美学风格的注册表
└── [aesthetic-id]/
    ├── aesthetic.md                 # 结构化文字描述（权威来源）
    ├── preview.html                 # 视觉参考（原始原型）
    └── metadata.json                # 名称、描述、来源插件、标签

与旧系统的关键区别：

aesthetic.yaml → aesthetic.md：用结构化文字描述替代YAML规范
格式一致且可解析，但内容是可理解的概念而非固定数值

<operation name="save_aesthetic"> <purpose>将原型中的视觉设计捕捉为结构化文字描述的aesthetic.md文件</purpose>

<critical_sequence> <step id="-1" required="true"> 如果.claude/aesthetics/目录不存在则初始化（mkdir -p） </step> <step id="0" required="true" depends_on="-1"> 验证原型文件存在且可读 </step> <step id="1" required="true" depends_on="0"> 将原型HTML文件读取到内存（使用Read工具） </step> <step id="2" required="true" depends_on="1"> 使用pattern-extraction.md中的策略提取视觉模式 </step> <step id="3" required="true" depends_on="2"> 遵循prose-generation.md指南生成文字描述 </step> <step id="4" required="true" depends_on="3"> 严格按照aesthetic-template.md的结构编写aesthetic.md：保持相同的章节标题顺序，所有章节填充文字描述（无占位符）（从assets/aesthetic-template.md加载模板，若缺失则报告严重错误） </step> <step id="5" required="true" depends_on="4"> 将preview.html复制到美学风格目录 </step> <step id="6" required="true" depends_on="5"> 生成带有推断标签的metadata.json </step> <step id="7" required="true" depends_on="6"> 使用「读取→修改→写入」模式更新manifest.json（若缺失则从assets/manifest-init.json初始化） </step> <step id="7.5" required="true" depends_on="7"> 使用约定格式将美学风格提交到git </step> <step id="8" required="true" depends_on="7.5"> 展示确认信息和决策菜单 </step> </critical_sequence>

<state_requirement> 完整的验证要求请查看「关键：检查点验证协议」章节。 </state_requirement> </operation>

Operation 1: save_aesthetic

操作1：save_aesthetic

See: references/save-operation.md for complete 8-step workflow.

<operation name="apply_aesthetic"> <purpose>Generate new mockup by interpreting aesthetic prose and adapting to target plugin</purpose>

<critical_sequence> <step id="1" required="true"> Load aesthetic.md and metadata.json (Read tool) </step> <step id="2" required="true"> Read target plugin parameter-spec.md or creative-brief.md </step> <step id="3" required="true" depends_on="1,2"> Interpret aesthetic prose using aesthetic-interpretation.md strategies </step> <step id="4" required="true" depends_on="3"> Choose layout based on parameter count (layout-generation.md) </step> <step id="5" required="true" depends_on="3,4"> Generate HTML/CSS applying aesthetic to chosen layout </step> <step id="6" required="true" depends_on="5"> Save generated mockup to target plugin mockups directory </step> <step id="7" required="true" depends_on="6"> Update aesthetic metadata.json usedInPlugins array </step> <step id="8" required="true" depends_on="7"> Present decision menu as inline numbered list, NOT AskUserQuestion tool (rationale: consistent with system-wide Checkpoint Protocol - see CLAUDE.md) </step> </critical_sequence>

<decision_gate wait_required="true"> Present decision menu with preview/continue options MUST wait for user response </decision_gate> </operation>

详情： 完整的8步工作流请查看references/save-operation.md

<operation name="apply_aesthetic"> <purpose>通过解析美学风格文字描述，为目标插件生成新原型</purpose>

<critical_sequence> <step id="1" required="true"> 加载aesthetic.md和metadata.json（使用Read工具） </step> <step id="2" required="true"> 读取目标插件的parameter-spec.md或creative-brief.md </step> <step id="3" required="true" depends_on="1,2"> 使用aesthetic-interpretation.md策略解析美学风格文字描述 </step> <step id="4" required="true" depends_on="3"> 根据参数数量选择布局（参考layout-generation.md） </step> <step id="5" required="true" depends_on="3,4"> 生成应用该美学风格的HTML/CSS代码 </step> <step id="6" required="true" depends_on="5"> 将生成的原型保存到目标插件的mockups目录 </step> <step id="7" required="true" depends_on="6"> 更新美学风格metadata.json中的usedInPlugins数组 </step> <step id="8" required="true" depends_on="7"> 以内联编号列表形式展示决策菜单，禁止使用AskUserQuestion工具（理由：符合全系统检查点协议——查看CLAUDE.md） </step> </critical_sequence>

<decision_gate wait_required="true"> 展示包含预览/继续选项的决策菜单必须等待用户响应 </decision_gate> </operation>

Operation 2: apply_aesthetic

操作2：apply_aesthetic

See: references/apply-operation.md for complete 8-step workflow.

<operation name="list_aesthetics"> <critical_sequence> <step id="1" required="true">Read manifest.json</step> <step id="2" required="true">Format as markdown table</step> <step id="3" required="true">Show preview paths</step> <step id="4" required="true">Present decision menu</step> </critical_sequence>

<decision_gate wait_required="true"> Wait for user to select action from menu </decision_gate> </operation>

详情： 完整的8步工作流请查看references/apply-operation.md

<operation name="list_aesthetics"> <critical_sequence> <step id="1" required="true">读取manifest.json</step> <step id="2" required="true">格式化为Markdown表格</step> <step id="3" required="true">展示预览路径</step> <step id="4" required="true">展示决策菜单</step> </critical_sequence>

<decision_gate wait_required="true"> 等待用户从菜单中选择操作 </decision_gate> </operation>

Operation 3: list_aesthetics

操作3：list_aesthetics

Display all saved aesthetics in table format with preview paths. See: references/list-operation.md for complete 4-step workflow.

以表格形式展示所有已保存的美学风格及预览路径。 详情： 完整的4步工作流请查看references/list-operation.md

Operation 4: delete_aesthetic

操作4：delete_aesthetic

Remove aesthetic from library with confirmation. See: references/delete-operation.md for complete 4-step workflow.

确认后从库中移除指定美学风格。 详情： 完整的4步工作流请查看references/delete-operation.md

Operation 5: update_aesthetic

操作5：update_aesthetic

Refine aesthetic.md from improved mockup while preserving user edits. See: references/update-operation.md for complete 7-step workflow.

根据优化后的原型完善aesthetic.md文件，同时保留用户编辑内容。 详情： 完整的7步工作流请查看references/update-operation.md

API Contract

API 契约

This skill provides operations for managing aesthetic templates. Called by ui-mockup skill.

save_aesthetic(mockup_path, plugin_name, aesthetic_name?):

Input: Absolute path to mockup HTML, plugin name, optional aesthetic name
Output: aesthetic_id (string), aesthetic_path (absolute path)
Process: Analyzes mockup, generates aesthetic.md prose, saves to .claude/aesthetics/

apply_aesthetic(aesthetic_id, plugin_name, parameter_spec_path):

Input: Aesthetic ID, target plugin name, path to parameter-spec.md
Output: mockup_path (absolute path to generated mockup)
Process: Loads aesthetic prose, interprets to CSS, generates mockup with appropriate layout

Invocation: Inline invocation from ui-mockup (both skills are lightweight and stateless).

本Skill提供美学模板管理操作，由ui-mockup Skill调用。

save_aesthetic(mockup_path, plugin_name, aesthetic_name?):

输入：原型HTML的绝对路径、插件名称、可选的美学风格名称
输出：aesthetic_id（字符串）、aesthetic_path（绝对路径）
流程：分析原型，生成aesthetic.md文字描述，保存到.claude/aesthetics/目录

apply_aesthetic(aesthetic_id, plugin_name, parameter_spec_path):

输入：美学风格ID、目标插件名称、parameter-spec.md路径
输出：mockup_path（生成的原型的绝对路径）
流程：加载美学风格文字描述，解析为CSS，生成带有合适布局的原型

调用方式：由ui-mockup内联调用（两个Skill均为轻量无状态）

Success Criteria

成功标准

Save operation successful when:

✅ aesthetic.md generated following exact template structure
✅ All sections filled with interpretable prose (no placeholders)
✅ Example color codes provided as concrete reference
✅ preview.html copied to aesthetic directory
✅ metadata.json created with tags and source info
✅ manifest.json updated with new aesthetic entry
✅ Format is idempotent (same mockup → same structure every time)

Apply operation successful when:

✅ aesthetic.md parsed and interpreted correctly
✅ Appropriate layout chosen for parameter count
✅ Generated mockup reflects aesthetic visual language
✅ Control styling matches prose descriptions
✅ Colors, typography, spacing consistent with aesthetic
✅ WebView constraints enforced (no viewport units, etc.)
✅ Result is recognizably the same aesthetic despite different layout

List operation successful when:

✅ All aesthetics shown in readable table
✅ Vibe summaries extracted from prose
✅ Preview paths provided for visual reference
✅ Decision menu presented for next action

保存操作成功的条件：

✅ aesthetic.md严格按照模板结构生成
✅ 所有章节填充可理解的文字描述（无占位符）
✅ 提供具体的颜色代码示例作为参考
✅ preview.html已复制到美学风格目录
✅ metadata.json已创建并包含标签和来源信息
✅ manifest.json已更新新的美学风格条目
✅ 具有幂等性（相同原型每次生成的结构一致）

应用操作成功的条件：

✅ aesthetic.md已正确解析
✅ 根据参数数量选择了合适的布局
✅ 生成的原型体现了美学风格的视觉语言
✅ 控件样式与文字描述匹配
✅ 颜色、排版、间距与美学风格一致
✅ 遵循WebView约束（无视窗单位等）
✅ 尽管布局不同，结果仍能识别为同一美学风格

列表操作成功的条件：

✅ 所有美学风格以易读表格展示
✅ 从文字描述中提取了风格摘要
✅ 提供了视觉参考的预览路径
✅ 展示了下一步操作的决策菜单

Implementation Notes

实现说明

Technical details about parsing, quality control, and constraints. See: references/implementation-notes.md for complete technical documentation.

关于解析、质量控制和约束的技术细节。 详情： 完整技术文档请查看references/implementation-notes.md

Reference Documentation

参考文档

Pattern extraction:
```
references/pattern-extraction.md
```
- String/regex strategies for extracting visual patterns from HTML
Prose generation:
```
references/prose-generation.md
```
- Guidelines for transforming patterns into interpretable prose
Aesthetic interpretation:
```
references/aesthetic-interpretation.md
```
- Strategies for parsing prose and generating CSS/HTML
Layout generation:
```
references/layout-generation.md
```
- Layout decision trees and control placement strategies

模式提取：
```
references/pattern-extraction.md
```
- 从HTML中提取视觉模式的字符串/正则策略
文字描述生成：
```
references/prose-generation.md
```
- 将模式转换为可理解文字描述的指南
美学风格解析：
```
references/aesthetic-interpretation.md
```
- 解析文字描述并生成CSS/HTML的策略
布局生成：
```
references/layout-generation.md
```
- 布局决策树和控件放置策略

Template Assets

模板资源

Aesthetic template:
```
assets/aesthetic-template.md
```
- Complete structured prose template (THE FORMAT SPEC)
Metadata template:
```
assets/metadata-template.json
```
- Metadata JSON structure
Manifest init:
```
assets/manifest-init.json
```
- Empty manifest structure for initialization

美学风格模板：
```
assets/aesthetic-template.md
```
- 完整的结构化文字描述模板（格式规范）
元数据模板：
```
assets/metadata-template.json
```
- 元数据JSON结构
注册表初始化：
```
assets/manifest-init.json
```
- 空注册表结构，用于初始化