Run any Skill in Manus with one click

wireframe-sketch

Stars75,633

Forks8,629

UpdatedMay 11, 2026 at 09:48

A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations, scribbled chart placeholders, hatched fills. Reads like a designer's whiteboard before any pixels are committed. Use when the brief asks for "wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard", "草稿", or "手绘原型".

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

nexu-io

nexu-io/open-design

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

2 files

SKILL.md

readonly

More from this repository

same repository

web-clone

nexu-io/open-design

网站复刻 / 克隆方法论。USE WHEN 用户说复刻网站、克隆网站、clone website、抄个站、仿站、照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。

2026-07-0375.6k

emil-design-eng

nexu-io/open-design

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

2026-07-0375.6k

review-animations

nexu-io/open-design

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.

2026-07-0375.6k

web-design-guidelines

nexu-io/open-design

Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.

2026-07-0375.6k

writing-guidelines

nexu-io/open-design

Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the writing handbook".

2026-07-0375.6k

high-end-visual-design

nexu-io/open-design

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

2026-07-0375.6k

Wireframe Sketch Skill

Produce a single hand-drawn wireframe page. The whole point is "this is a sketch" — looseness is the brand. Lean into pencil/marker tones, hatched fills, dashed borders, slight rotations.

Workflow

Skip the DESIGN.md if it pushes for finished UI. This skill explicitly wants a low-fidelity look. Only honor type tokens loosely (system serif for headlines, mono for annotations, marker font fallback).

Pick the screen variants from the brief — typically 3–4 tab labels like "01 · A · ORGANIZED", "02 · B · DASHBOARD", etc. One is "active", the rest are inactive sketch tabs.

Layout, in order:

Page header — bold serif title with a fake "WIREFRAME v0.1" tag pinned next to it (dashed border, slight rotation). Below: one-line subtitle in marker italic + a date / device / fidelity dateline on the right in mono.
Tab strip — 4–5 labels with marker check-square glyphs. The active one has a highlighter swipe behind it (yellow / orange tint + slight skew).
Sketch canvas — a graph-paper card (background: 24px × 24px grid drawn with linear-gradient lines), with a thick rounded border drawn to look like a sharpie line.
Browser chrome row — three sketched circles + a fake URL bar with a hand-written-style URL.
Sidebar nav — sketched checkbox + label for each nav item, marker italic. One has a highlighter line through it (active).
KPI tiles — 3–4 boxes, each with a chunky scribbled number in a marker-style stroke, a tiny accent stamp, and a one-line label.
Chart placeholder — a card with a hand-drawn axis and a wobbly polyline. Add 3–4 dot markers.
Bar chart placeholder — a card with hatched-fill rectangles of varying heights.
Sticky notes — 1–2 yellow / pink notes with marker text, taped with a slightly rotated band, pinned over key regions to call out "next step", "page-1", or "needs review".

Write a single HTML document:

<!doctype html> through </html>, CSS inline.
Use the system's available "Caveat", "Patrick Hand", or "Architects Daughter" fonts via Google Fonts; otherwise fall back to italic serif.
Slight rotations everywhere (transform: rotate(-0.6deg)) to break the grid and feel hand-drawn.
data-od-id on header, tabs, sidebar, KPIs, chart, bar-chart, sticky notes.

Self-check:

The page should not look pixel-perfect. If it does, you over-rendered.
Marker / pencil + graph paper + hatched fills + sticky notes are all present; if any is missing, add it.
The active tab has the highlighter swipe; the others don't.

Output contract

Emit between <artifact> tags:

<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title"> <!doctype html> <html>...</html> </artifact>

One sentence before the artifact, nothing after.

Wireframe Sketch Skill

Produce a single hand-drawn wireframe page. The whole point is "this is a sketch" — looseness is the brand. Lean into pencil/marker tones, hatched fills, dashed borders, slight rotations.

Workflow

Pick the screen variants from the brief — typically 3–4 tab labels like "01 · A · ORGANIZED", "02 · B · DASHBOARD", etc. One is "active", the rest are inactive sketch tabs.

Layout, in order:

Page header — bold serif title with a fake "WIREFRAME v0.1" tag pinned next to it (dashed border, slight rotation). Below: one-line subtitle in marker italic + a date / device / fidelity dateline on the right in mono.
Tab strip — 4–5 labels with marker check-square glyphs. The active one has a highlighter swipe behind it (yellow / orange tint + slight skew).
Sketch canvas — a graph-paper card (background: 24px × 24px grid drawn with linear-gradient lines), with a thick rounded border drawn to look like a sharpie line.
Browser chrome row — three sketched circles + a fake URL bar with a hand-written-style URL.
Sidebar nav — sketched checkbox + label for each nav item, marker italic. One has a highlighter line through it (active).
KPI tiles — 3–4 boxes, each with a chunky scribbled number in a marker-style stroke, a tiny accent stamp, and a one-line label.
Chart placeholder — a card with a hand-drawn axis and a wobbly polyline. Add 3–4 dot markers.
Bar chart placeholder — a card with hatched-fill rectangles of varying heights.
Sticky notes — 1–2 yellow / pink notes with marker text, taped with a slightly rotated band, pinned over key regions to call out "next step", "page-1", or "needs review".

Write a single HTML document:

<!doctype html> through </html>, CSS inline.
Use the system's available "Caveat", "Patrick Hand", or "Architects Daughter" fonts via Google Fonts; otherwise fall back to italic serif.
Slight rotations everywhere (transform: rotate(-0.6deg)) to break the grid and feel hand-drawn.
data-od-id on header, tabs, sidebar, KPIs, chart, bar-chart, sticky notes.

Self-check:

The page should not look pixel-perfect. If it does, you over-rendered.
Marker / pencil + graph paper + hatched fills + sticky notes are all present; if any is missing, add it.
The active tab has the highlighter swipe; the others don't.

Output contract

Emit between <artifact> tags:

<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title"> <!doctype html> <html>...</html> </artifact>

One sentence before the artifact, nothing after.

name	wireframe-sketch
description	A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations, scribbled chart placeholders, hatched fills. Reads like a designer's whiteboard before any pixels are committed. Use when the brief asks for "wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard", "草稿", or "手绘原型".
triggers	["wireframe","sketch wireframe","lo-fi mockup","hand drawn","whiteboard sketch","low fidelity","手绘原型","草图","线框图"]
od	{"mode":"prototype","platform":"desktop","scenario":"design","fidelity":"wireframe","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":false,"sections":["color","typography","layout","components"]},"example_prompt":"Sketch a hand-drawn wireframe v0.1 for a portal — four tabbed variants on graph paper, marker headlines, sticky-note annotations, hatched chart placeholders."}

name	wireframe-sketch
description	A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations, scribbled chart placeholders, hatched fills. Reads like a designer's whiteboard before any pixels are committed. Use when the brief asks for "wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard", "草稿", or "手绘原型".
triggers	["wireframe","sketch wireframe","lo-fi mockup","hand drawn","whiteboard sketch","low fidelity","手绘原型","草图","线框图"]
od	{"mode":"prototype","platform":"desktop","scenario":"design","fidelity":"wireframe","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":false,"sections":["color","typography","layout","components"]},"example_prompt":"Sketch a hand-drawn wireframe v0.1 for a portal — four tabbed variants on graph paper, marker headlines, sticky-note annotations, hatched chart placeholders."}