Skip to content
cccskills
FreePublished on GitHubEnglish overview

wireframe-sketch

Create a hand-drawn HTML wireframe for exploring screen layouts before detailed design. Graph paper, sticky notes, sketch tabs, and rough chart placeholders present an early concept with annotations for discussion and review.

OriginalShow the original 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 "手绘原型".

nexu-io/open-design
AI rating90/ 100See how to install

Good for

  • Sketching an initial portal or dashboard layout
  • Presenting layout options with labeled sketch tabs
  • Adding review notes to an early screen concept

Overview

What it does

Create a hand-drawn wireframe as a single HTML page to explore screen layouts and information groups. A wireframe is a draft that shows the structure of a screen before its visual design is finished. Graph-paper backgrounds, pencil- or marker-style lettering, hatched charts, and sticky-note annotations give the page its sketch appearance.

When it helps

Use it to share early portal or dashboard ideas and discuss what belongs where. The layout can include a sidebar, boxes for key figures, and chart placeholders. Tab labels identify alternative concepts, with one concept highlighted as selected. This presentation helps you show a proposal while it is still an unfinished draft and attach notes to areas that need review.

Example requests

  • “Sketch an early portal concept with four variant tab labels and sticky notes marking areas that need review.”
  • “Turn this dashboard layout into a wireframe with graph paper and rough charts.”

Notes

The output is a rough desktop screen concept. Tabs serve as labels for alternatives; screen-switching behavior is not specified. Handwriting-style fonts use Google Fonts, with italic serif text as the fallback when those fonts are unavailable.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?
AGoodIt explicitly applies to wireframe requests and produces a single hand-drawn HTML page.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
AGoodIt specifies layout order, inline CSS, self-checks, and an output format using artifact tags.
SafetyAre sending data, deleting files, and running commands disclosed?
BPartly lackingGoogle Fonts usage is stated, but the scope of external requests and confirmation steps are not described.
Easy setupDoes it need few tools or API keys, and are they documented?
AGoodCSS is embedded in the HTML, and fallback fonts are specified when Google Fonts is unavailable.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (2)

  • SKILL.md3.9 KB
  • example.html15.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

  1. 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).
  2. 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.
  3. 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".
  4. 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.
  5. 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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

8-bit-orbit-video-template

FreeSummaryAI rating 90

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

  • Create a retro pixel presentation video
  • Customize a three-scene video template
  • Preview scene transitions and motion in HTML
nexu-io/open-design103KUpdated Oct 21, 2026

ad-creative

FreeSummaryAI rating 80

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design103KUpdated Oct 21, 2026

after-hours-editorial-template

FreeSummaryAI rating 80

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design103KUpdated Oct 21, 2026

agent-browser

FreeSummaryAI rating 100

Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.

  • Checking local OpenDesign previews
  • Testing clicks and text entry in web apps
  • Capturing page or element screenshots
nexu-io/open-design103KUpdated Oct 21, 2026

ai-music-album

FreeSummaryAI rating 80

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design103KUpdated Oct 21, 2026

algorithmic-art

FreeSummaryAI rating 80

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

  • Posters generated with programmed rules
  • Still images that suggest motion
  • Studies of artistic frame composition
nexu-io/open-design103KUpdated Oct 21, 2026

See all skills by nexu-io

Report a problem with this skill