visualize

Name: visualize
Availability: InStock
Author: figuretu

Render frontend UI layout and component comparisons as a self-contained HTML page with inline CSS and JS.

16|2|Updated Feb 13, 2026

Search Tags:#ui #html #frontend #visualization #comparison #mockup

Ready to run

npx skills add https://github.com/figuretu/my-skills --skill visualize-figuretu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visualize
Source: https://github.com/figuretu/my-skills/tree/main/visualize
Command: npx skills add https://github.com/figuretu/my-skills --skill visualize-figuretu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

将前端方案讨论中的视觉内容快速整理为本地 HTML 页面并在浏览器打开，帮助用户“先看见，再在终端讨论”。

Core Features & Use Cases

页面布局、组件结构、信息层级、视觉风格方向对比
带标注的页面/组件草图
同一问题的 2-4 个可视化方案并排比较

不适用：

需求澄清、scope 划分、API 设计、数据建模、tradeoff 讨论
流程图、架构图、关系图等非前端视觉方案
需要浏览器表单输入、控件调参、状态持久化的 interactive playground
需要把浏览器点击作为正式输入的流程

参数

使用本 skill 时，先在内部明确以下参数；若用户未完整给出，根据上下文推断最小必要集：

topic：当前要可视化的前端问题，例如首页布局、卡片样式、导航结构
goal：这次展示要帮助用户判断什么，例如选方向、看层级、看流程
template：使用哪种展示模板，ui-compare 或 annotated-mockup
variants：需要展示几个方案，通常为 1-4 个
fidelity：低保真 wireframe 或中保真 mockup
output_path：HTML 文件保存位置；若用户未指定，默认使用当前项目（cwd）下的 ./ .ai_docs/visualize/

Quick Start

在内部配置 topic、goal、template、variants、fidelity 和 output_path 后，生成并打开一个本地 HTML 可视化页面。

Frequently Asked Questions about visualize

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I compare multiple UI layouts side by side in a local HTML file?▼

To compare multiple UI layouts, you can render 2-4 frontend variants into a self-contained local HTML page with inline CSS and JS. This generates a visual comparison directly in your browser to aid layout decisions.

Can I generate annotated mockups for frontend components without external libraries?▼

Yes, you can generate annotated mockups as a self-contained HTML document using inline CSS and JS. It applies the annotated-mockup template to render component sketches without needing external dependencies.

How do I visualize frontend proposals during a terminal workflow?▼

You can visualize frontend proposals by rendering them into a local HTML file and opening it in a browser. This lets you see the visual output first, then continue discussions directly in your terminal environment.

Does this visualization tool support interactive playgrounds with form inputs and state persistence?▼

No, it does not support interactive playgrounds requiring browser form inputs, control parameter tuning, or state persistence. It is strictly for rendering static frontend proposals and visual layout comparisons.

What output fidelity options are available when rendering frontend mocks?▼

When rendering frontend mocks, you can choose between low-fidelity wireframes and medium-fidelity mockups. You specify this using the fidelity parameter to control the visual detail level of the generated HTML page.

When should I not use an HTML visualization tool for frontend design discussions?▼

You should not use this approach for requirement clarification, API design, data modeling, or tradeoff discussions. It is also not suited for non-frontend visuals like flowcharts, architecture diagrams, or relationship graphs.