skills.rest
junchenghuo
junchenghuoCOMMUNITY
Explore all skills by this author →
GitHub

ui-hd-visual-spec

Generate visual specification documents defining canvas, grids, colors, typography, and SVG export strategies.

3|Updated Mar 11, 2026
Search Tags:#design system#svg#ui design#asset export#visual spec#high resolution
One-click install
npx skills add https://github.com/junchenghuo/openclaw-biz-agent --skill ui-hd-visual-spec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-hd-visual-spec
Source: https://github.com/junchenghuo/openclaw-biz-agent/tree/main/ui/.agents/skills/ui-hd-visual-spec
Command: npx skills add https://github.com/junchenghuo/openclaw-biz-agent --skill ui-hd-visual-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that visual assets are clear, easily sliceable, and reusable, maintaining a consistent and high-quality visual output for user interfaces.

Core Features & Use Cases

  • Visual Specification: Defines canvas dimensions, grids, color palettes, and typography systems.
  • Component Styling: Outputs visual specifications for components and their states.
  • Export Strategy: Generates local SVG export strategies and naming conventions.
  • Resolution Guidance: Provides recommendations for multi-resolution asset slicing (1x/2x/3x).
  • Use Case: A designer needs to create a style guide for a new mobile app. This Skill can help define all the visual elements, from typography to spacing, ensuring consistency across all screens and providing guidelines for exporting assets at different resolutions for various devices.

Quick Start

Use the ui-hd-visual-spec skill to generate a visual specification document for a new mobile app interface.

Frequently Asked Questions about ui-hd-visual-spec

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

FAQPage Schema
How do I generate a high-resolution UI visual spec for a mobile app?▼

To generate a high-resolution UI visual spec, define the canvas dimensions, grids, color palettes, and typography systems to ensure visual assets are clear, sliceable, and reusable for mobile app interfaces.

What should be included in a UI design system visual specification document?▼

A UI visual specification document should include canvas dimensions, grid layouts, color palettes, typography systems, and visual specifications for components and their various interactive states.

How do I create a multi-resolution asset export strategy for SVG and PNG files?▼

Create a multi-resolution asset export strategy by defining local SVG export workflows, establishing naming conventions, and providing slicing recommendations for 1x, 2x, and 3x resolutions.

Can I define component states and styling guidelines in a visual spec?▼

Yes, you can define component styling by outputting detailed visual specifications for components and their interactive states, ensuring consistent visual output across all user interface screens.

What is the best way to ensure UI assets are sliceable and reusable across different screens?▼

The best way to ensure UI assets are sliceable and reusable is to generate a visual specification that defines typography, spacing, and multi-resolution asset export strategies for consistent high-quality output.

Related Skills

Explore More Design & Creative Skills→
PiaoxuemoliPiaoxuemoli

sketch

Generate disposable HTML mockup variants from user design preferences.

Community
Intermediate
SwimmingLiuSwimmingLiu
1

drawio

Generate editable draw.io diagrams and export them to PNG, SVG, or PDF.

Community
Intermediate
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
zzafergokzzafergok
1

stitch-ui-design-skill

Generate structured Stitch prompts for UI/UX prototypes and mockups.

Community
Intermediate