تشغيل أي مهارة في Manus بنقرة واحدة

ابدأ الآن

nezam-design-system-builder

النجوم٣

التفرعات٠

آخر تحديث٥ يونيو ٢٠٢٦ في ٠٠:٤٤

Define tokenized design-system contracts (color, type, spacing, themes, a11y) for enforceable implementation.

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

تشغيل في Manus

المصدر

iDorgham

iDorgham/Nezam

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

تشغيل في Manus

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

المصممون الجرافيكيونالفنون والتصميم والترفيه والرياضة والإعلام·SOC 27-1024

SKILL.md

readonly

name	nezam-design-system-builder
description	Define tokenized design-system contracts (color, type, spacing, themes, a11y) for enforceable implementation.
version	1.0.0
updated	"2026-05-08T00:00:00.000Z"
changelog	[]
tier	2
breaking_changes	false

Design System Builder

Use during /PLAN system or any design-system alignment pass before implementation.

Objective

Create a governed design-system contract that implementation teams can follow without design drift.

Output artifacts

Create or update:

docs/workspace/templates/ui-ux/UI_FOUNDATION.md
docs/workspace/templates/ui-ux/tokens.css
docs/workspace/templates/ui-ux/TOKEN_NAMING.md
docs/workspace/templates/ui-ux/COMPONENT_BLUEPRINT.md

Include:

Token taxonomy
- color (semantic roles)
- typography (roles + clamp strategy)
- spacing, radius, elevation, z-index
Theme model
- light/dark mapping
- contrast targets (WCAG 2.2 AA minimum)
- CSS-variable-first theming with prefers-color-scheme baseline
Component primitives
- canonical component naming
- variant and state conventions
- CVA-friendly typed API contracts with className passthrough
- direction-safe (dir-aware) composition and logical CSS guidance
Motion hooks
- references to approved easing/timing primitives
- reduced-motion contract
Implementation constraints
- no hardcoded primitives outside token sources

Output structure

token_sets:
  - colors
  - typography
  - spacing
themes:
  - light
  - dark
component_contracts:
  - "Button"
  - "Card"
compliance:
  wcag_level: "2.2 AA"
  reduced_motion_required: true
  rtl_support_required: true

Core rules

Token-first always.
Accessibility is a system requirement, not optional polish.
Keep naming consistent with existing component architecture.
Design-system docs must be detailed enough for FE/BE handoff.

Dependencies

wireframe-to-spec-converter
token-grid-typography
css-architecture-runtime

المزيد من هذا المستودع

نفس المستودع

nezam-canvas-design

iDorgham/Nezam

Workspace-level visual asset and canvas pipeline for generating documents, slides, and posters with rich layouts.

2026-06-053

nezam-fixed-layout-composer

iDorgham/Nezam

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.

2026-06-053

nezam-frontend-design-pro

iDorgham/Nezam

Apply high-quality frontend design patterns with token-first implementation rules and NEZAM gate compliance.

2026-06-053

nezam-design-context-init

iDorgham/Nezam

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/.

2026-06-053

nezam-design-iteration-protocol

iDorgham/Nezam

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.

2026-06-053

nezam-visual-canvas-engine

iDorgham/Nezam

Orchestrates high-performance infinite canvas systems, viewport transforms, and spatial indexing.

2026-06-053

name	nezam-design-system-builder
description	Define tokenized design-system contracts (color, type, spacing, themes, a11y) for enforceable implementation.
version	1.0.0
updated	"2026-05-08T00:00:00.000Z"
changelog	[]
tier	2
breaking_changes	false

Design System Builder

Use during /PLAN system or any design-system alignment pass before implementation.

Objective

Create a governed design-system contract that implementation teams can follow without design drift.

Output artifacts

Create or update:

docs/workspace/templates/ui-ux/UI_FOUNDATION.md
docs/workspace/templates/ui-ux/tokens.css
docs/workspace/templates/ui-ux/TOKEN_NAMING.md
docs/workspace/templates/ui-ux/COMPONENT_BLUEPRINT.md

Include:

Token taxonomy
- color (semantic roles)
- typography (roles + clamp strategy)
- spacing, radius, elevation, z-index
Theme model
- light/dark mapping
- contrast targets (WCAG 2.2 AA minimum)
- CSS-variable-first theming with prefers-color-scheme baseline
Component primitives
- canonical component naming
- variant and state conventions
- CVA-friendly typed API contracts with className passthrough
- direction-safe (dir-aware) composition and logical CSS guidance
Motion hooks
- references to approved easing/timing primitives
- reduced-motion contract
Implementation constraints
- no hardcoded primitives outside token sources

Output structure

token_sets:
  - colors
  - typography
  - spacing
themes:
  - light
  - dark
component_contracts:
  - "Button"
  - "Card"
compliance:
  wcag_level: "2.2 AA"
  reduced_motion_required: true
  rtl_support_required: true

Core rules

Token-first always.
Accessibility is a system requirement, not optional polish.
Keep naming consistent with existing component architecture.
Design-system docs must be detailed enough for FE/BE handoff.

Dependencies

wireframe-to-spec-converter
token-grid-typography
css-architecture-runtime