wireframing
Generate text-based wireframes, screen flows, and interactive prototype specs for web and mobile.
Informations de source
- Dépôt
- glayph/Agent
- Dernière activité de la source
- 19 septembre 2026 à 22:39
- Langue détectée de SKILL.md
- anglais
- Étoiles
- 0
- Forks
- 0
Options d'installation
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Vérifiez les fichiers source
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Affichage de SKILL.md
SKILL.md
Instructions source · Aperçu en lecture seule- name
- wireframing
- description
- Generate text-based wireframes, screen flows, and interactive prototype specs for web and mobile.
- version
- 1.0.0
- author
- Miki
- license
- MIT
- platforms
- ["linux","macos","windows"]
- metadata
- {"Miki":{"tags":["wireframing","prototyping","mockups","interaction-design"],"related_skills":["visual-design","user-centered-design"]}}
# Wireframing & Prototyping
## Fidelity levels
### Low-fidelity (concept)
- Box-and-line diagrams showing layout zones
- No color, no images, no real text
- Label: Header, Nav, Content, Sidebar, Footer
### Medium-fidelity (structure)
- Realistic content placement, spacing, hierarchy
- Grayscale with 3-4 shades for depth
- Actual UI element types (input, button, card, table)
### High-fidelity (visual)
- Full color, typography, icons, spacing (8px grid)
- States: default, hover, active, disabled, error, loading, empty
## Output format (ASCII wireframes)
```
+-----------------------------------------------+
| LOGO [Search...] [Login] |
+-----------------------------------------------+
| Dashboard | +---------------------------+ |
| Projects | | Activity Feed | |
| Settings | | - User X committed | |
| Help | | - PR #42 merged | |
| | | - Build #7 passed | |
| | +---------------------------+ |
+-----------------------------------------------+
```
## Screen flow notation
```
[Home] → click "Sign Up" → [Registration] → submit → [Verify Email] → [Dashboard]
↓ error
[Registration] + inline validation
```
## Prototyping specs
For each screen include: elements list, interaction triggers, state changes, transitions (duration + easing), responsive breakpoints (mobile 375px, tablet 768px, desktop 1280px).
## Tools reference
- Figma: frames, auto layout, components, variants, prototyping
- Penpot: open-source Figma alternative
- Excalidraw: quick hand-drawn style wireframes
- Balsamiq: low-fi wireframing
Voir sur GitHub