skills.rest
eninem123
eninem123COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design

Generate frontend UI design specifications with palettes, typography, and layout strategy.

Updated Aug 23, 2026
Search Tags:#typography#frontend#color palette#prototype#ui design#visual design system#web mini-program
One-click install
npx skills add https://github.com/eninem123/hunterclaw --skill ui-design-eninem123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/eninem123/hunterclaw/tree/main/skills/cloudbase/references/ui-design
Command: npx skills add https://github.com/eninem123/hunterclaw --skill ui-design-eninem123

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you quickly translate product and user interface requirements into a visually distinctive, production-ready frontend UI specification and implementation plan, reducing the risk of generic or inconsistent layouts.

Core Features & Use Cases

  • Interface concept to design spec: Converts requirements into an explicit UI Design Specification including purpose, aesthetic direction, color palette, typography, and layout strategy.
  • Production-grade implementation guidance: Ensures high-fidelity frontend outputs with platform constraints, motion, and visual consistency suitable for real development.
  • Platform-appropriate execution: Supports web and mini-program UI workflows by directing you to the relevant implementation guidance after the design spec is fixed.

Quick Start

Use the ui-design skill to create a distinctive web or mini-program screen by first writing the complete DESIGN SPECIFICATION (purpose, aesthetic direction, color palette with hex codes, typography, and a non-standard asymmetric layout strategy) and then implementing the UI code according to that spec.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I create a production-grade UI design specification for web pages?▼

To create a production-grade UI design specification for web pages, define the interface purpose, aesthetic direction, color palette with hex codes, typography, and an asymmetric layout strategy before implementing the frontend UI code.

Can I use this to generate visual design systems for mini-program interfaces?▼

Yes, you can generate visual design systems for mini-program interfaces by directing the workflow to platform-specific implementation guidance after fixing the initial design specification and constrained palette rules.

What's the best way to build a high-fidelity frontend prototype with explicit layout and motion rules?▼

The best way to build a high-fidelity frontend prototype is to establish a mandatory pre-design specification that explicitly defines layout, typography, color, and motion constraints suitable for real development.

Do I need to define typography and color palette rules before generating frontend UI code?▼

Yes, you need to define constrained typography and color palette rules beforehand to ensure visual consistency and avoid generic layouts in the generated frontend UI code.

Why does my frontend UI layout look generic and inconsistent during screen styling?▼

Your frontend UI layout looks generic and inconsistent when it lacks an explicit pre-design specification governing aesthetic direction and a non-standard asymmetric layout strategy before implementation.

Does this approach support platform-constrained visual builds for component styling?▼

Yes, this approach supports platform-constrained visual builds by ensuring high-fidelity frontend outputs with explicit layout, typography, color, and motion alignment for page and component styling.

Related Skills

Explore More Design & Creative Skills→
avav25avav25
2

feature-design

Convert raw feature ideas into structured PRDs with goals, user stories, and acceptance criteria.

Community
Intermediate
dang0705dang0705

ui-design

Design frontend UIs with Tailwind CSS for web pages and mini-programs.

Community
Advanced
TedTschoppTedTschopp

brand-guidelines

Enforce tedt.org color, typography, and layout rules across design artifacts.

Community
Basic
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate