Skip to main content
design-system-starter Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
الانتقال إلى التثبيت سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/davila7/claude-code-templates --skill design-system-starterيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المزيد من هذا المستودع Build AI agents that interact with computers like humans do - viewing screens, moving cursors, clicking buttons, and typing text. Covers Anthropic's Computer Use, OpenAI's Operator/CUA, and open-source alternatives. Critical focus on sandboxing, security, and handling the unique challenges of vision-based control. Use when: computer use, desktop automation agent, screen control AI, vision-based agent, GUI automation.
Expert in building products that wrap AI APIs (OpenAI, Anthropic, etc.) into focused tools people will pay for. Not just 'ChatGPT but different' - products that solve specific problems with AI. Covers prompt engineering for products, cost management, rate limiting, and building defensible AI businesses. Use when: AI wrapper, GPT product, AI tool, wrap AI, AI SaaS.
github-workflow-automation Automate GitHub workflows with AI assistance. Includes PR reviews, issue triage, CI/CD integration, and Git operations. Use when automating GitHub workflows, setting up PR review automation, creating GitHub Actions, or triaging issues.
المهن ذات الصلة SOC
استنادا إلى تصنيف SOC المهني
name design-system-starter description Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products. license MIT metadata {"version":"1.0.0","tags":["design-system","ui","components","design-tokens","accessibility","frontend"]}
Design System Starter
Build robust, scalable design systems that ensure visual consistency and exceptional user experiences.
Quick Start
Just describe what you need:
Create a design system for my React app with dark mode support
That's it. The skill provides tokens, components, and accessibility guidelines.
Triggers
Trigger Example Create design system "Create a design system for my app" Design tokens "Set up design tokens for colors and spacing" Component architecture "Design component structure using atomic design" Accessibility "Ensure WCAG 2.1 compliance for my components" Dark mode "Implement theming with dark mode support"
Quick Reference
Design tokens Color, typography, spacing, shadows JSON Component structure Atomic design hierarchy (atoms, molecules, organisms) Theming CSS variables or ThemeProvider setup Accessibility WCAG 2.1 AA compliant patterns Documentation Component docs with props, examples, a11y notes
Bundled Resources
references/component-examples.md - Complete component implementationstemplates/design-tokens-template.json - W3C design token formattemplates/component-template.tsx - React component templatechecklists/design-system-checklist.md - Design system audit checklist
Design System Philosophy
What is a Design System? A design system is more than a component library—it's a collection of:
Design Tokens : Foundational design decisions (colors, spacing, typography)Components : Reusable UI building blocksPatterns : Common UX solutions and compositionsGuidelines : Rules, principles, and best practicesDocumentation : How to use everything effectively
Core Principles 1. Consistency Over Creativity
Predictable patterns reduce cognitive load
Users learn once, apply everywhere
Designers and developers speak the same language
WCAG 2.1 Level AA compliance minimum
Keyboard navigation built-in
Screen reader support from the start
3. Scalable and Maintainable
Design tokens enable global changes
Component composition reduces duplication
Versioning and deprecation strategies
Clear API contracts
Comprehensive documentation
Easy to integrate and customize
Design Tokens Design tokens are the atomic design decisions that define your system's visual language.
Token Categories
1. Color Tokens Primitive Colors (Raw values):
{
"color" : {
"primitive" : {
"blue" : {
"50" : "#eff6ff" ,
"100" : "#dbeafe" ,
"200" : "#bfdbfe" ,
"300" : "#93c5fd" ,
"400" : "#60a5fa" ,
"500" : "#3b82f6" ,
"600" : "#2563eb" ,
"700" : "#1d4ed8" ,
"800" : "#1e40af" ,
"900" : "#1e3a8a" ,
"950" : "#172554"
}
}
}
}
Semantic Colors (Contextual meaning):
{
"color" : {
"semantic" : {
"brand" : {
"primary" : "{color.primitive.blue.600}" ,
"primary-hover" : "{color.primitive.blue.700}" ,
"primary-active" : "{color.primitive.blue.800}"
} ,
"text" : {
"primary" : "{color.primitive.gray.900}" ,
"secondary" : "{color.primitive.gray.600}" ,
"tertiary" : "{color.primitive.gray.500}" ,
"disabled" : "{color.primitive.gray.400}" ,
"inverse" : "{color.primitive.white}"
} ,
"background" : {
"primary" : "{color.primitive.white}" ,
"secondary" : "{color.primitive.gray.50}" ,
"tertiary" : "{color.primitive.gray.100}"
} ,
"feedback" : {
"success" : "{color.primitive.green.600}" ,
"warning" : "{color.primitive.yellow.600}" ,
"error" : "{color.primitive.red.600}" ,
"info" : "{color.primitive.blue.600}"
}
}
}
}
Accessibility : Ensure color contrast ratios meet WCAG 2.1 Level AA:
Normal text: 4.5:1 minimum
Large text (18pt+ or 14pt+ bold): 3:1 minimum
UI components and graphics: 3:1 minimum
2. Typography Tokens {
"typography" : {
"fontFamily" : {
"sans" : "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" ,
"serif" : "'Georgia', 'Times New Roman', serif" ,
"mono" : "'Fira Code', 'Courier New', monospace"
} ,
"fontSize" : {
"xs" : "0.75rem" ,
"sm" : "0.875rem" ,
"base" : "1rem" ,
"lg" : "1.125rem" ,
"xl" : "1.25rem" ,
"2xl" : "1.5rem" ,
"3xl" : "1.875rem" ,
"4xl" : "2.25rem" ,
"5xl" : "3rem"
} ,
"fontWeight" : {
"normal" : 400 ,
"medium" : 500 ,
"semibold" : 600 ,
"bold" : 700
} ,
"lineHeight" : {
"tight" : 1.25 ,
"normal" : 1.5 ,
"relaxed" : 1.75 ,
"loose" : 2
} ,
"letterSpacing" : {
"tight" : "-0.025em" ,
"normal" : "0" ,
"wide" : "0.025em"
}
}
}
3. Spacing Tokens Scale : Use a consistent spacing scale (commonly 4px or 8px base)
{
"spacing" : {
"0" : "0" ,
"1" : "0.25rem" ,
"2" : "0.5rem" ,
"3" : "0.75rem" ,
"4" : "1rem" ,
"5" : "1.25rem" ,
"6" : "1.5rem" ,
"8" : "2rem" ,
"10" : "2.5rem" ,
"12" : "3rem" ,
"16" : "4rem" ,
"20" : "5rem" ,
"24" : "6rem"
}
}
Component-Specific Spacing :
{
"component" : {
"button" : {
"padding-x" : "{spacing.4}" ,
"padding-y" : "{spacing.2}" ,
"gap" : "{spacing.2}"
} ,
"card" : {
"padding" : "{spacing.6}" ,
"gap" : "{spacing.4}"
}
}
}
4. Border Radius Tokens {
"borderRadius" : {
"none" : "0" ,
"sm" : "0.125rem" ,
"base" : "0.25rem" ,
"md" : "0.375rem" ,
"lg" : "0.5rem" ,
"xl" : "0.75rem" ,
"2xl" : "1rem" ,
"full" : "9999px"
}
}
5. Shadow Tokens {
"shadow" : {
"xs" : "0 1px 2px 0 rgba(0, 0, 0, 0.05)" ,
"sm" : "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)" ,
"base" : "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)" ,
"md" : "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)" ,
"lg" : "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)" ,
"xl" : "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
}
}
Component Architecture
Atomic Design Methodology Atoms → Molecules → Organisms → Templates → Pages
Atoms (Primitive Components) Basic building blocks that can't be broken down further.
Button
Input
Label
Icon
Badge
Avatar
interface ButtonProps {
variant ?: 'primary' | 'secondary' | 'outline' | 'ghost' ;
size ?: 'sm' | 'md' | 'lg' ;
disabled ?: boolean ;
loading ?: boolean ;
icon ?: React .ReactNode ;
children : React .ReactNode ;
}
See references/component-examples.md for complete Button implementation with variants, sizes, and styling patterns.
Molecules (Simple Compositions) Groups of atoms that function together.
SearchBar (Input + Button)
FormField (Label + Input + ErrorMessage)
Card (Container + Title + Content + Actions)
interface FormFieldProps {
label : string ;
name : string ;
error ?: string ;
hint ?: string ;
required ?: boolean ;
children : React .ReactNode ;
}
See references/component-examples.md for FormField, Card (compound component pattern), Input with variants, Modal, and more composition examples.
Organisms (Complex Compositions) Complex UI components made of molecules and atoms.
Navigation Bar
Product Card Grid
User Profile Section
Modal Dialog
Templates (Page Layouts) Page-level structures that define content placement.
Dashboard Layout (Sidebar + Header + Main Content)
Marketing Page Layout (Hero + Features + Footer)
Settings Page Layout (Tabs + Content Panels)
Pages (Specific Instances) Actual pages with real content.
Component API Design
Props Best Practices 1. Predictable Prop Names
<Button variant="primary" size="md" />
<Input variant ="outlined" size ="md" /> <Button type ="primary" sizeMode ="md" /> <Input style ="outlined" inputSize ="md" />
interface ButtonProps {
variant ?: 'primary' | 'secondary' ;
size ?: 'sm' | 'md' | 'lg' ;
}
interface ButtonProps {
variant : 'primary' | 'secondary' ;
size : 'sm' | 'md' | 'lg' ;
color : string ;
padding : string ;
}
3. Composition Over Configuration
<Card >
<Card.Header >
<Card.Title > Title</Card.Title >
</Card.Header > <Card.Body > Content</Card.Body > <Card.Footer > Actions</Card.Footer > Card >
<Card
title ="Title"
content ="Content"
footerContent ="Actions"
hasHeader ={true}
hasFooter ={true}
/> 4. Polymorphic Components
Allow components to render as different HTML elements:
<Button as ="a" href="/login" >Login </Button >
<Button as ="button" onClick ={handleClick} > Click Me</Button > See references/component-examples.md for complete polymorphic component TypeScript patterns.
Theming and Dark Mode
Theme Structure interface Theme {
colors : {
brand : {
primary : string ;
secondary : string ;
};
text : {
primary : string ;
secondary : string ;
};
background : {
primary : string ;
secondary : string ;
};
feedback : {
success : string ;
warning : string ;
error : string ;
info : string ;
};
};
typography : {
fontFamily : {
sans : string ;
mono : string ;
};
fontSize : Record <string , string >;
};
spacing : Record <string , string >;
borderRadius : Record <string , string >;
shadow : Record <string , string >;
}
Dark Mode Implementation Approach 1: CSS Variables
:root {
--color-bg-primary : #ffffff ;
--color-text-primary : #000000 ;
}
[data-theme="dark" ] {
--color-bg-primary : #1a1a1a ;
--color-text-primary : #ffffff ;
}
Approach 2: Tailwind CSS Dark Mode
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white" >
Content
</div>
Approach 3: Styled Components ThemeProvider
const lightTheme = { background : '#fff' , text : '#000' };
const darkTheme = { background : '#000' , text : '#fff' };
<ThemeProvider theme ={isDark ? darkTheme : lightTheme }>
<App />
</ThemeProvider >
Accessibility Guidelines
WCAG 2.1 Level AA Compliance
Color Contrast
Normal text (< 18pt): 4.5:1 minimumLarge text (≥ 18pt or ≥ 14pt bold): 3:1 minimumUI components : 3:1 minimum
Keyboard Navigation
<button
onClick={handleClick}
onKeyDown={(e ) => e.key === 'Enter' && handleClick ()}
>
Click me
</button>
<Modal >
<FocusTrap >
{/* Modal content */}
</FocusTrap >
</Modal >
ARIA Attributes
aria-label: Provide accessible namesaria-expanded: Communicate expanded/collapsed statearia-controls: Associate controls with contentaria-live: Announce dynamic content changes
Screen Reader Support
Use semantic HTML elements (<button>, <nav>, <main>)
Avoid div/span soup for interactive elements
Provide meaningful labels for all controls
See references/component-examples.md for complete accessibility examples including Skip Links, focus traps, and ARIA patterns.
Documentation Standards
Component Documentation Template Each component should document:
Purpose : What the component doesUsage : Import statement and basic exampleVariants : Available visual stylesProps : Complete prop table with types, defaults, descriptionsAccessibility : Keyboard support, ARIA attributes, screen reader behaviorExamples : Common use cases with code Use Storybook, Docusaurus, or similar tools for interactive documentation.
See templates/component-template.tsx for the standard component structure.
Design System Workflow
1. Design Phase
Audit existing patterns : Identify inconsistenciesDefine design tokens : Colors, typography, spacingCreate component inventory : List all needed componentsDesign in Figma : Create component library
2. Development Phase
Set up tooling : Storybook, TypeScript, testingImplement tokens : CSS variables or theme configBuild atoms first : Start with primitivesCompose upward : Build molecules, organismsDocument as you go : Write docs alongside code
3. Adoption Phase
Create migration guide : Help teams adoptProvide codemods : Automate migrations when possibleRun workshops : Train teams on usageGather feedback : Iterate based on real usage
4. Maintenance Phase
Version semantically : Major/minor/patch releasesDeprecation strategy : Phase out old components gracefullyChangelog : Document all changesMonitor adoption : Track usage across products
Quick Start Checklist When creating a new design system:
