메뉴
Generates locale-aware dummy content (copy, logos, illustrations) that picks up the live --ds-* token theme. Output adapts color, radius, and typography to whichever DESIGN.md profile is active.
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 | token-matched-dummy-renderer |
| name | nezam-Token-Matched Dummy Renderer |
| tier | 2 |
| description | Generates locale-aware dummy content (copy, logos, illustrations) that picks up the live --ds-* token theme. Output adapts color, radius, and typography to whichever DESIGN.md profile is active. |
| version | 1.0.0 |
| updated | "2026-05-28T00:00:00.000Z" |
| changelog | ["1.0.0 — Initial release. Backs the Design Hub preview pane content layer."] |
| references | ["DESIGN.md",".cursor/design/references/masri-design-assets/",".cursor/design/references/typeui-main/"] |
| breaking_changes | false |
Produce realistic dummy content for wireframes that visually inherits the current theme. Color, radius, type, and motion all come from the active token set — never hardcoded.
| Slot | Latin (en-US) | Masri (ar-EG) |
|---|---|---|
names[] | "Alex Rivera", "Priya Nair" | "سارة محمود", "أحمد فاروق" |
companies[] | "Acme Corp", "Globex" | "شركة النيل", "مصر التقنية" |
prices[] | "$19" / "$79" | "٤٩٠ ج.م" / "١٢٩٠ ج.م" |
headings[] | "Build faster. Ship smarter." | "ابني أسرع. اطلق بثقة." |
dates[] | "Mar 15, 2026" | "١٥ مارس ٢٠٢٦" / "٢٧ رمضان ١٤٤٧" |
chartData[] | numeric series | identical |
Every illustration (IllusHero, IllusFeatures, IllusDashboard, IllusChart, IllusAvatar, IllusProduct, IllusEmpty) takes a brand prop and computes shades inline:
export function IllusHero({ brand }: { brand: string }) {
return (
<svg viewBox="0 0 400 300">
<rect fill={`${brand}15`} /* 15% opacity */ />
<rect fill={`${brand}40`} />
<rect fill={brand} />
</svg>
)
}
brand MUST be passed via var(--ds-accent) (resolved at parent), never as a hardcoded hex.
| Block | Dummy slot consumed |
|---|---|
Hero_Centered | headings[0], descriptions[1], primary CTA label |
Content_Features | features[0..5] (title + desc) + per-card icon |
Content_Logos | real PNGs from /public/logos/*.png (no text labels) |
Content_CTA | static "Ready to launch your project?" + button label |
Nav_Footer | column titles ('Product', 'Company', 'Resources', 'Legal') |
const dummy = locale === 'ar-EG' ? DUMMY_MASRI : DUMMY_LATIN
DUMMY_MASRI lives in .cursor/design/references/masri-design-assets/ (currently a manifest — payload pending Phase 03 curation).
brand prop + suffix alpha)src/components/preview/dummy-content.tsx (shipped)src/components/preview/dummy-content-masri.tsx (Phase 03 curation)public/logos/*.png (real assets, no text)pnpm run check:tokens
pnpm --filter design-hub test -- --testPathPattern=dummy