Skip to main content
phase-5-design-system Build platform-independent design systems and consistent component libraries.
Triggers: design system, component library, design tokens
default: bkit:pipeline-guide
frontend: bkit:frontend-architect
Zur Installation springen Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fรผgen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prรผfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl รผberspringt den Prรผf-Prompt. Prรผfen Sie die Quelle, bevor Sie ihn ausfรผhren.
npx skills add https://github.com/popup-studio-ai/bkit-claude-code --skill phase-5-design-systemDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollstรคndig zu prรผfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository bkend.ai authentication โ email/social login, JWT tokens, RBAC, session management.
Triggers: bkend auth, bkend login, bkend signup, bkend JWT, bkend RBAC
bkend.ai project tutorials (todo to SaaS) and common error troubleshooting.
Triggers: bkend tutorial, bkend cookbook, bkend troubleshooting
bkend.ai database โ CRUD, column types, filtering, sorting, relations, indexing.
Triggers: bkend table, bkend CRUD, bkend column, bkend relation, bkend data
name phase-5-design-system context fork background false classification capability classification-reason Pattern guidance may overlap with model's built-in knowledge as it improves deprecation-risk medium effort medium user-invocable false description Build platform-independent design systems and consistent component libraries.
Triggers: design system, component library, design tokens
default: bkit:pipeline-guide
frontend: bkit:frontend-architect
allowed-tools ["Read","Write","Edit","Glob","Bash"] next-skill phase-6-ui-integration pdca-phase do task-template [Phase-5] {feature}
Phase 5: Design System
Build platform-independent design system
Purpose
Build a reusable UI component library. Enable consistent design and fast development.
What is a Design System?
Definition
A design system is a collection of reusable components and clear standards that enables building consistent user experiences at scale.
Why is it Needed? (Framework Agnostic)
Problem Design System Solution Designer-developer mismatch Single Source of Truth Duplicate component development Reusable component library Inconsistent UI/UX Unified design tokens and rules Increased maintenance cost Centralized change management Delayed new member onboarding Documented component catalog
3 Layers of Design System
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ Design Tokens โ
โ Color, Typography, Spacing, Radius, Shadow, ... โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ Core Components โ
โ Button, Input, Card, Dialog, Avatar, Badge, ... โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ Composite Components โ
โ Form, DataTable, Navigation, SearchBar, ... โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Platform-specific Implementation Tools
Platform Recommended Tools Design Token Method Web (React/Next.js) shadcn/ui, Radix CSS Variables Web (Vue) Vuetify, PrimeVue CSS Variables Flutter Material 3, Custom Theme ThemeData iOS (SwiftUI) Native Components Asset Catalog, Color Set Android (Compose) Material 3 MaterialTheme React Native NativeBase, Tamagui StyleSheet + Theme
What to Do in This Phase
Install Base Components : Button, Input, Card, etc.Customize : Adjust to project styleComposite Components : Combine multiple base componentsDocumentation : Document component usage
Deliverables components/
โโโ ui/ # shadcn/ui components
โโโ button.tsx
โโโ input.tsx
โโโ card.tsx
โโโ ...
lib/
โโโ utils.ts # Utilities (cn function, etc.)
docs/02-design/
โโโ design-system.md # Design system specification
PDCA Application
Plan : Required component listDesign : Component structure, variants designDo : Implement/customize componentsCheck : Review consistencyAct : Finalize and proceed to Phase 6
Level-wise Application Level Application Method Starter Optional (simple projects may skip) Dynamic Required Enterprise Required (including design tokens)
shadcn/ui Installation
npx shadcn@latest init
npx shadcn@latest add button
npx shadcn@latest add input
npx shadcn@latest add card
Required Component List
Basic
Button, Input, Textarea
Card, Badge, Avatar
Dialog, Sheet, Popover
Form
Form, Label, Select
Checkbox, Radio, Switch
Navigation
Navigation Menu, Tabs
Breadcrumb, Pagination
Custom Theme Building
Design Token Override shadcn/ui is CSS variable-based, so customize themes in globals.css.
@layer base {
:root {
--background : 0 0% 100% ;
--foreground : 222.2 84% 4.9% ;
--primary : 221.2 83.2% 53.3% ;
--primary-foreground : 210 40% 98% ;
--secondary : 210 40% 96.1% ;
--accent : 210 40% 96.1% ;
--destructive : 0 84.2% 60.2% ;
--muted : 210 40% 96.1% ;
--muted-foreground : 215.4 16.3% 46.9% ;
--font-sans : 'Pretendard' , sans-serif;
--font-mono : 'JetBrains Mono' , monospace;
--spacing-xs : 0.25rem ;
--spacing-sm : 0.5rem ;
--spacing-md : 1rem ;
--spacing-lg : 1.5rem ;
--spacing-xl : 2rem ;
--radius : 0.5rem ;
--radius-sm : 0.25rem ;
--radius-lg : 0.75rem ;
--radius-full : 9999px ;
--shadow-sm : 0 1px 2px 0 rgb (0 0 0 / 0.05 );
--shadow-md : 0 4px 6px -1px rgb (0 0 0 / 0.1 );
--shadow-lg : 0 10px 15px -3px rgb (0 0 0 / 0.1 );
}
.dark {
--background : 222.2 84% 4.9% ;
--foreground : 210 40% 98% ;
--primary : 217.2 91.2% 59.8% ;
}
}
Tailwind Config Extension
module .exports = {
theme : {
extend : {
colors : {
brand : {
50 : 'hsl(var(--brand-50))' ,
500 : 'hsl(var(--brand-500))' ,
900 : 'hsl(var(--brand-900))' ,
},
},
fontFamily : {
sans : ['var(--font-sans)' , 'system-ui' ],
mono : ['var(--font-mono)' , 'monospace' ],
},
spacing : {
'xs' : 'var(--spacing-xs)' ,
'sm' : 'var(--spacing-sm)' ,
'md' : 'var(--spacing-md)' ,
'lg' : 'var(--spacing-lg)' ,
'xl' : 'var(--spacing-xl)' ,
},
borderRadius : {
'sm' : 'var(--radius-sm)' ,
'DEFAULT' : 'var(--radius)' ,
'lg' : 'var(--radius-lg)' ,
'full' : 'var(--radius-full)' ,
},
},
},
}
Design Token Documentation Recommended to create docs/02-design/design-tokens.md per project:
Token Value Purpose --primary221.2 83.2% 53.3%Brand main color --radius0.5remDefault border-radius --font-sansPretendardBody font
Component Customization
const Button = React .forwardRef <
HTMLButtonElement ,
ButtonProps & { isLoading ?: boolean }
>(({ isLoading, children, ...props }, ref ) => {
return (
<ButtonPrimitive ref ={ref} {...props }>
{isLoading ? <Spinner /> : children}
</ButtonPrimitive >
Mobile App Design System
Flutter: Custom Theme Building Flutter defines design tokens through ThemeData.
// lib/theme/app_theme.dart
import 'package:flutter/material.dart';
class AppTheme {
// ===== Design Tokens =====
// Colors
static const Color primary = Color(0xFF3B82F6);
static const Color secondary = Color(0xFF64748B);
static const Color destructive = Color(0xFFEF4444);
static const Color background = Color(0xFFFFFFFF);
static const Color foreground = Color(0xFF0F172A);
// Spacing
static const double spacingXs = 4.0;
static const double spacingSm = 8.0;
static const double spacingMd = 16.0;
static const double spacingLg = 24.0;
static const double spacingXl = 32.0;
// Border Radius
static const double radiusSm = 4.0;
static const double radiusMd = 8.0;
static const double radiusLg = 12.0;
static const double radiusFull = 9999.0;
// ===== Theme Data =====
static ThemeData get lightTheme => ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
seedColor: primary,
brightness: Brightness.light,
),
fontFamily: 'Pretendard',
// Button Theme
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(
horizontal: spacingMd,
vertical: spacingSm,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radiusMd),
),
),
),
// Card Theme
cardTheme: CardTheme(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radiusLg),
),
),
// Input Theme
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(radiusMd),
),
contentPadding: EdgeInsets.all(spacingSm),
),
);
static ThemeData get darkTheme => ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
seedColor: primary,
brightness: Brightness.dark,
),
fontFamily: 'Pretendard',
// ... dark theme overrides
);
}
Flutter: Reusable Components // lib/components/app_button.dart
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
enum AppButtonVariant { primary, secondary, destructive, outline }
class AppButton extends StatelessWidget {
final String label;
final VoidCallback? onPressed;
final AppButtonVariant variant;
final bool isLoading;
const AppButton({
required this.label,
this.onPressed,
this.variant = AppButtonVariant.primary,
this.isLoading = false,
super.key,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: isLoading ? null : onPressed,
style: _getStyle(),
child: isLoading
? SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(strokeWidth: 2),
)
: Text(label),
);
}
ButtonStyle _getStyle() {
switch (variant) {
case AppButtonVariant.destructive:
return ElevatedButton.styleFrom(
backgroundColor: AppTheme.destructive,
);
case AppButtonVariant.outline:
return ElevatedButton.styleFrom(
backgroundColor: Colors.transparent,
side: BorderSide(color: AppTheme.primary),
);
default:
return ElevatedButton.styleFrom();
}
}
}
Flutter: Project Structure lib/
โโโ theme/
โ โโโ app_theme.dart # ThemeData + Design Tokens
โ โโโ app_colors.dart # Color constants
โ โโโ app_typography.dart # TextStyle definitions
โ โโโ app_spacing.dart # Spacing constants
โโโ components/
โ โโโ app_button.dart
โ โโโ app_input.dart
โ โโโ app_card.dart
โ โโโ app_dialog.dart
โโโ main.dart
Cross-Platform Design Token Sharing
Design Token JSON (Platform Independent) Centrally manage tokens with Figma Tokens or Style Dictionary.
{
"color" : {
"primary" : { "value" : "#3B82F6" } ,
"secondary" : { "value" : "#64748B" } ,
"destructive" : { "value" : "#EF4444" }
} ,
"spacing" : {
"xs" : { "value" : "4px" } ,
"sm" : { "value" : "8px" } ,
"md" : { "value" : "16px" } ,
"lg" : { "value" : "24px" }
} ,
"radius" : {
"sm" : { "value" : "4px" } ,
"md" : { "value" : "8px" } ,
"lg" : { "value" : "12px" }
} ,
"font" : {
"family" : { "value" : "Pretendard" } ,
"size" : {
"sm" : { "value" : "14px" } ,
"md" : { "value" : "16px" } ,
"lg" : { "value" : "18px" }
}
}
}
Platform-specific Conversion
npx style-dictionary build
Design System Checklist (Platform Agnostic)
Required Items
Template See templates/pipeline/phase-5-design-system.template.md
Next Phase Phase 6: UI Implementation + API Integration โ Components are ready, now implement actual screens
