Best fit
- Use when the brief asks for "greybox", "blueprint wireframe", "lo-fi dashboard", "low fidelity", "线框图", or "灰盒原型".
nexu-io/open-design
wireframe-greybox
Use it for design and operations tasks; the detail page covers purpose, installation, and practical steps.
70Collecting
See how to use itView GitHub source
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/wireframe-greybox"Automated source guideDesignStandard source
Source checked Jul 28, 2026·Refresh due Oct 26, 2026
Reorganized from the pinned upstream SKILL.md
Source-grounded design guide: wireframe-greybox
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…
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/wireframe-greybox"The pinned source supports a structured brief, but not an expanded tutorial. Only detected inputs, outputs, and sections are shown.
394 source words · 2 usable sections
Design outputs
- One sentence before the artifact, nothing after.
Design process
Read wireframe-greybox through these 2 source sections
Sections are extracted automatically from the pinned SKILL.md and link back to the source.
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:
Output contract
One sentence before the artifact, nothing after.
One sentence before the artifact, nothing after.
Design checklist
Verify each item before delivery
The source section “Workflow” has been checked.
The source section “Output contract” has been checked.
Source output checked: One sentence before the artifact, nothing after.
Choose a different workflow
When another Skill is the better fit
design-review
Use when the user says "review the design", "check the UI", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more.
A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.
Open source detailhiggsfield-generate
Use when the user wants to generate an image or video via Higgsfield AI. Covers 30+ models: Soul V2, Seedance 2.0, Kling 3.0, Veo 3.1, GPT Image 2, Nano Banana 2. Also covers Marketing Studio — branded ad video/image with avatars and products. Use whenever: "generate an image", "make a video", "animate this photo", "image-to-video", "img2vid", "edit this image with AI", "produce a clip", "create an ad", "make a UGC video", "marketing video", "brand video", "TV spot", "import product from URL", "
A separate implementation from MoizIbnYousaf/marketing-cli; compare its source, maintenance signals, and permission requirements.
Open source detailarize-evaluator
Handles LLM-as-judge evaluation workflows on Arize including creating/updating evaluators, running evaluations on spans or experiments, managing tasks, trigger-run operations, column mapping, and continuous monitoring. Use when the user mentions create evaluator, LLM judge, hallucination, faithfulness, correctness, relevance, run eval, score spans, score experiment, trigger-run, column mapping, continuous monitoring, or improve evaluator prompt.
A separate implementation from github/awesome-copilot; compare its source, maintenance signals, and permission requirements.
Open source detailFAQ
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.
Repository stars
82,073
Repository forks
9,485
Quality
70/100
Source repository last pushed
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Documentation22/30
Specificity16/25
Maintenance20/20
Trust signals12/25
Compare before choosing
Related Agent Skills and source variants
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
design-review by event4u-app
Use when the user says "review the design", "check the UI", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more.
higgsfield-generate by MoizIbnYousaf
Use when the user wants to generate an image or video via Higgsfield AI. Covers 30+ models: Soul V2, Seedance 2.0, Kling 3.0, Veo 3.1, GPT Image 2, Nano Banana 2. Also covers Marketing Studio — branded ad video/image with avatars and products. Use whenever: "generate an image", "make a video", "animate this photo", "image-to-video", "img2vid", "edit this image with AI", "produce a clip", "create an ad", "make a UGC video", "marketing video", "brand video", "TV spot", "import product from URL", "
arize-evaluator by github
Handles LLM-as-judge evaluation workflows on Arize including creating/updating evaluators, running evaluations on spans or experiments, managing tasks, trigger-run operations, column mapping, and continuous monitoring. Use when the user mentions create evaluator, LLM judge, hallucination, faithfulness, correctness, relevance, run eval, score spans, score experiment, trigger-run, column mapping, continuous monitoring, or improve evaluator prompt.
neuropixels-analysis by k-dense-ai
Analyze Neuropixels extracellular recordings end-to-end with SpikeInterface. Covers loading SpikeGLX/Open Ephys/NWB data, preprocessing, drift/motion correction, Kilosort4 (and CPU) spike sorting, quality metrics, and unit curation (threshold-based, model-based UnitRefine, and AI-assisted visual review). Use when working with Neuropixels 1.0/2.0 recordings, spike sorting, or extracellular electrophysiology analysis.
scientific-brainstorming by k-dense-ai
Facilitates evidence-aware scientific ideation with independent generation, structured discussion, explicit assumptions, transparent evaluation, adversarial review, and decision logs. Use for early-stage research brainstorming or prioritizing candidate directions; hand off empirical validation, study design, ethics or regulatory review, and clinical questions to appropriate experts or skills.
View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 2 min
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.
- Source repo
- nexu-io/open-design
- Skill path
- design-templates/wireframe-greybox/SKILL.md
- Commit SHA
- 89d6d4ef21ba
- Repository license
- Apache-2.0
- Data collected