القائمة
Generate precise high-fidelity ASCII wireframes as implementation contracts during /PLAN design wireframes.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Workspace-level visual asset and canvas pipeline for generating documents, slides, and posters with rich layouts.
Enforces the full-width header / max-width body / full-width footer chrome pattern. Implements the filter+split rendering technique so background bleeds reach the viewport edge while inner content stays constrained.
Apply high-quality frontend design patterns with token-first implementation rules and NEZAM gate compliance.
Run before any design work on an unfamiliar codebase — extracts full UI context (components, layouts, routes, tokens, pages, extractable components) into 6 structured files in .cursor/context/design-init/.
Enforces the two-step design discipline: Step A pixel-perfect ground-truth reproduction → Step B exactly 2 branch variations. Applies to all design work in NEZAM.
Orchestrates high-performance infinite canvas systems, viewport transforms, and spatial indexing.
| skill_id | nezam-wireframe-catalog |
| name | nezam-Wireframe Catalog |
| tier | 3 |
| description | Generate precise high-fidelity ASCII wireframes as implementation contracts during /PLAN design wireframes. |
| version | 2.0.0 |
| updated | "2026-05-11T00:00:00.000Z" |
| changelog | [] |
[!CAUTION] DEPRECATED: This skill has been merged into
wireframe-pipeline. Please useskills/design/wireframe-pipeline/SKILL.mdinstead.
Generate precise, high-fidelity ASCII wireframes that serve as implementation contracts. Not sketches — spatial specifications that developers can build from directly.
Every wireframe produced by this skill must include:
For each screen, produce in this exact structure:
╔══════════════════════════════════════════════════════════════════╗
║ SCREEN: [Name] ID: [screen_id] ║
║ Route: [url path] Type: [auth/public/admin] ║
║ User: [who sees this] Flow: [step N of N] ║
╚══════════════════════════════════════════════════════════════════╝
─── DESKTOP — 12 col · 1440px ────────────────────────────────────
┌──────────────────────────────────────────────────────────────────┐
│ NAVIGATION [col 1–12] gap: none │
│ ┌──────────┐ ┌─────────────────────────┐ ┌────────────────────┐ │
│ │ Logo │ │ Home · About · Pricing │ │ Login [Sign Up ▶] │ │
│ │ [brand] │ │ gap: lg between items │ │ │ │
│ └──────────┘ └─────────────────────────┘ └────────────────────┘ │
│ col: 2 col: 6 col: 4 │
│ State: default / scrolled (shadow + bg-surface) │
│ Mobile: hamburger menu [≡], drawer slides from right │
└──────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────┐
│ HERO [col 1–12] padding: xl top/bottom│
│ ┌────────────────────────────┐ ┌─────────────────────────────┐ │
│ │ [BADGE] New — v2 launch │ │ │ │
│ │ │ │ [Illustration / Video] │ │
│ │ H1: [Main headline text] │ │ ratio: 16:9 │ │
│ │ max-width: 560px │ │ bg: gradient-subtle │ │
│ │ │ │ │ │
│ │ Body: [Supporting text] │ │ Loading state: │ │
│ │ max-width: 480px │ │ → skeleton rect │ │
│ │ color: text-muted │ │ │ │
│ │ │ └─────────────────────────────┘ │
│ │ [Primary CTA →] [Demo] │ col: 5 │
│ │ gap: sm between CTAs │ │
│ └────────────────────────────┘ │
│ col: 7 │
│ States: default · hover-cta (scale 1.02) · loading (skeleton) │
└──────────────────────────────────────────────────────────────────┘
─── MOBILE — 4 col · 390px ───────────────────────────────────────
[Reflow to single column — show nav → badge → H1 → body → CTA → image]
[Image moves below CTA on mobile]
[CTA becomes full-width button]
─── STATES ───────────────────────────────────────────────────────
Default: [as wireframe above]
Loading: Nav intact · Hero: skeleton (title/body/cta blocks) · Image: shimmer
Empty: N/A for landing
Error: Toast notification: "[Error description]" · Retry link
─── COMPONENT INVENTORY ──────────────────────────────────────────
NavBar variant: transparent · scrolled: solid + shadow
Badge variant: info · size: sm
Heading level: h1 · size: display-lg · weight: bold
BodyText size: body-lg · color: text-muted
CTAButton variant: primary · size: lg · icon: arrow-right
CTAButton variant: ghost · size: lg
HeroMedia type: illustration · loading: skeleton
─── ACCESSIBILITY ────────────────────────────────────────────────
Landmarks: <header> nav · <main> · <section aria-label="Hero">
Tab order: Logo → Nav links → Login → Sign Up → Hero CTA → Demo
Focus rings: 2px solid · color: primary-500 · offset: 2px
Heading: H1 is first and unique on page
Images: descriptive alt · decorative → alt=""
Motion: hero animation respects prefers-reduced-motion
Present elements ONE AT A TIME. User picks variant before next element appears.
.nezam/core/plans/04-design/DESIGN_CHOICES.yaml — locked YAML of every selection (or DESIGN_CHOICES.md if the active /plan contract uses markdown — keep repo-consistent)DESIGN.md — full token contract + component specs.nezam/core/plans/04-design/WIREFRAMES.md — all screens with full wireframes.nezam/core/plans/04-design/COMPONENT_INVENTORY.md — every component, variant, state/PLAN design wireframes after IA is locked