Does this skill work with .pen files?

Yes, it is specifically designed to trigger on and assist with .pen file creation, review, and visual prototyping within Claude Code.

How does this prevent 'parameter tuning' traps?

It reframes specific value requests (like font size) into broader design decisions, ensuring values are derived from constraints and brand goals rather than arbitrary choices.

Can I use this for mobile app design?

Absolutely. It includes specific considerations for mobile-first constraints, touch targets (Apple HIG/Material Design), and mobile interaction patterns.

What are the 11 design dimensions covered?

The framework covers Constraints, Accessibility, IA, State Design, Content Experience, Visual Hierarchy, Emotional Design, Input Experience, Microcopy, Motion, and Design Tokens.

Hi-Fi Design Quality Framework

Name: Hi-Fi Design Quality Framework
Author: karak

bykarak

0•

设计工具

Transforms UI designs from Low-Fi to high-fidelity using a systematic 11-dimension decision framework.

The Hi-Fi Design Quality skill provides a rigorous methodology for elevating UI designs from basic wireframes to production-ready interfaces. It guides Claude through a structured 11-dimension framework covering everything from accessibility and information architecture to emotional design and motion principles. By focusing on design decisions rather than mere visual tweaks, it prevents common quality gaps in SaaS, mobile apps, and dashboards, ensuring that every pixel is backed by logic and project-specific constraints.

主要功能

01Motion and Interaction Principle Definition

020 GitHub stars

03Standardized Design Token and Variable Generation

04Comprehensive UI State Mapping (Loading, Empty, Error, Success)

0511-Dimension Design Framework (Accessibility, IA, Emotional Design, etc.)

06Low-Fi to Hi-Fi Gap Analysis and quality auditing

使用场景

01Converting low-fidelity wireframes into detailed, production-grade UI screens.

02Auditing existing Hi-Fi prototypes for missing design dimensions or accessibility violations.

03Generating design documentation and token systems for developer handoff.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add karak/karak-claude-plugin hifi-design-quality

For use in Claude.ai and ChatGPT

主要功能

01Motion and Interaction Principle Definition

020 GitHub stars

03Standardized Design Token and Variable Generation

04Comprehensive UI State Mapping (Loading, Empty, Error, Success)

0511-Dimension Design Framework (Accessibility, IA, Emotional Design, etc.)

06Low-Fi to Hi-Fi Gap Analysis and quality auditing

使用场景

01Converting low-fidelity wireframes into detailed, production-grade UI screens.

02Auditing existing Hi-Fi prototypes for missing design dimensions or accessibility violations.

03Generating design documentation and token systems for developer handoff.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add karak/karak-claude-plugin hifi-design-quality

For use in Claude.ai and ChatGPT