How does this help developers?

It reduces the time spent on layout decision-making and provides a visual blueprint to follow during the implementation phase, minimizing UI rework.

Does it evaluate accessibility?

Yes, the skill is programmed to consider usability, accessibility, and current design trends when recommending specific patterns.

Can it help with specific component libraries?

Yes, it includes specialized support for retrieving the latest component information for the Mantine library via Context7.

Are the wireframes exportable?

The wireframes are generated as ASCII text, making them easy to copy-paste directly into documentation, README files, or code comments.

What design systems does this skill reference?

It provides guidance based on industry standards including Material Design, Apple's Human Interface Guidelines (HIG), and Ant Design.

UI Design Architect

Name: UI Design Architect
Author: sc30gsw

bysc30gsw

•

デザインツール

Generates professional UI/UX design pattern recommendations and structural ASCII wireframes to accelerate frontend development.

The UI Advice skill acts as a specialized design consultant within Claude, bridging the gap between functional requirements and visual implementation. It evaluates user needs to suggest 3-5 battle-tested design patterns from industry leaders like Material Design and Apple HIG, providing detailed pros, cons, and implementation complexity for each. By generating simple yet effective text-based wireframes, it allows developers to visualize layouts and information hierarchy instantly before writing a single line of CSS or React code, ensuring accessibility and usability are prioritized from the start.

主な機能

01Instant ASCII wireframe generation for rapid structural visualization

02Specialized support for Mantine component libraries via Context7 integration

03Design pattern suggestions from major systems like Material Design, Apple HIG, and Ant Design

04Comprehensive analysis of pattern pros, cons, and specific use cases

058 GitHub stars

06Implementation complexity assessments to help prioritize development effort

ユースケース

01Deciding between different navigation patterns for a mobile-first web application

02Communicating structural UI requirements to stakeholders using clear text-based mockups

03Planning the layout for a new dashboard or landing page from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sc30gsw/claude-code-customes ui-advice

For use in Claude.ai and ChatGPT

Download Skill