원클릭으로 Manus에서 모든 스킬 실행

시작하기

nezam-design-system-builder

스타3

포크0

업데이트2026년 6월 5일 00:44

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

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

iDorgham

iDorgham/Nezam

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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

이 저장소의 다른 Skills

같은 저장소

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