skills.rest
buiminhduc23011
buiminhduc23011COMMUNITY
Explore all skills by this author →
GitHub

awf-visualize

Generate UI/UX mockups and design specifications from user-defined preferences.

Updated Jul 6, 2026
Search Tags:#design#ui#frontend#ux#visual#mockup
One-click install
npx skills add https://github.com/buiminhduc23011/awf-for-codex --skill awf-visualize
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: awf-visualize
Source: https://github.com/buiminhduc23011/awf-for-codex/tree/main/skills/awf-visualize
Command: npx skills add https://github.com/buiminhduc23011/awf-for-codex --skill awf-visualize

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill bridges the gap between abstract product ideas and concrete visual design, helping users without formal design training create professional-grade UI/UX mockups and design specifications.

Core Features & Use Cases

  • Visual Discovery: Guides users through a structured interview to define the aesthetic vibe, color palette, and layout preferences.
  • Design Specification Generation: Automatically produces detailed technical documentation including color hex codes, typography scales, and spacing systems for developers.
  • Use Case: A founder has a rough concept for a dashboard but lacks design skills; this skill helps them define the look and feel, generates a visual mockup, and creates the exact CSS specs needed for implementation.

Quick Start

Invoke the awf-visualize skill to begin the design process for your new dashboard interface.

Frequently Asked Questions about awf-visualize

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

FAQPage Schema
How do I generate professional UI mockups from abstract product ideas?▼

Generating UI mockups involves defining your functional requirements and aesthetic vibe. The system then translates these inputs into visual mockups and technical design specifications for web and mobile applications.

Can I create a complete design system with color palettes and typography scales?▼

Creating a design system is fully supported by defining your visual preferences. The system outputs detailed specifications including color hex codes, typography scales, and spacing systems for responsive layouts.

What is the best way to get CSS specifications for a web dashboard layout?▼

To get CSS specifications, input your dashboard's functional requirements and desired aesthetic. The system generates responsive layout specifications and technical documentation including spacing systems for developers.

Do I need formal design training to create UX specifications for mobile applications?▼

Formal design training is not required to create UX specifications for mobile applications. The system bridges this gap by guiding you through a structured interview to produce professional-grade design specifications.

How does visual discovery work when defining a product's aesthetic vibe?▼

Visual discovery works by conducting a structured interview to define your aesthetic vibe, color palette, and layout preferences. This process ensures the final mockups accurately reflect your desired visual design.

Can I specify responsive layout requirements for both web and mobile applications?▼

Specifying responsive layout requirements for web and mobile applications is fully supported. The system generates responsive layout specifications to facilitate the transition from visual design to technical implementation.

Related Skills

Explore More Design & Creative Skills→
iJosueehiJosueeh

design-brief-builder

Guide a structured design interview and generate a Design-Brief.md document.

Community
Advanced
erichowenserichowens
181

web-design-expert

Generate distinctive web designs and brand identities with WCAG accessibility.

Community
Advanced
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
BENYEKHLEF-AnouarBENYEKHLEF-Anouar

designer-ui

Generate atomic-design UI assets and HTML mockups from wireframes.

Community
Advanced