product-design-wireframes
CommunityTurn flows into atomic UI specs.
AuthorBellaBe
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill converts user flows into wireframe specifications organized by atomic design levels, including AI UX patterns.
Core Features & Use Cases
- Atomic design mapping: ATOMS → MOLECULES → ORGANISMS → TEMPLATES → PAGES.
- Design tokens: establish colors, typography, spacing, and components.
- Wireframe layouts: produce screen layouts with component usage.
Quick Start
Example: "Create a wireframe for the onboarding screen using the atom-level components."
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: product-design-wireframes Download link: https://github.com/BellaBe/lean-os/archive/main.zip#product-design-wireframes Please download this .zip file, extract it, and install it in the .claude/skills/ directory.