wireframing
Generate text-based wireframes, screen flows, and interactive prototype specs for web and mobile.
Informações da origem
- Repositório
- glayph/Agent
- Última atividade na origem
- 19 de setembro de 2026 às 22:39
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 0
- Forks
- 0
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Exibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- 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
Ver no GitHub