Best for
- Use when the brief asks for "greybox", "blueprint wireframe", "lo-fi dashboard", "low fidelity", "线框图", or "灰盒原型".
Source profileQuality 70/100
nexu-io/open-design/design-templates/wireframe-greybox/SKILL.md
wireframe-greybox
Use it for design and operations tasks; the detail page covers purpose, installation, and practical steps.
- Source repository stars
- 91,167
- Declared platforms
- 0
- Static risk flags
- 0
- Last source update
- 2026-08-25
- Source checked
- 2026-08-25
Decision brief
What it does: where it fits
Produce a single crisp greybox wireframe page. The whole point is structure, not skin — communicate hierarchy and layout with neutral grey blocks, never with real color, copy, or imagery. Everything is a placeholder: text is grey "lorem bars", images are rectangles with a diagon…
Not for
- Tasks that require unconfirmed production actions or broad system permissions.
- Environments where the pinned source and install steps cannot be inspected.
Compatibility matrix
Platform support, with evidence labels
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Not declared | No explicit evidence | Portability before use |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
Inspect first. Install second.
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
Source-detected install commandSource
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/wireframe-greybox"Safe inspection promptEditorial
Inspect the Agent Skill "wireframe-greybox" from https://github.com/nexu-io/open-design/blob/edfa6b5f447e95cb120eae030f03baba00dc34de/design-templates/wireframe-greybox/SKILL.md at commit edfa6b5f447e95cb120eae030f03baba00dc34de. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.
Workflow
What the source asks the agent to do
- 01
Workflow
1. Stay structural. Ignore any DESIGN.md that pushes finished UI — this is deliberately low fidelity. Use a clean system sans (Inter / system-ui) for shape and a mono (IBM Plex Mono / JetBrains Mono) for the redline annotations only. No hand-drawn fonts, no brand color. 2. Set t…
Stay structural. Ignore any DESIGN.md that pushes finished UI —Set the greybox palette. Page is a pale neutral (f7f7f8),Lay out the dashboard, in order, each on its own data-od-id: - 02
Output contract
One sentence before the artifact, nothing after.
One sentence before the artifact, nothing after.
Permission review
Static risk signals and limitations
No configured static risk pattern was detected
This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.
Evidence record
Why each signal appears
EvidenceSourceComputedTestedEditorial
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 70/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 91,167 | Source | Repository attention, not individual Skill quality |
| Compatibility | 0 platforms | Source | Declared in the catalog source record |
| Usage guide | automated source guide | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
Provenance and original SKILL.md
- Repository
- nexu-io/open-design
- Skill path
- design-templates/wireframe-greybox/SKILL.md
- Commit
- edfa6b5f447e95cb120eae030f03baba00dc34de
- License
- Apache-2.0
- Collected
- 2026-08-25
- Default branch
- main
View the original SKILL.md
Wireframe Greybox Skill
Produce a single crisp greybox wireframe page. The whole point is structure, not skin — communicate hierarchy and layout with neutral grey blocks, never with real color, copy, or imagery. Everything is a placeholder: text is grey "lorem bars", images are rectangles with a diagonal cross, numbers are big solid blocks. The only color on the page is the single redline accent reserved for monospace annotations.
Workflow
- Stay structural. Ignore any DESIGN.md that pushes finished UI — this is deliberately low fidelity. Use a clean system sans (Inter / system-ui) for shape and a mono (IBM Plex Mono / JetBrains Mono) for the redline annotations only. No hand-drawn fonts, no brand color.
- Set the greybox palette. Page is a pale neutral (
#f7f7f8), blocks are medium grey (#e3e3e6), borders are crisp and defined (#c9c9cffor soft edges,#1c1b1afor emphasis), and exactly one accent (a blue or coral redline) carries every monospace annotation. Keep contrast high enough to read as a small thumbnail — never near-white-on-white. - Lay out the dashboard, in order, each on its own
data-od-id:- App bar — a logo greybox, a row of nav lorem-bars, and an avatar circle on the right.
- Sidebar nav — icon squares + lorem-bar labels; mark one item active with a filled/inverted block.
- KPI row — four greyboxes, each a small label bar above a big solid "number" bar.
- Chart panel — an inline SVG greybox: axes plus a few hatched/grey bars or a schematic line. No real data.
- List / table panel — a header row plus ~5 rows of lorem bars, with one column of image-placeholders drawn as a box with a diagonal X.
- Annotations — one or two small monospace redlines pinned to the
canvas (e.g.
01 · 12-col grid,max-width 1280).
- Write one self-contained HTML document —
<!doctype html>through</html>, CSS inline, no external JS or images. SVG and CSS draw every placeholder. Amax-widthcontainer plus a media query collapses columns under ~1000px. - Self-check. It should read as a blueprint at thumbnail size: grey blocks, X-crossed image boxes, lorem bars, and exactly one accent color on the monospace redlines. If any greybox is missing, the page looks colored, or it disappears as a blank thumbnail, fix it.
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.
Frequently asked questions
What to verify before installation and use
What does the wireframe-greybox source document cover?
Produce a single crisp greybox wireframe page. The whole point is structure, not skin — communicate hierarchy and layout with neutral grey blocks, never with real color, copy, or imagery. Everything is a placeholder: text is grey "lorem bars", images are rectangles with a diagon…
How do I install wireframe-greybox?
The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "design-templates/wireframe-greybox". Inspect the command and pinned source before running it.
Alternatives
Compare before choosing
Computed 10014,671
prowler-cloud/prowler
postgresql-indexing
PostgreSQL indexing best practices for Prowler: index design, partial indexes, partitioned table indexing, EXPLAIN ANALYZE validation, concurrent operations, monitoring, and maintenance. Trigger: When creating or modifying PostgreSQL indexes, analyzing query performance with EXPLAIN, debugging slow queries, reviewing index usage statistics, reindexing, dropping indexes, or working with partitioned table indexes. Also trigger when discussing index strategies, partial indexes, or index maintenance
Computed 100147
oaustegard/claude-skills
featuring
Generate hierarchical _FEATURES.md files that describe what a codebase DOES from a user/consumer perspective, anchored to source symbols via tree-sitting. Supports large complex codebases through feature-driven decomposition into sub-feature files. Uses a multi-pass synthesis: orientation → detail → overview rewrite. Use when someone says "what does this do", "document features", "feature inventory", "_FEATURES.md", or needs to understand a codebase's purpose before modifying it. Complements tre
Computed 9931,651
HKUDS/Vibe-Trading
strategy-generate
Create, modify, and optimize quantitative trading strategies, then backtest and evaluate them.
Computed 9980
vasilyu1983/AI-Agents-public
qa-testing-ios
Guides iOS testing with XCTest, XCUITest, Swift Testing, simctl, and xcresult. Use when choosing destinations, controlling flakes, or parsing test artifacts for native apps.