skills.rest
HACK-WU
HACK-WUCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Design interface visual schemes and generate zero-build HTML demo prototypes from requirements.

2|Updated Jun 8, 2026
Search Tags:#layout#responsive design#visual design#design tokens#prototype#ui design#html demo
One-click install
npx skills add https://github.com/HACK-WU/skills --skill ui-designer-hack-wu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/HACK-WU/skills/tree/main/skills/ui-designer
Command: npx skills add https://github.com/HACK-WU/skills --skill ui-designer-hack-wu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? It bridges the gap between interaction design and technical implementation by turning requirements or interaction documents into concrete visual design specifications (layout, components, color, typography, spacing tokens) plus runnable HTML demos, eliminating vague handoffs between design and engineering. ## Core Features & Use Cases - Visual Scheme Documents: Produces layout scheme docs covering page structure, grid, component states, color/typography/spacing/radius/shadow design tokens, and responsive rules, saved to docs/ui-design/. - Zero-Build HTML Demos: Writes single-file HTML/CSS/vanilla-JS prototypes that open directly in a browser, with CSS variables matching the design tokens one-to-one. - Style Tool Integration: Detects and loads external style skill libraries (taste-skill, frontend-design, theme-factory) from ui-tools/skills/ to match design scenarios like minimalist, high-end, or brutalist styles. - Use Case: After interaction-design finishes a login flow, ask for the UI design and receive a confirmed layout scheme document plus a previewable demo/login-page/index.html showing default, error, and loading states. ## Quick Start Ask the AI to design the UI for your feature or page based on your requirement description or interaction design document, then confirm each stage until the HTML demo is generated.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I generate a UI design document from a requirement description?▼

Provide your requirement description and the skill extracts a page list for confirmation, then walks through layout, component states, and visual tokens in stages. The confirmed result is written to docs/ui-design/{slug}.md as a layout scheme document.

How to create an HTML demo page without a build tool?▼

The skill writes a single index.html with inlined CSS and vanilla JS that opens directly in a browser. It uses CSS variables matching the design tokens, semantic HTML tags, and mobile-first media queries, with no frameworks, CDNs, or package managers.

What is the difference between ui-designer and interaction-design?▼

interaction-design defines interaction logic such as flows, feedback, and exception paths, while ui-designer handles only the visual layer: layout, components, colors, typography, and style specs. ui-designer takes interaction-design output as its preferred input.

Can I use a specific design style like minimalist or brutalist?▼

Yes. The skill checks ui-tools/skills/ for style libraries such as minimalist-ui, high-end-visual-design, and industrial-brutalist-ui, then loads the matching style instructions into the token and typography decisions. User-stated preferences override the default routing.

What happens if the style tool library is not installed?▼

The skill requires the ui-tools/skills/ library and installs it via npx skills add from the taste-skill and anthropics/skills repositories before proceeding. If installation fails after a retry, it pauses and reports the cause, such as missing Node.js or network issues.

When should I not use ui-designer for a task?▼

Do not use it to convert existing design mockups into ASCII archives (that is ui-to-ascii) or to build technical feasibility prototypes for risky approaches (that is demo-verify). It also does not cover interaction logic or technical architecture design.

Related Skills

Explore More Design & Creative Skills→
1479089714790897
7

kwp-design-design-handoff

Generate structured Markdown developer handoff documentation from design inputs.

Community
Intermediate
hospitaljobsinhospitaljobsin
7

frontend-design

Create production-grade frontend interfaces with React, Vue, Svelte, or vanilla HTML/CSS/JS.

Official
Advanced
petbrainspetbrains
13

frontend-playwright

Identify visual regressions across viewports and interactions before deployment.

Official
Intermediate
yutnayutna
2

ui-ascii-wireframe

Convert feature specifications into ASCII wireframes for enterprise web UIs.

Community
Intermediate