메뉴
End-to-end rendered-wireframe pipeline for marketing & SaaS pages: reads wireframes_locked.json, dispatches block components, applies fixed-layout chrome (full-width header/footer), and enforces DESIGN.md §7 contract.
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 | website-wireframes-engine |
| name | nezam-Website Wireframes Engine |
| tier | 3 |
| description | End-to-end rendered-wireframe pipeline for marketing & SaaS pages: reads wireframes_locked.json, dispatches block components, applies fixed-layout chrome (full-width header/footer), and enforces DESIGN.md §7 contract. |
| version | 1.0.0 |
| updated | "2026-05-28T00:00:00.000Z" |
| changelog | ["1.0.0 — Initial release. Implements DESIGN.md v3 §7 Wireframe Rendering Contract."] |
| references | [".cursor/design/references/impeccable-main/",".cursor/design/references/awesome-design-md-main/",".cursor/design/references/open-design-main/","DESIGN.md","wireframes_locked.json"] |
| breaking_changes | false |
Render full-page wireframes inside the NEZAM Design Hub that satisfy the v3 contract: fixed-layout chrome, token-first styling, RTL-aware, Masri-ready dummy content.
/wireframe render requestlocalhost:4000/preview)wireframes_locked.json| Input | Source |
|---|---|
| Page composition (block list) | wireframes_locked.json#pages[].block_layout |
| Active theme tokens | DESIGN.md frontmatter + .nezam/design-hub/src/tokens.css |
| Locale + direction | Runtime (ltr / rtl) |
| Dummy content | dummy-content.tsx + .cursor/design/references/masri-design-assets/ |
wireframes_locked.json for the target page; produce an ordered list of block_type strings.const headerBlocks = ordered.filter(s => s.block_type === 'Nav_TopBar')
const footerBlocks = ordered.filter(s => s.block_type === 'Nav_Footer')
const bodyBlocks = ordered.filter(s => s.block_type !== 'Nav_TopBar' && s.block_type !== 'Nav_Footer')
max-w wrapper. Header and footer get w-full, inner content uses max-w-6xl mx-auto.max-w-6xl mx-auto (or max-w-2xl for compact mode).Section component MUST default to py-14 (see DESIGN.md §7.3).check:tokens).dir="rtl", expand body containers by 1.3× and swap logical edges (see DESIGN.md §9).pnpm run check:tokens before declaring the render lockable.src/components/preview/WireframeBlocksPage.tsx — main renderersrc/components/preview/blocks/<BlockType>.tsx — one file per block_typesrc/components/preview/dummy-content.tsx — locale-aware dummy setNav_TopBar inside the max-w-6xl container (breaks edge bleed)<Section>letter-spacing > 0pnpm run check:tokens
pnpm --filter design-hub typecheck
pnpm --filter design-hub test -- --testPathPattern=preview
fixed-layout-composer, token-matched-dummy-renderer, typeui-masri-wireframe-typographynezam-design-hub, nezam-wireframe-pipeline