wireframe-sketch
Generates intentional low-fidelity whiteboard sketches and variant concept sheets.
Install
mkdir -p .claude/skills/wireframe-sketch && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/10273" && unzip -o skill.zip -d .claude/skills/wireframe-sketch && rm skill.zipInstalls to .claude/skills/wireframe-sketch
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Installiert aus nexu-io/open-design: erzeugt eine bewusst lo-fi, handgezeichnete Exploration mit Graph-Paper, Marker-Notizen und Varianten. Fuer Logoarbeit eignet sich das als fruehes Konzeptblatt, Richtungsboard oder Symbol-Exploration vor dem Feinschliff. Verwenden bei wireframe, sketch wireframe, hand drawn, low fidelity, whiteboard sketch, concept sheet.Key capabilities
- →Generate lo-fi sketches
- →Create concept variants
- →Add marker-style notes
- →Explore visual directions
How it works
It produces lo-fi, hand-drawn wireframe explorations using graph paper backgrounds and marker-style annotations.
Inputs & outputs
When to use wireframe-sketch
- →Generate early concept sketches
- →Create wireframe variants
- →Explore visual design direction
About this skill
Progressive Disclosure
Level 1 - Metadata (Auto-Loaded)
The YAML frontmatter keys name and description are the discovery signal loaded automatically.
Level 2 - Full Instructions
The remaining SKILL.md body is the complete skill guidance and is loaded on demand.
Level 3 - Referenced Supporting Files
- None.
Wireframe Sketch
Quelle: adaptiert aus nexu-io/open-design, Skill wireframe-sketch.
Nutze diese Skill, wenn sichtbar etwas Fruehes gezeigt werden soll, ohne schon so zu tun, als sei das Design fest. Fuer Logo- und Markenarbeit ist das die Phase fuer Gesten, Silhouetten, Kompositionsideen und Richtungsskizzen.
Workflow
1. High fidelity bewusst ignorieren
Wenn vorhandene Designregeln zu fertig wirken, lockere sie bewusst auf. Diese Skill soll skizzenhaft bleiben.
2. Varianten waehlen
Lege 3 bis 5 Varianten oder Richtungen fest.
Beispiele:
- geometric
- editorial
- brutalist
- monogram
- icon plus wordmark
Eine Variante darf als aktiv markiert sein, die anderen bleiben Alternativen.
3. Layout bauen
Nutze moeglichst viele dieser Elemente:
- graph-paper Hintergrund
- leicht rotierte Boxen und Linien
- Marker- oder Pencil-Anmutung
- kleine Klebezettel mit Kommentaren
- grobe Notizen, Pfeile und Hervorhebungen
- mehrere Varianten in einem Board
Fuer Logo-Arbeit besonders passend:
- Silhouetten-Cluster
- Monogramm-Skizzen
- Negativraum-Ideen
- Wortmarkenbreiten und Achsen
- kleine Anwendungs-Skizzen, etwa Favicon, App-Icon oder Stempel
4. Absichtlich unfertig halten
Das Ergebnis soll nach Designer-Whiteboard aussehen, nicht nach fertiger Brand Guideline.
5. Kurz selbst pruefen
- Sieht es bewusst roh aus?
- Sind mehrere Richtungen sichtbar?
- Helfen Notizen und Markierungen beim Vergleichen?
- Ist mindestens eine nachvollziehbare Entscheidungshypothese erkennbar?
Harte Regeln
- Nicht pixelperfekt rendern.
- Keine sterile Hochglanzoptik.
- Varianten muessen klar voneinander unterscheidbar sein.
- Der Wert liegt in frueher Sichtbarkeit und Diskussion, nicht in finaler Politur.
When not to use it
- →Finalizing brand guidelines
- →Creating pixel-perfect designs
Limitations
- →Not for pixel-perfect rendering
How it compares
It focuses on early-stage ideation and visual direction rather than final polished output.
Compared to similar skills
wireframe-sketch side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| wireframe-sketch (this skill) | 0 | 3mo | No flags | Beginner |
| product-inventor-v2 | 0 | 2mo | No flags | Advanced |
| penpot-uiux-design | 27 | 6mo | Review | Advanced |
| ui-ux-designer | 41 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
product-inventor-v2
diegosouzapw
PRODUCT INVENTOR \u2014 DESIGN ALCHEMIST v1.0 workflow skill. Use this skill when the user needs Product Inventor e Design Alchemist de nivel maximo \u2014 combina Product Thinking, Design Systems, UI Engineering, Psicologia Cognitiva, Storytelling e execucao impecavel nivel Jobs/Apple and the opera
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".
ui-ux-designer
sickn33
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
ui-designer
daymade
Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.
design-context
WellApp-ai
Refresh UI/UX context from design system, Storybook, and codebase