Render frontend UI layout and component comparisons as a self-contained HTML page with inline CSS and JS.
npx skills add https://github.com/figuretu/my-skills --skill visualize-figuretu
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
将前端方案讨论中的视觉内容快速整理为本地 HTML 页面并在浏览器打开，帮助用户“先看见，再在终端讨论”。
不适用：
使用本 skill 时，先在内部明确以下参数；若用户未完整给出，根据上下文推断最小必要集：
在内部配置 topic、goal、template、variants、fidelity 和 output_path 后，生成并打开一个本地 HTML 可视化页面。
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
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.
dxc-dannyIdentify project goals, constraints, and success criteria, then propose design options with trade-offs.
lisposterConvert Markdown to WeChat-compatible styled HTML with inline CSS.
shwilliamsonEnforce BEM naming, CSS variables, and responsive patterns for CSS/SCSS.
osocodeCreate Mermaid diagrams for documentation and architecture.
