skills.rest
Marioandres717
Marioandres717COMMUNITY
Explore all skills by this author →
Website𝕏@marioandres717GitHub

strength-ai-design

Design UI screens with ASCII wireframes, component breakdowns, and implementation plans.

Updated Apr 7, 2026
Search Tags:#design#ui-design#design-system#ascii#wireframe#mockup#strength-ai
One-click install
npx skills add https://github.com/Marioandres717/strength-ai --skill strength-ai-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: strength-ai-design
Source: https://github.com/Marioandres717/strength-ai/tree/main/.claude/skills/strength-ai-design
Command: npx skills add https://github.com/Marioandres717/strength-ai --skill strength-ai-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps product teams quickly design polished UI screens for the Strength-AI app by producing ASCII wireframes, a component breakdown, and an implementation plan that align with the app's design system and gym-first UX principles.

Core Features & Use Cases

  • ASCII wireframe generation for mobile-first screens that communicates layout, hierarchy, and interactions.
  • Component breakdown detailing UI building blocks and their responsibilities.
  • Ready-to-implement plan with concrete steps and Tailwind classes that engineers can apply directly.
  • Use Case: when a designer or product manager asks to plan a new screen or route, this skill outputs a design deliverable you can hand to developers.

Quick Start

Ask me to design a new screen, and I will return an ASCII wireframe, a component breakdown, and an implementation plan.

Frequently Asked Questions about strength-ai-design

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

FAQPage Schema
How do I generate ASCII wireframes for mobile UI design?▼

ASCII wireframes for mobile UI design are generated by requesting a new screen layout, which outputs text-based visual representations communicating layout, hierarchy, and interactions ready for developer use.

What is the best way to plan a new app route and component breakdown for developers?▼

Planning a new app route involves producing a component breakdown detailing UI building blocks and their responsibilities, paired with an implementation plan containing concrete steps and Tailwind classes for engineers.

Can I get Tailwind classes and an implementation plan directly from a UI mockup request?▼

Yes, requesting a UI mockup delivers a ready-to-implement plan with concrete steps and Tailwind classes that engineers can apply directly without additional manual translation.

Does this UI design process follow a specific design system and UX principles?▼

The UI design process follows the app's established design system and gym-first UX principles, ensuring all generated mockups and component breakdowns align with existing visual standards.

What do I need to provide to start designing polished UI screens?▼

To start designing polished UI screens, you simply need to ask for a new screen or route, and the skill returns an ASCII wireframe, component breakdown, and implementation plan without requiring external dependencies.

Related Skills

Explore More Design & Creative Skills→
aiunlocked1412aiunlocked1412
14

web-designer-pro

Generate mobile-first wireframes, design tokens, and developer handoff documentation for web pages.

Community
Advanced
Vivekmano27Vivekmano27

ui-wireframes

Generate structured UI wireframes and component specifications in Markdown.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

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

Community
Intermediate
Final-Project-solicode-WebsiteeFinal-Project-solicode-Websitee

designer-ui

Convert wireframes into Atomic Design components and Tailwind/Preline HTML mockups.

Official
Advanced